diff --git a/components/court/CourtExitButton.tsx b/components/court/CourtExitButton.tsx
index 48772a8ba..f84f21f8e 100644
--- a/components/court/CourtExitButton.tsx
+++ b/components/court/CourtExitButton.tsx
@@ -71,13 +71,13 @@ const CourtExitButton = ({ className }: { className?: string }) => {
     <>
       <button
         className={`rounded-md ${
-          canExit ? "bg-[#DC056C]" : "bg-gray-400"
+          canExit ? "bg-[#670031]" : "bg-gray-400"
         }  px-4 py-2 text-white ${className}`}
         onClick={() => setIsOpen(true)}
         disabled={!canExit}
       >
-        <div className="flex items-center gap-1">
-          {canExit ? "Exit" : "Preparing to exit"}
+        <div className="flex items-center justify-center gap-1">
+          <span>{canExit ? "Exit" : "Preparing to exit"}</span>
           {!canExit && (
             <span className="text-xs text-gray-500">
               ({moment.duration(cooldownTime?.left).humanize()} left)
diff --git a/components/court/CourtUnstakeButton.tsx b/components/court/CourtUnstakeButton.tsx
index 98564ce20..2e5e66ad1 100644
--- a/components/court/CourtUnstakeButton.tsx
+++ b/components/court/CourtUnstakeButton.tsx
@@ -46,7 +46,7 @@ const CourtUnstakeButton = ({ className }: { className?: string }) => {
   return (
     <>
       <button
-        className={`rounded-md bg-[#DC056C] px-4 py-2 text-white ${className}`}
+        className={`rounded-md bg-[#670031] px-4 py-2 text-white ${className}`}
         onClick={() => setIsOpen(true)}
       >
         Unstake
diff --git a/components/court/JoinCourtAsJurorButton.tsx b/components/court/JoinCourtAsJurorButton.tsx
index e987303d9..e81f44631 100644
--- a/components/court/JoinCourtAsJurorButton.tsx
+++ b/components/court/JoinCourtAsJurorButton.tsx
@@ -100,7 +100,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
       <div className="relative">
         <button
           disabled={isLoading}
-          className={`rounded-md bg-[#670031] px-4 py-2 text-white transition-all  ${
+          className={`rounded-md bg-[#DC056C] px-4 py-2 text-white transition-all  ${
             connectedParticipant?.type === "Delegator" &&
             "ring-2 ring-orange-500"
           } ${className}`}
diff --git a/components/court/ManageDelegationButton.tsx b/components/court/ManageDelegationButton.tsx
index c9c817bea..cd0dd1832 100644
--- a/components/court/ManageDelegationButton.tsx
+++ b/components/court/ManageDelegationButton.tsx
@@ -14,7 +14,7 @@ const ManageDelegationButton = ({ className }: { className?: string }) => {
     <>
       <div className="relative">
         <button
-          className={`rounded-md bg-[#670031] px-4 py-2 text-white transition-all  ${
+          className={`rounded-md bg-[#DC056C] px-4 py-2 text-white transition-all  ${
             connectedParticipant?.type === "Juror" && "ring-2 ring-orange-500"
           } ${className}`}
           onClick={() => setIsOpen(true)}
diff --git a/components/portfolio/CourtRewardsTable.tsx b/components/portfolio/CourtRewardsTable.tsx
new file mode 100644
index 000000000..5e31c2e1c
--- /dev/null
+++ b/components/portfolio/CourtRewardsTable.tsx
@@ -0,0 +1,140 @@
+import SubScanIcon from "components/icons/SubScanIcon";
+import Table, { TableColumn, TableData } from "components/ui/Table";
+import Decimal from "decimal.js";
+import { ZTG } from "lib/constants";
+import { useChainConstants } from "lib/hooks/queries/useChainConstants";
+import { useMintedInCourt } from "lib/hooks/queries/useMintedInCourt";
+import { useZtgPrice } from "lib/hooks/queries/useZtgPrice";
+import { formatNumberLocalized } from "lib/util";
+import EmptyPortfolio from "./EmptyPortfolio";
+import {
+  isPayoutEligible,
+  useCourtNextPayout,
+} from "lib/hooks/queries/useCourtNextPayout";
+import { times } from "lodash-es";
+import { isNotNull } from "@zeitgeistpm/utility/dist/null";
+import InfoPopover from "components/ui/InfoPopover";
+import { PiTimerBold } from "react-icons/pi";
+
+const columns: TableColumn[] = [
+  {
+    header: "Time",
+    accessor: "timestamp",
+    type: "component",
+  },
+  {
+    header: "Amount",
+    accessor: "amount",
+    type: "component",
+    alignment: "right",
+  },
+  {
+    header: "Subscan",
+    accessor: "subscan",
+    type: "component",
+    width: "100px",
+  },
+];
+
+const CourtRewardsTable = ({ address }: { address: string }) => {
+  const { data: mintedInCourt, isLoading } = useMintedInCourt({
+    account: address,
+  });
+  const { data: ztgPrice } = useZtgPrice();
+  const { data: constants } = useChainConstants();
+
+  const { data: courtPayout } = useCourtNextPayout();
+
+  let tableData: TableData[] | undefined = mintedInCourt?.map((mint) => {
+    return {
+      timestamp: (
+        <span>
+          {new Intl.DateTimeFormat("default", {
+            dateStyle: "medium",
+            timeStyle: "medium",
+          }).format(new Date(mint?.timestamp))}
+        </span>
+      ),
+      amount: (
+        <div>
+          <div>
+            {formatNumberLocalized(
+              new Decimal(mint?.dBalance ?? 0).div(ZTG).toNumber(),
+            )}{" "}
+            <b>{constants?.tokenSymbol}</b>
+          </div>
+          <div className="text-gray-400">
+            ${" "}
+            {formatNumberLocalized(
+              ztgPrice
+                ?.mul(mint?.dBalance ?? 0)
+                .div(ZTG)
+                .toNumber() ?? 0,
+            )}
+          </div>
+        </div>
+      ),
+      subscan: (
+        <a
+          className="center text-sm"
+          target="_blank"
+          referrerPolicy="no-referrer"
+          rel="noopener"
+          href={`https://zeitgeist.subscan.io/block/${mint?.blockNumber}?tab=event`}
+        >
+          <div className="">
+            <SubScanIcon />
+          </div>
+        </a>
+      ),
+    };
+  });
+
+  tableData = [
+    isPayoutEligible(courtPayout)
+      ? {
+          timestamp: (
+            <span className="flex items-center gap-2 text-gray-400">
+              {new Intl.DateTimeFormat("default", {
+                dateStyle: "medium",
+                timeStyle: "medium",
+              }).format(courtPayout.nextRewardDate)}
+              <span className="flex items-center gap-1 italic">
+                (ETA <PiTimerBold size={18} />)
+              </span>
+            </span>
+          ),
+          amount: <div className="text-gray-300">--</div>,
+          subscan: (
+            <div className="center text-center">
+              <InfoPopover
+                icon={<PiTimerBold className="text-orange-300" size={24} />}
+                position={"top-start"}
+              >
+                Next expected staking reward payout.
+              </InfoPopover>
+            </div>
+          ),
+        }
+      : null,
+    ...(tableData ?? []),
+  ].filter(isNotNull);
+
+  return (
+    <div>
+      {isLoading === false &&
+      (mintedInCourt == null || mintedInCourt?.length === 0) ? (
+        <EmptyPortfolio
+          headerText="No Court Rewards"
+          bodyText=""
+          buttonText="Go To Court"
+          buttonLink="/court"
+        />
+      ) : (
+        <Table columns={columns} data={tableData} />
+      )}
+    </div>
+  );
+};
+
+export default CourtRewardsTable;
diff --git a/components/portfolio/CourtTabGroup.tsx b/components/portfolio/CourtTabGroup.tsx
new file mode 100644
index 000000000..12ca88a5a
--- /dev/null
+++ b/components/portfolio/CourtTabGroup.tsx
@@ -0,0 +1,32 @@
+import { Tab } from "@headlessui/react";
+import SubTabsList from "components/ui/SubTabsList";
+import { useQueryParamState } from "lib/hooks/useQueryParamState";
+import CourtRewardsTable from "./CourtRewardsTable";
+
+type CourtGroupItem = "Rewards";
+const courtTabItems: CourtGroupItem[] = ["Rewards"];
+
+const CourtTabGroup = ({ address }: { address: string }) => {
+  const [historyTabSelection, setHistoryTabSelection] =
+    useQueryParamState<CourtGroupItem>("courtTab");
+
+  const courtTabIndex = courtTabItems.indexOf(historyTabSelection);
+  const selectedIndex = courtTabIndex !== -1 ? courtTabIndex : 0;
+
+  return (
+    <Tab.Group
+      defaultIndex={0}
+      selectedIndex={selectedIndex}
+      onChange={(index) => setHistoryTabSelection(courtTabItems[index])}
+    >
+      <SubTabsList titles={courtTabItems} />
+      <Tab.Panels>
+        <Tab.Panel>
+          <CourtRewardsTable address={address} />
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};
+
+export default CourtTabGroup;
diff --git a/components/ui/InfoPopover.tsx b/components/ui/InfoPopover.tsx
index 3537bf901..7cb9e159b 100644
--- a/components/ui/InfoPopover.tsx
+++ b/components/ui/InfoPopover.tsx
@@ -88,7 +88,7 @@ export const InfoPopover: React.FC<InfoPopoverProps> = ({
               <Popover.Panel
                 className={`absolute z-[100] bg-tooltip-bg ${positionCss} w-screen rounded-md lg:w-[564px] ${popoverCss}`}
               >
-                <div className="shadow-xs overflow-hidden rounded-md p-5 text-left text-base font-light text-black ring-2 ring-orange-400 ring-opacity-20">
+                <div className="shadow-xs overflow-hidden rounded-md px-3 py-2 text-left  text-sm font-light text-black ring-2 ring-orange-400 ring-opacity-20">
                   {children}
                 </div>
               </Popover.Panel>
diff --git a/lib/hooks/queries/useCourtNextPayout.ts b/lib/hooks/queries/useCourtNextPayout.ts
new file mode 100644
index 000000000..81e13c84b
--- /dev/null
+++ b/lib/hooks/queries/useCourtNextPayout.ts
@@ -0,0 +1,146 @@
+import { useQuery } from "@tanstack/react-query";
+import { HistoricalAccountBalanceOrderByInput } from "@zeitgeistpm/indexer";
+import { IndexerContext, isIndexedSdk, Sdk } from "@zeitgeistpm/sdk";
+import { blockDate } from "@zeitgeistpm/utility/dist/time";
+import Decimal from "decimal.js";
+import { useChainTime } from "lib/state/chaintime";
+import { useWallet } from "lib/state/wallet";
+import { useSdkv2 } from "../useSdkv2";
+import { useChainConstants } from "./useChainConstants";
+
+export const courtNextPayoutRootKey = "court-next-payout";
+
+export type CourtPayoutInfo = {
+  inflationPeriod: number;
+  nextPayoutBlock: number;
+  lastPayoutBlock: number;
+  nextPayoutDate: Date;
+  lastPayoutDate: Date;
+};
+
+export type WithPayoutEligibility = CourtPayoutInfo & {
+  nextRewardBlock: number;
+  nextRewardDate: Date;
+};
+
+export const isPayoutEligible = (
+  info?: CourtPayoutInfo | WithPayoutEligibility | null,
+): info is WithPayoutEligibility =>
+  (info as WithPayoutEligibility)?.nextRewardBlock !== undefined;
+
+export const useCourtNextPayout = () => {
+  const [sdk, id] = useSdkv2();
+  const now = useChainTime();
+  const { data: constants } = useChainConstants();
+  const wallet = useWallet();
+
+  const enabled = isIndexedSdk(sdk) && now && constants && wallet.realAddress;
+
+  const query = useQuery<CourtPayoutInfo | WithPayoutEligibility | null>(
+    [id, courtNextPayoutRootKey, wallet?.realAddress, now?.block],
+    async () => {
+      if (enabled) {
+        /**
+         * @note
+         *  last_payout_block(current_block) = floor(current_block / inf_per) * inf_per
+         *  next_payout_block(current_block) = last_payout_block(current_block) + inf_per
+         */
+
+        const currentBlock = new Decimal(now.block);
+
+        const inflationPeriod = new Decimal(
+          constants.court.inflationPeriodBlocks,
+        );
+
+        const lastPayoutBlock = new Decimal(currentBlock)
+          .div(inflationPeriod)
+          .floor()
+          .mul(inflationPeriod);
+
+        const nextPayoutBlock = lastPayoutBlock.add(inflationPeriod);
+
+        const participantFirstJoinedAt = await getAccountJoined(
+          sdk,
+          wallet.realAddress!,
+        );
+
+        const courtPayoutInfo: CourtPayoutInfo = {
+          inflationPeriod: inflationPeriod.toNumber(),
+          nextPayoutBlock: nextPayoutBlock.toNumber(),
+          lastPayoutBlock: lastPayoutBlock.toNumber(),
+          nextPayoutDate: blockDate(now, nextPayoutBlock.toNumber()),
+          lastPayoutDate: blockDate(now, lastPayoutBlock.toNumber()),
+        };
+
+        if (participantFirstJoinedAt) {
+          const withPayoutEligibility: WithPayoutEligibility = {
+            ...courtPayoutInfo,
+            nextRewardBlock: nextPayoutBlock.toNumber(),
+            nextRewardDate: blockDate(now, nextPayoutBlock.toNumber()),
+          };
+
+          return withPayoutEligibility;
+        }
+
+        return courtPayoutInfo;
+      }
+
+      return null;
+    },
+    {
+      enabled: Boolean(enabled),
+      keepPreviousData: true,
+    },
+  );
+
+  return query;
+};
+
+const getAccountJoined = async (sdk: Sdk<IndexerContext>, address: string) => {
+  const { historicalAccountBalances } =
+    await sdk.indexer.historicalAccountBalances({
+      where: {
+        AND: [
+          { accountId_eq: address },
+          {
+            OR: [
+              {
+                extrinsic: {
+                  name_eq: "Court.join_court",
+                },
+              },
+              {
+                extrinsic: {
+                  name_eq: "Court.delegate",
+                },
+              },
+
+              {
+                extrinsic: {
+                  name_eq: "Court.exit_court",
+                },
+              },
+            ],
+          },
+        ],
+      },
+      order: HistoricalAccountBalanceOrderByInput.BlockNumberDesc,
+    });
+
+  let earliestEligibleJoin: Decimal | null = null;
+
+  for (const event of historicalAccountBalances) {
+    if (
+      event.extrinsic?.name === "Court.join_court" ||
+      event.extrinsic?.name === "Court.delegate"
+    ) {
+      earliestEligibleJoin = new Decimal(event.blockNumber);
+    }
+    if (event.extrinsic?.name === "Court.exit_court") {
+      console.log("EXITED");
+      break;
+    }
+  }
+
+  return earliestEligibleJoin;
+};
diff --git a/lib/hooks/queries/useCourtReassignments.ts b/lib/hooks/queries/useCourtReassignments.ts
new file mode 100644
index 000000000..f1cdbd4e1
--- /dev/null
+++ b/lib/hooks/queries/useCourtReassignments.ts
@@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query";
+import { HistoricalAccountBalanceOrderByInput } from "@zeitgeistpm/indexer";
+import { isIndexedSdk } from "@zeitgeistpm/sdk";
+import { uniqBy } from "lodash-es";
+import { useSdkv2 } from "../useSdkv2";
+
+export const reassignedInCourtRootKey = "reassigned-in-court";
+
+export const useCourtReassignments = (
+  filter: Partial<{
+    account: string;
+    limit: number;
+    offset: number;
+  }>,
+) => {
+  const [sdk, id] = useSdkv2();
+
+  const enabled = sdk && isIndexedSdk(sdk) && filter.account;
+
+  const query = useQuery(
+    [id, reassignedInCourtRootKey, filter],
+    async () => {
+      if (enabled) {
+        const response = await sdk.indexer.historicalAccountBalances({
+          where: {
+            accountId_eq: filter.account,
+            extrinsic: {
+              name_eq: "Court.reassign_court_stakes",
+            },
+          },
+          order: HistoricalAccountBalanceOrderByInput.TimestampDesc,
+          limit: filter.limit,
+          offset: filter.offset,
+        });
+
+        return uniqBy(
+          response.historicalAccountBalances,
+          (hab) => hab.extrinsic?.hash,
+        );
+      }
+    },
+    {
+      enabled: Boolean(enabled),
+      staleTime: 30_000,
+    },
+  );
+  return query;
+};
diff --git a/lib/hooks/queries/useMintedInCourt.ts b/lib/hooks/queries/useMintedInCourt.ts
new file mode 100644
index 000000000..e2ee12bf5
--- /dev/null
+++ b/lib/hooks/queries/useMintedInCourt.ts
@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import type { HistoricalAccountBalanceWhereInput } from "@zeitgeistpm/indexer";
+import { HistoricalAccountBalanceOrderByInput } from "@zeitgeistpm/indexer";
+import { isIndexedSdk } from "@zeitgeistpm/sdk";
+import { useSdkv2 } from "../useSdkv2";
+
+export const mintedInCourtRootKey = "minted-in-court";
+
+export const useMintedInCourt = (
+  filter: Partial<{
+    account: string;
+    limit: number;
+    offset: number;
+  }>,
+) => {
+  const [sdk, id] = useSdkv2();
+
+  const enabled = sdk && isIndexedSdk(sdk) && filter.account;
+
+  const query = useQuery(
+    [id, mintedInCourtRootKey, filter],
+    async () => {
+      if (enabled) {
+        const response = await sdk.indexer.historicalAccountBalances({
+          where: {
+            event_eq: "MintedInCourt",
+            accountId_eq: filter.account,
+          },
+          order: HistoricalAccountBalanceOrderByInput.TimestampDesc,
+          limit: filter.limit,
+          offset: filter.offset,
+        });
+
+        return response.historicalAccountBalances;
+      }
+    },
+    {
+      enabled: Boolean(enabled),
+      staleTime: 30_000,
+    },
+  );
+  return query;
+};
diff --git a/pages/court/index.tsx b/pages/court/index.tsx
index f7e62057a..3fa97b67d 100644
--- a/pages/court/index.tsx
+++ b/pages/court/index.tsx
@@ -1,4 +1,4 @@
-import { Disclosure, Tab } from "@headlessui/react";
+import { Dialog, Disclosure, Tab } from "@headlessui/react";
 import { ZTG } from "@zeitgeistpm/sdk";
 import { CourtCasesTable } from "components/court/CourtCasesTable";
 import CourtExitButton from "components/court/CourtExitButton";
@@ -6,7 +6,10 @@ import CourtUnstakeButton from "components/court/CourtUnstakeButton";
 import JoinCourtAsJurorButton from "components/court/JoinCourtAsJurorButton";
 import JurorsTable from "components/court/JurorsTable";
 import ManageDelegationButton from "components/court/ManageDelegationButton";
+import SubScanIcon from "components/icons/SubScanIcon";
 import InfoPopover from "components/ui/InfoPopover";
+import Modal from "components/ui/Modal";
+import Decimal from "decimal.js";
 import { useConnectedCourtParticipant } from "lib/hooks/queries/court/useConnectedCourtParticipant";
 import { useCourtCases } from "lib/hooks/queries/court/useCourtCases";
 import { useCourtParticipants } from "lib/hooks/queries/court/useCourtParticipants";
@@ -14,16 +17,29 @@ import { useCourtStakeSharePercentage } from "lib/hooks/queries/court/useCourtSt
 import { useCourtTotalStakedAmount } from "lib/hooks/queries/court/useCourtTotalStakedAmount";
 import { useCourtYearlyInflationAmount } from "lib/hooks/queries/court/useCourtYearlyInflation";
 import { useChainConstants } from "lib/hooks/queries/useChainConstants";
+import {
+  isPayoutEligible,
+  useCourtNextPayout,
+} from "lib/hooks/queries/useCourtNextPayout";
+import { useCourtReassignments } from "lib/hooks/queries/useCourtReassignments";
+import { useMintedInCourt } from "lib/hooks/queries/useMintedInCourt";
 import { useZtgPrice } from "lib/hooks/queries/useZtgPrice";
-import { formatNumberLocalized } from "lib/util";
+import { useChainTime } from "lib/state/chaintime";
+import { useWallet } from "lib/state/wallet";
+import { formatNumberLocalized, shortenAddress } from "lib/util";
 import { isNumber } from "lodash-es";
 import { NextPage } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import NotFoundPage from "pages/404";
 import { IGetPlaiceholderReturn, getPlaiceholder } from "plaiceholder";
+import { useState } from "react";
 import { ChevronDown } from "react-feather";
+import { FaList } from "react-icons/fa";
+import { HiCheckCircle, HiChevronDoubleUp } from "react-icons/hi";
 import { IoMdArrowRoundForward } from "react-icons/io";
+import { MdMoneyOff } from "react-icons/md";
+import { PiTimerBold } from "react-icons/pi";
 
 export async function getStaticProps() {
   const [bannerPlaiceholder] = await Promise.all([
@@ -46,11 +62,47 @@ const CourtPage: NextPage = ({
     return <NotFoundPage />;
   }
 
+  const wallet = useWallet();
   const { data: constants } = useChainConstants();
   const connectedParticipant = useConnectedCourtParticipant();
   const { data: ztgPrice } = useZtgPrice();
   const stakeShare = useCourtStakeSharePercentage();
 
+  const now = useChainTime();
+
+  const { data: mintedPayouts } = useMintedInCourt({
+    account: wallet.realAddress,
+  });
+
+  const { data: courtReassignments } = useCourtReassignments({
+    account: wallet.realAddress,
+  });
+
+  const { data: courtPayout } = useCourtNextPayout();
+
+  const allRewards = mintedPayouts
+    ?.concat(courtReassignments ?? [])
+    .sort((a, b) => b.blockNumber - a.blockNumber);
+
+  const totalMintedPayout = mintedPayouts?.reduce((acc, curr) => {
+    return acc.add(curr.dBalance);
+  }, new Decimal(0));
+
+  const totalReassignmentsPayout = courtReassignments?.reduce((acc, curr) => {
+    return acc.add(curr.dBalance);
+  }, new Decimal(0));
+
+  const totalRewards = totalMintedPayout?.add(totalReassignmentsPayout ?? 0);
+
+  const [showPayoutsModal, setShowPayoutsModal] = useState(false);
+
+  const nextPayoutProgress =
+    now && courtPayout
+      ? ((now.block - courtPayout.lastPayoutBlock) /
+          courtPayout.inflationPeriod) *
+        100
+      : null;
+
   return (
     <div className="mt-4 flex flex-col gap-y-4">
       <div className="relative mb-4 basis-7 flex-wrap items-center gap-4 lg:flex">
@@ -89,7 +141,7 @@ const CourtPage: NextPage = ({
                 {connectedParticipant && (
                   <div>
                     <div
-                      className={`center gap-1 rounded-md px-2 py-1 text-sm text-gray-600`}
+                      className={`center gap-1 rounded-md py-1 text-sm text-gray-600`}
                     >
                       {connectedParticipant?.type}
                       <InfoPopover overlay={false} position="top">
@@ -102,7 +154,7 @@ const CourtPage: NextPage = ({
                 )}
               </div>
 
-              <div className="mb-6 flex">
+              <div className="mb-6 flex items-center gap-4">
                 <div className="flex-1">
                   <div className="font-mono text-lg font-medium">
                     {formatNumberLocalized(
@@ -143,24 +195,81 @@ const CourtPage: NextPage = ({
                     </div>
                   </div>
                 </div>
+                {totalRewards?.gt(0) ? (
+                  <div className="text-md line-clamp-1 flex  font-mono font-semibold">
+                    <div className="text-right">
+                      <h3 className="mb-1 flex-1 font-sans text-sm text-gray-800">
+                        Staking Rewards
+                      </h3>
+                      <div className="flex items-center justify-end gap-2">
+                        <div>
+                          {formatNumberLocalized(
+                            totalRewards?.div(ZTG).toNumber() ?? 0,
+                          )}{" "}
+                          {constants?.tokenSymbol}
+                        </div>
+                        <div
+                          onClick={() => setShowPayoutsModal(true)}
+                          className="flex cursor-pointer rounded-md bg-gray-500/80 p-2 text-gray-300"
+                        >
+                          <FaList size={10} />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : null}
               </div>
 
-              <div>
+              <div className="mb-4">
                 <div className="mb-3 flex flex-col gap-4 md:flex-row">
                   <JoinCourtAsJurorButton className="h-full w-full md:w-auto" />
                   <ManageDelegationButton className="h-full w-full md:w-auto" />
 
                   {connectedParticipant &&
                     !isNumber(connectedParticipant.prepareExitAt) && (
-                      <CourtUnstakeButton className="h-full w-full md:w-auto" />
+                      <CourtUnstakeButton className="h-full w-full flex-1 md:w-auto" />
                     )}
 
                   {connectedParticipant &&
                     isNumber(connectedParticipant.prepareExitAt) && (
-                      <CourtExitButton className="h-full w-full md:w-auto" />
+                      <CourtExitButton className="h-full w-full flex-1 md:w-auto" />
                     )}
                 </div>
               </div>
+
+              {courtPayout ? (
+                <div className="mb-1">
+                  <div className="mb-1 flex items-center text-sm text-gray-600">
+                    <h4 className="bold flex flex-1 items-center gap-1 text-sm text-gray-600">
+                      Next Staking Payout
+                      {!isPayoutEligible(courtPayout) ? (
+                        <InfoPopover
+                          overlay={false}
+                          position="top-end"
+                          popoverCss={`!w-96`}
+                        >
+                          You are not eligible for the next staking reward
+                          payout. Join as a juror or delegator to be eligible.
+                        </InfoPopover>
+                      ) : null}
+                    </h4>
+                    <div className="text-xs">
+                      {new Intl.DateTimeFormat("default", {
+                        dateStyle: "medium",
+                        timeStyle: "medium",
+                      }).format(courtPayout.nextPayoutDate)}
+                    </div>
+                  </div>
+                  <div className="h-2 w-full overflow-hidden rounded-full bg-black/10">
+                    <div
+                      className="h-full rounded-full bg-purple-500"
+                      style={{
+                        width: `${nextPayoutProgress}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              ) : null}
             </div>
           </div>
         </div>
@@ -216,12 +325,126 @@ const CourtPage: NextPage = ({
           </Tab.Panels>
         </Tab.Group>
       </section>
+
+      <Modal open={showPayoutsModal} onClose={() => setShowPayoutsModal(false)}>
+        <Dialog.Panel className="mt-8 w-full max-w-[590px] overflow-hidden rounded-ztg-10 bg-white">
+          <div className=" bg-[#DC056C] px-4 py-6 text-white">
+            <h2 className="mb-1 text-purple-950">Court Reward Payouts</h2>
+            <p className="text-sm text-gray-200/80">
+              All payouts made to{" "}
+              <b>{shortenAddress(wallet?.realAddress ?? "")}</b> as a result of
+              participating in court.{" "}
+            </p>
+          </div>
+          <div className="pb-4">
+            <div className="subtle-scroll-bar flex max-h-[640px] min-h-[200px] flex-col gap-1 overflow-y-scroll px-4 py-4">
+              {now && isPayoutEligible(courtPayout) ? (
+                <div className="mb-1 flex gap-2">
+                  <div className="flex items-center">
+                    <InfoPopover
+                      icon={<PiTimerBold className="text-orange-300" />}
+                      position={"bottom-end"}
+                      popoverCss="!w-96"
+                    >
+                      Next expected staking reward payout.
+                    </InfoPopover>
+                  </div>
+                  <div className="flex-1 italic text-gray-500">
+                    {Intl.DateTimeFormat("default", {
+                      dateStyle: "medium",
+                      timeStyle: "short",
+                    }).format(courtPayout.nextRewardDate)}
+                  </div>
+                  <div className="text-gray-300">
+                    -- <b>{constants?.tokenSymbol}</b>
+                  </div>
+                  <div className="w-6">
+                    <div className="scale-75 opacity-30">
+                      <SubScanIcon />
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+
+              {allRewards?.map((payout, index) => (
+                <div className="mb-1 flex gap-2">
+                  <div className="flex items-center">
+                    {payout.extrinsic?.name ===
+                    "Court.reassign_court_stakes" ? (
+                      <InfoPopover
+                        icon={
+                          new Decimal(payout.dBalance ?? 0).gt(0) ? (
+                            <HiCheckCircle className="text-green-400" />
+                          ) : (
+                            <MdMoneyOff className="text-red-500" />
+                          )
+                        }
+                        position={index > 1 ? "top-end" : "bottom-end"}
+                        popoverCss="!w-80"
+                      >
+                        {new Decimal(payout.dBalance ?? 0).gt(0)
+                          ? "Reassigned funds by winning a case."
+                          : "Reassigned funds by losing a case."}
+                      </InfoPopover>
+                    ) : (
+                      <div>
+                        <InfoPopover
+                          icon={
+                            <HiChevronDoubleUp className="text-[rgba(0,1,254,0.46)]" />
+                          }
+                          position={index > 1 ? "top-end" : "bottom-end"}
+                          popoverCss="!w-80"
+                          css="text-green-500"
+                        >
+                          Staking reward.
+                        </InfoPopover>
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex-1 italic text-gray-500">
+                    {Intl.DateTimeFormat("default", {
+                      dateStyle: "medium",
+                      timeStyle: "short",
+                    }).format(new Date(payout?.timestamp))}
+                  </div>
+                  <div className="">
+                    {formatNumberLocalized(
+                      new Decimal(payout?.dBalance ?? 0).div(ZTG).toNumber(),
+                    )}{" "}
+                    <b>{constants?.tokenSymbol}</b>
+                  </div>
+
+                  <div className="w-6">
+                    <a
+                      className="center text-sm"
+                      target="_blank"
+                      referrerPolicy="no-referrer"
+                      rel="noopener"
+                      href={
+                        payout.extrinsic?.name === "Court.reassign_court_stakes"
+                          ? `https://zeitgeist.subscan.io/extrinsic/${payout.extrinsic?.hash}`
+                          : `https://zeitgeist.subscan.io/block/${payout?.blockNumber}?tab=event`
+                      }
+                    >
+                      <div className="scale-75">
+                        <SubScanIcon />
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Dialog.Panel>
+      </Modal>
     </div>
   );
 };
 
 const Stats = () => {
+  const wallet = useWallet();
   const { data: courtCases } = useCourtCases();
+  const connectedParticipant = useConnectedCourtParticipant();
   const { data: constants } = useChainConstants();
   const { data: yearlyInflationAmount } = useCourtYearlyInflationAmount();
   const { data: participants } = useCourtParticipants();
@@ -236,156 +459,162 @@ const Stats = () => {
     .length;
 
   return (
-    <div className="flex flex-1 basis-1 flex-col gap-2">
-      <div className="flex flex-1 basis-1 items-center gap-3">
-        <div
-          className="w-3/5 rounded-md p-4"
-          style={{
-            background:
-              "linear-gradient(115.14deg, rgba(0, 1, 254, 0.46) 2.93%, #AD00FE 89.56%)",
-          }}
-        >
-          <label className="font text-sm text-purple-900">Cases</label>
-          <div className="text-md font-mono font-semibold">
-            {courtCases?.length} /{" "}
-            <span className="text-sm font-medium text-white">
-              {activeCaseCount} active
-            </span>
+    <>
+      <div className="flex flex-1 basis-1 flex-col gap-2">
+        <div className="flex flex-1 basis-1 items-center gap-3">
+          <div
+            className="w-3/5 rounded-md p-4"
+            style={{
+              background:
+                "linear-gradient(115.14deg, rgba(0, 1, 254, 0.46) 2.93%, #AD00FE 89.56%)",
+            }}
+          >
+            <label className="font text-sm text-purple-900">Cases</label>
+            <div className="text-md font-mono font-semibold">
+              {courtCases?.length} /{" "}
+              <span className="text-sm font-medium text-white">
+                {activeCaseCount} active
+              </span>
+            </div>
           </div>
-        </div>
 
-        <div
-          className="flex-1 rounded-md p-4"
-          style={{
-            background:
-              "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
-          }}
-        >
-          <label className="font text-sm text-gray-500">Jurors</label>
-          <div className="text-md font-mono font-semibold">{jurorCount}</div>
-        </div>
-        <div
-          className="flex-1 rounded-md p-4"
-          style={{
-            background:
-              "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
-          }}
-        >
-          <label className="font text-sm text-gray-500">Delegators</label>
-          <div className="text-md font-mono font-semibold">
-            {delegatorCount}
+          <div
+            className="flex-1 rounded-md p-4"
+            style={{
+              background:
+                "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
+            }}
+          >
+            <label className="font text-sm text-gray-500">Jurors</label>
+            <div className="text-md font-mono font-semibold">{jurorCount}</div>
           </div>
-        </div>
-      </div>
-
-      <div className="flex flex-1 basis-1 items-center gap-3">
-        <div
-          className="flex-1 rounded-md p-4"
-          style={{
-            background:
-              "linear-gradient(131.15deg, rgba(240, 206, 135, 0.4) 11.02%, rgba(254, 0, 152, 0.4) 93.27%)",
-          }}
-        >
-          <label className="font text-sm text-yellow-700">
-            Total Court Stake
-          </label>
-          <div className="text-md font-mono font-semibold">
-            {formatNumberLocalized(totalStake.all.toNumber() ?? 0)}{" "}
-            {constants?.tokenSymbol}
+          <div
+            className="flex-1 rounded-md p-4"
+            style={{
+              background:
+                "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
+            }}
+          >
+            <label className="font text-sm text-gray-500">Delegators</label>
+            <div className="text-md font-mono font-semibold">
+              {delegatorCount}
+            </div>
           </div>
         </div>
-      </div>
 
-      <div className="flex flex-1 basis-1 items-center gap-3">
-        <div
-          className="flex-1 rounded-md p-4"
-          style={{
-            background:
-              "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
-          }}
-        >
-          <label className="font text-sm text-gray-500">Juror Stake</label>
-          <div className="text-md font-mono font-semibold">
-            {formatNumberLocalized(totalStake.jurorTotal?.toNumber() ?? 0)}{" "}
-            {constants?.tokenSymbol}
-          </div>
-        </div>
-        <div
-          className="flex-1 rounded-md p-4"
-          style={{
-            background:
-              "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
-          }}
-        >
-          <label className="font text-sm text-gray-500">Delegator Stake</label>
-          <div className="text-md font-mono font-semibold">
-            {formatNumberLocalized(totalStake.delegatorTotal?.toNumber() ?? 0)}{" "}
-            {constants?.tokenSymbol}
+        <div className="flex flex-1 basis-1 items-center gap-3">
+          <div
+            className="flex-1 rounded-md p-4"
+            style={{
+              background:
+                "linear-gradient(131.15deg, rgba(240, 206, 135, 0.4) 11.02%, rgba(254, 0, 152, 0.4) 93.27%)",
+            }}
+          >
+            <label className="font text-sm text-yellow-700">
+              Total Court Stake
+            </label>
+            <div className="text-md font-mono font-semibold">
+              {formatNumberLocalized(totalStake.all.toNumber() ?? 0)}{" "}
+              {constants?.tokenSymbol}
+            </div>
           </div>
         </div>
-      </div>
 
-      <div className="flex flex-1 basis-1 items-center gap-3">
-        <div
-          className="w-1/4 rounded-md p-4"
-          style={{
-            background:
-              "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
-          }}
-        >
-          <label className="font text-sm text-gray-500">APY</label>
-          <div className="flex items-center gap-2">
+        <div className="flex flex-1 basis-1 items-center gap-3">
+          <div
+            className="flex-1 rounded-md p-4"
+            style={{
+              background:
+                "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
+            }}
+          >
+            <label className="font text-sm text-gray-500">Juror Stake</label>
             <div className="text-md font-mono font-semibold">
-              {formatNumberLocalized(
-                yearlyInflationAmount
-                  ?.div(totalStake.all)
-                  .mul(100)
-                  .toNumber() ?? 0,
-              )}
-              %
+              {formatNumberLocalized(totalStake.jurorTotal?.toNumber() ?? 0)}{" "}
+              {constants?.tokenSymbol}
             </div>
-            <InfoPopover
-              className="text-slate-500"
-              overlay={false}
-              position="top"
-            >
-              The current yearly percentage returns that jurors and delegators
-              will receive on their staked ZTG
-            </InfoPopover>
           </div>
-        </div>
-        <div>
-          <IoMdArrowRoundForward />
-        </div>
-        <div
-          className="flex-1 rounded-md p-4"
-          style={{
-            background:
-              "linear-gradient(131.15deg, rgba(50, 255, 157, 0.4) 11.02%, rgba(240, 206, 135, 0.048) 93.27%)",
-          }}
-        >
-          <label className="font text-sm text-gray-500">
-            Yearly Incentives
-          </label>
-
-          <div className="flex items-center gap-2">
+          <div
+            className="flex-1 rounded-md p-4"
+            style={{
+              background:
+                "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
+            }}
+          >
+            <label className="font text-sm text-gray-500">
+              Delegator Stake
+            </label>
             <div className="text-md font-mono font-semibold">
-              {formatNumberLocalized(yearlyInflationAmount?.toNumber() ?? 0)}{" "}
+              {formatNumberLocalized(
+                totalStake.delegatorTotal?.toNumber() ?? 0,
+              )}{" "}
               {constants?.tokenSymbol}
             </div>
-            <InfoPopover
-              className="text-slate-500"
-              overlay={false}
-              position="top-start"
-              popoverCss="ml-12"
-            >
-              The yearly amount of {constants?.tokenSymbol} that will be minted
-              to jurors and delegators as a result of inflation.
-            </InfoPopover>
+          </div>
+        </div>
+
+        <div className="flex flex-1 basis-1 items-center gap-3">
+          <div
+            className="w-1/4 rounded-md p-4"
+            style={{
+              background:
+                "linear-gradient(131.15deg, rgba(5, 5, 5, 0.11) 11.02%, rgba(5, 5, 5, 0.022) 93.27%)",
+            }}
+          >
+            <label className="font text-sm text-gray-500">APY</label>
+            <div className="flex items-center gap-2">
+              <div className="text-md font-mono font-semibold">
+                {formatNumberLocalized(
+                  yearlyInflationAmount
+                    ?.div(totalStake.all)
+                    .mul(100)
+                    .toNumber() ?? 0,
+                )}
+                %
+              </div>
+              <InfoPopover
+                className="text-slate-500"
+                overlay={false}
+                position="top"
+              >
+                The current yearly percentage returns that jurors and delegators
+                will receive on their staked ZTG
+              </InfoPopover>
+            </div>
+          </div>
+          <div>
+            <IoMdArrowRoundForward />
+          </div>
+          <div
+            className="flex-1 rounded-md p-4"
+            style={{
+              background:
+                "linear-gradient(131.15deg, rgba(50, 255, 157, 0.4) 11.02%, rgba(240, 206, 135, 0.048) 93.27%)",
+            }}
+          >
+            <label className="font text-sm text-gray-500">
+              Yearly<span className="hidden md:inline"> Incentives</span>
+            </label>
+
+            <div className="flex items-center gap-2">
+              <div className="text-md line-clamp-1 font-mono font-semibold">
+                {formatNumberLocalized(yearlyInflationAmount?.toNumber() ?? 0)}{" "}
+                {constants?.tokenSymbol}
+              </div>
+              <InfoPopover
+                className="text-slate-500"
+                overlay={false}
+                position="top-start"
+                popoverCss="ml-12"
+              >
+                The yearly amount of {constants?.tokenSymbol} that will be
+                minted to jurors and delegators as a result of inflation.
+              </InfoPopover>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/pages/portfolio/[address].tsx b/pages/portfolio/[address].tsx
index 0756b8ee3..0b2a6d8dd 100644
--- a/pages/portfolio/[address].tsx
+++ b/pages/portfolio/[address].tsx
@@ -4,6 +4,7 @@ import BadgesList from "components/avatar/BadgesList";
 import AccountPoolsTable from "components/portfolio/AccountPoolsTable";
 import BondsTable from "components/portfolio/BondsTable";
 import { PortfolioBreakdown } from "components/portfolio/Breakdown";
+import CourtTabGroup from "components/portfolio/CourtTabGroup";
 import CreatorFeePayouts from "components/portfolio/CreatorFeePayouts";
 import CurrenciesTable from "components/portfolio/CurrenciesTable";
 import EmptyPortfolio from "components/portfolio/EmptyPortfolio";
@@ -31,7 +32,8 @@ type MainTabItem =
   | "Balances"
   | "Markets"
   | "Badges"
-  | "History";
+  | "History"
+  | "Court";
 
 const mainTabItems: MainTabItem[] = [
   "Predictions",
@@ -39,6 +41,7 @@ const mainTabItems: MainTabItem[] = [
   "Markets",
   "Badges",
   "History",
+  "Court",
 ] as MainTabItem[];
 
 type MarketsTabItem = "Created Markets" | "Liquidity" | "Creator Fee Payouts";
@@ -109,6 +112,7 @@ const Portfolio: NextPageWithLayout = () => {
                 "Markets",
                 "Badges",
                 "History",
+                "Court",
               ].map((title, index) => (
                 <Tab className="text-sm sm:text-xl" key={index}>
                   {({ selected }) => (
@@ -215,6 +219,9 @@ const Portfolio: NextPageWithLayout = () => {
             <Tab.Panel>
               {address && <HistoryTabGroup address={address} />}
             </Tab.Panel>
+            <Tab.Panel>
+              {address && <CourtTabGroup address={address} />}
+            </Tab.Panel>
           </Tab.Panels>
         </Tab.Group>
       </div>