diff --git a/bot-pinner/README.md b/bot-pinner/README.md
index 76704e415..7f0edf6ec 100644
--- a/bot-pinner/README.md
+++ b/bot-pinner/README.md
@@ -17,6 +17,7 @@ $ docker-compose up -d
 2. Evidence container that awaits new events and then scrapes the latest hashes and submits it to IPFS.
 3. `src/peers.txt` contains a list of peers, by default it will add connects to Estuary & Kleros IPFS nodes. This should make it easier to find content by creating a data network around Kleros Court V2.
    1. Adding these peers will make it easier to find and replicate content.
+
 ## DappNode
 
 :warning: For the following steps, you need access to [a DappNode](https://dappnode.io) system with the IPFS service running.
diff --git a/contracts/scripts/simulations/tasks.ts b/contracts/scripts/simulations/tasks.ts
index e883b55b0..b41899664 100644
--- a/contracts/scripts/simulations/tasks.ts
+++ b/contracts/scripts/simulations/tasks.ts
@@ -268,7 +268,7 @@ task("simulate:cast-commit", "Casts a commit for a drawn juror")
     const tx = await disputeKitClassic.connect(wallet).castCommit(...castCommitFunctionArgs);
     await tx.wait();
 
-    console.log("juror %s casted a commit on txID: %s", wallet.address, tx?.hash);
+    console.log("juror %s cast a commit on txID: %s", wallet.address, tx?.hash);
   });
 
 task("simulate:cast-vote", "Casts a vote for a drawn juror")
@@ -295,7 +295,7 @@ task("simulate:cast-vote", "Casts a vote for a drawn juror")
     const tx = await disputeKitClassic.connect(wallet).castVote(...castVoteFunctionArgs);
     await tx.wait();
 
-    console.log("juror %s casted a vote on txID: %s", wallet.address, tx?.hash);
+    console.log("juror %s cast a vote on txID: %s", wallet.address, tx?.hash);
   });
 
 task("simulate:fund-appeal", "Funds an appeal on a dispute")
diff --git a/subgraph/schema.graphql b/subgraph/schema.graphql
index 135a9d4a0..5aecfcb11 100644
--- a/subgraph/schema.graphql
+++ b/subgraph/schema.graphql
@@ -96,8 +96,11 @@ type TokenAndETHShift @entity {
   id: ID! # user.id-dispute.id
   juror: User!
   dispute: Dispute!
-  tokenAmount: BigInt!
+  pnkAmount: BigInt!
   ethAmount: BigInt!
+  isNativeCurrency: Boolean!
+  feeTokenAmount: BigInt!
+  feeToken: FeeToken
 }
 
 type JurorTokensPerCourt @entity {
@@ -159,6 +162,7 @@ type Round @entity {
   penalties: BigInt!
   drawnJurors: [Draw!]! @derivedFrom(field: "round")
   dispute: Dispute!
+  feeToken: FeeToken
 }
 
 type Draw @entity {
@@ -191,6 +195,17 @@ type Counter @entity {
   casesRuled: BigInt!
 }
 
+type FeeToken @entity {
+  id: ID! # The address of the ERC20 token.
+  accepted: Boolean!
+  rateInEth: BigInt!
+  rateDecimals: Int!
+  totalPaid: BigInt!
+  totalPaidInETH: BigInt!
+  rounds: [Round!] @derivedFrom(field: "feeToken")
+  tokenAndETHShift: [TokenAndETHShift!] @derivedFrom(field: "feeToken")
+}
+
 #####################
 # ClassicDisputeKit #
 #####################
diff --git a/subgraph/src/DisputeKitClassic.ts b/subgraph/src/DisputeKitClassic.ts
index 82974fa0f..bdddb3e8b 100644
--- a/subgraph/src/DisputeKitClassic.ts
+++ b/subgraph/src/DisputeKitClassic.ts
@@ -47,13 +47,17 @@ export function handleEvidenceEvent(event: EvidenceEvent): void {
 }
 
 export function handleJustificationEvent(event: JustificationEvent): void {
-  const coreDisputeID = event.params._coreDisputeID.toString();
-  const coreDispute = Dispute.load(coreDisputeID);
+  const contract = DisputeKitClassic.bind(event.address);
+  const coreDisputeID = event.params._coreDisputeID;
+  const coreDispute = Dispute.load(coreDisputeID.toString());
   const classicDisputeID = `${DISPUTEKIT_ID}-${coreDisputeID}`;
   const classicDispute = ClassicDispute.load(classicDisputeID);
   if (!classicDispute || !coreDispute) return;
+  const choice = event.params._choice;
+  const coreRoundIndex = coreDispute.currentRoundIndex;
+  const roundInfo = contract.getRoundInfo(coreDisputeID, coreRoundIndex, choice);
   const currentLocalRoundID = classicDispute.id + "-" + classicDispute.currentLocalRoundIndex.toString();
-  const currentRulingInfo = updateCountsAndGetCurrentRuling(currentLocalRoundID, event.params._choice);
+  const currentRulingInfo = updateCountsAndGetCurrentRuling(currentLocalRoundID, choice, roundInfo.getChoiceCount());
   coreDispute.currentRuling = currentRulingInfo.ruling;
   coreDispute.tied = currentRulingInfo.tied;
   coreDispute.save();
diff --git a/subgraph/src/KlerosCore.ts b/subgraph/src/KlerosCore.ts
index 28be0340c..e2c30e895 100644
--- a/subgraph/src/KlerosCore.ts
+++ b/subgraph/src/KlerosCore.ts
@@ -12,21 +12,23 @@ import {
   TokenAndETHShift as TokenAndETHShiftEvent,
   Ruling,
   StakeDelayed,
+  AcceptedFeeToken,
 } from "../generated/KlerosCore/KlerosCore";
 import { ZERO, ONE } from "./utils";
 import { createCourtFromEvent, getFeeForJuror } from "./entities/Court";
 import { createDisputeKitFromEvent, filterSupportedDisputeKits } from "./entities/DisputeKit";
 import { createDisputeFromEvent } from "./entities/Dispute";
 import { createRoundFromRoundInfo } from "./entities/Round";
-import { updateCases, updatePaidETH, updateRedistributedPNK, updateCasesRuled, updateCasesVoting } from "./datapoint";
+import { updateCases, updateCasesRuled, updateCasesVoting } from "./datapoint";
 import { addUserActiveDispute, ensureUser } from "./entities/User";
 import { updateJurorDelayedStake, updateJurorStake } from "./entities/JurorTokensPerCourt";
 import { createDrawFromEvent } from "./entities/Draw";
 import { updateTokenAndEthShiftFromEvent } from "./entities/TokenAndEthShift";
 import { updateArbitrableCases } from "./entities/Arbitrable";
-import { Court, Dispute } from "../generated/schema";
+import { Court, Dispute, FeeToken } from "../generated/schema";
 import { BigInt } from "@graphprotocol/graph-ts";
 import { updatePenalty } from "./entities/Penalty";
+import { ensureFeeToken } from "./entities/FeeToken";
 
 function getPeriodName(index: i32): string {
   const periodArray = ["evidence", "commit", "vote", "appeal", "execution"];
@@ -156,22 +158,17 @@ export function handleStakeDelayed(event: StakeDelayed): void {
 }
 
 export function handleTokenAndETHShift(event: TokenAndETHShiftEvent): void {
+  updatePenalty(event);
   updateTokenAndEthShiftFromEvent(event);
   const jurorAddress = event.params._account.toHexString();
   const disputeID = event.params._disputeID.toString();
-  const pnkAmount = event.params._pnkAmount;
-  const feeAmount = event.params._feeAmount;
   const dispute = Dispute.load(disputeID);
   if (!dispute) return;
   const court = Court.load(dispute.court);
   if (!court) return;
   updateJurorStake(jurorAddress, court.id, KlerosCore.bind(event.address), event.block.timestamp);
-  court.paidETH = court.paidETH.plus(feeAmount);
-  if (pnkAmount.gt(ZERO)) {
-    court.paidPNK = court.paidPNK.plus(pnkAmount);
-    updateRedistributedPNK(pnkAmount, event.block.timestamp);
-  }
-  updatePaidETH(feeAmount, event.block.timestamp);
-  updatePenalty(event);
-  court.save();
+}
+
+export function handleAcceptedFeeToken(event: AcceptedFeeToken): void {
+  ensureFeeToken(event.params._token, event.address);
 }
diff --git a/subgraph/src/entities/ClassicRound.ts b/subgraph/src/entities/ClassicRound.ts
index d43564596..8b28aae7e 100644
--- a/subgraph/src/entities/ClassicRound.ts
+++ b/subgraph/src/entities/ClassicRound.ts
@@ -25,15 +25,15 @@ class CurrentRulingInfo {
   tied: boolean;
 }
 
-export function updateCountsAndGetCurrentRuling(id: string, choice: BigInt): CurrentRulingInfo {
+export function updateCountsAndGetCurrentRuling(id: string, choice: BigInt, choiceCount: BigInt): CurrentRulingInfo {
   const round = ClassicRound.load(id);
   if (!round) return { ruling: ZERO, tied: false };
   const choiceNum = choice.toI32();
-  const updatedCount = round.counts[choiceNum].plus(ONE);
+  const delta = choiceCount.minus(round.counts[choiceNum]);
   let newCounts: BigInt[] = [];
   for (let i = 0; i < round.counts.length; i++) {
     if (BigInt.fromI32(i).equals(choice)) {
-      newCounts.push(round.counts[i].plus(ONE));
+      newCounts.push(choiceCount);
     } else {
       newCounts.push(round.counts[i]);
     }
@@ -43,14 +43,14 @@ export function updateCountsAndGetCurrentRuling(id: string, choice: BigInt): Cur
   if (choice.equals(round.winningChoice)) {
     if (round.tied) round.tied = false;
   } else {
-    if (updatedCount.equals(currentWinningCount)) {
+    if (choiceCount.equals(currentWinningCount)) {
       if (!round.tied) round.tied = true;
-    } else if (updatedCount.gt(currentWinningCount)) {
+    } else if (choiceCount.gt(currentWinningCount)) {
       round.winningChoice = choice;
       round.tied = false;
     }
   }
-  round.totalVoted = round.totalVoted.plus(ONE);
+  round.totalVoted = round.totalVoted.plus(delta);
   round.save();
   return { ruling: round.winningChoice, tied: round.tied };
 }
diff --git a/subgraph/src/entities/FeeToken.ts b/subgraph/src/entities/FeeToken.ts
new file mode 100644
index 000000000..18cccd867
--- /dev/null
+++ b/subgraph/src/entities/FeeToken.ts
@@ -0,0 +1,53 @@
+import { BigInt, Address } from "@graphprotocol/graph-ts";
+import { FeeToken } from "../../generated/schema";
+import { KlerosCore } from "../../generated/KlerosCore/KlerosCore";
+import { ZERO } from "../utils";
+
+export function ensureFeeToken(tokenAddress: Address, klerosCoreAddress: Address): FeeToken {
+  const hexTokenAddress = tokenAddress.toHexString();
+  let feeToken = FeeToken.load(hexTokenAddress);
+  if (!feeToken) {
+    feeToken = new FeeToken(hexTokenAddress);
+    feeToken.totalPaid = ZERO;
+    feeToken.totalPaidInETH = ZERO;
+  }
+  const contract = KlerosCore.bind(klerosCoreAddress);
+  const currencyRate = contract.currencyRates(tokenAddress);
+  feeToken.accepted = currencyRate.value0;
+  feeToken.rateInEth = currencyRate.value1;
+  feeToken.rateDecimals = currencyRate.value2;
+  feeToken.save();
+  return feeToken;
+}
+
+export function updateFeeTokenRate(tokenAddress: Address, klerosCoreAddress: Address): void {
+  const feeToken = ensureFeeToken(tokenAddress, klerosCoreAddress);
+  const contract = KlerosCore.bind(klerosCoreAddress);
+  const currencyRate = contract.currencyRates(tokenAddress);
+  feeToken.accepted = currencyRate.value0;
+  feeToken.rateInEth = currencyRate.value1;
+  feeToken.rateDecimals = currencyRate.value2;
+  feeToken.save();
+}
+
+export function updateFeeTokenPaid(tokenAddress: Address, klerosCoreAddress: Address, amount: BigInt): void {
+  const feeToken = ensureFeeToken(tokenAddress, klerosCoreAddress);
+  const ethAmount = convertTokenAmountToEth(tokenAddress, amount, klerosCoreAddress);
+  feeToken.totalPaid = feeToken.totalPaid.plus(amount);
+  feeToken.totalPaidInETH = feeToken.totalPaidInETH.plus(ethAmount);
+  feeToken.save();
+}
+
+export function convertEthToTokenAmount(tokenAddress: Address, eth: BigInt, klerosCoreAddress: Address): BigInt {
+  const feeToken = ensureFeeToken(tokenAddress, klerosCoreAddress);
+  return eth.times(BigInt.fromI32(10 ** feeToken.rateDecimals)).div(feeToken.rateInEth);
+}
+
+export function convertTokenAmountToEth(
+  tokenAddress: Address,
+  tokenAmount: BigInt,
+  klerosCoreAddress: Address
+): BigInt {
+  const feeToken = ensureFeeToken(tokenAddress, klerosCoreAddress);
+  return tokenAmount.times(feeToken.rateInEth).div(BigInt.fromI32(10 ** feeToken.rateDecimals));
+}
diff --git a/subgraph/src/entities/Round.ts b/subgraph/src/entities/Round.ts
index bb369685e..320f5cf57 100644
--- a/subgraph/src/entities/Round.ts
+++ b/subgraph/src/entities/Round.ts
@@ -9,6 +9,7 @@ export function createRoundFromRoundInfo(
 ): void {
   const roundID = `${disputeID.toString()}-${roundIndex.toString()}`;
   const round = new Round(roundID);
+  const feeToken = roundInfo.getFeeToken();
   round.disputeKit = roundInfo.getDisputeKitID.toString();
   round.tokensAtStakePerJuror = roundInfo.getPnkAtStakePerJuror();
   round.totalFeesForJurors = roundInfo.getTotalFeesForJurors();
@@ -16,5 +17,7 @@ export function createRoundFromRoundInfo(
   round.repartitions = roundInfo.getRepartitions();
   round.penalties = roundInfo.getPnkPenalties();
   round.dispute = disputeID.toString();
+  round.feeToken =
+    feeToken.toHexString() === "0x0000000000000000000000000000000000000000" ? null : feeToken.toHexString();
   round.save();
 }
diff --git a/subgraph/src/entities/TokenAndEthShift.ts b/subgraph/src/entities/TokenAndEthShift.ts
index c0252d67c..5fca5dec4 100644
--- a/subgraph/src/entities/TokenAndEthShift.ts
+++ b/subgraph/src/entities/TokenAndEthShift.ts
@@ -1,36 +1,68 @@
+import { Address, BigInt } from "@graphprotocol/graph-ts";
 import { TokenAndETHShift as TokenAndETHShiftEvent } from "../../generated/KlerosCore/KlerosCore";
-import { TokenAndETHShift } from "../../generated/schema";
+import { Court, Dispute, TokenAndETHShift } from "../../generated/schema";
+import { updatePaidETH, updateRedistributedPNK } from "../datapoint";
 import { ZERO } from "../utils";
+import { convertTokenAmountToEth, updateFeeTokenPaid } from "./FeeToken";
 import { resolveUserDispute } from "./User";
 
 export function updateTokenAndEthShiftFromEvent(event: TokenAndETHShiftEvent): void {
-  const jurorAddress = event.params._account.toHexString();
-  const disputeID = event.params._disputeID.toString();
-  const shiftID = `${jurorAddress}-${disputeID}`;
-  const shift = TokenAndETHShift.load(shiftID);
-
-  if (!shift) {
-    createTokenAndEthShiftFromEvent(event);
-    resolveUserDispute(jurorAddress, ZERO, event.params._feeAmount, disputeID);
-    return;
+  const jurorAddress = event.params._account;
+  const disputeID = event.params._disputeID;
+  const dispute = Dispute.load(disputeID.toString());
+  if (!dispute) return;
+  const court = Court.load(dispute.court);
+  if (!court) return;
+  const roundIndex = event.params._roundID;
+  const feeTokenAddress = event.params._feeToken;
+  let shift = ensureTokenAndEthShift(jurorAddress, disputeID, roundIndex, feeTokenAddress);
+  const feeAmount = event.params._feeAmount;
+  const pnkAmount = event.params._pnkAmount;
+  let ethAmount: BigInt;
+  if (feeTokenAddress.toHexString() === "0x0000000000000000000000000000000000000000") {
+    updateFeeTokenPaid(feeTokenAddress, event.address, feeAmount);
+    ethAmount = convertTokenAmountToEth(feeTokenAddress, feeAmount, event.address);
+    shift.feeTokenAmount = shift.feeTokenAmount.plus(feeAmount);
+  } else {
+    ethAmount = feeAmount;
   }
-
-  shift.tokenAmount = shift.tokenAmount.plus(event.params._pnkAmount);
-  const previousFeeAmount = shift.ethAmount;
-  const newFeeAmount = shift.ethAmount.plus(event.params._feeAmount);
-  shift.ethAmount = newFeeAmount;
+  const previousEthAmount = shift.ethAmount;
+  const newEthAmount = previousEthAmount.plus(ethAmount);
+  shift.ethAmount = newEthAmount;
+  resolveUserDispute(jurorAddress.toHexString(), previousEthAmount, newEthAmount, disputeID.toString());
+  court.paidETH = court.paidETH.plus(ethAmount);
+  updatePaidETH(ethAmount, event.block.timestamp);
+  if (pnkAmount.gt(ZERO)) {
+    court.paidPNK = court.paidPNK.plus(pnkAmount);
+    updateRedistributedPNK(pnkAmount, event.block.timestamp);
+  }
+  shift.pnkAmount = shift.pnkAmount.plus(pnkAmount);
   shift.save();
-  resolveUserDispute(jurorAddress, previousFeeAmount, newFeeAmount, disputeID);
+  court.save();
 }
 
-export function createTokenAndEthShiftFromEvent(event: TokenAndETHShiftEvent): void {
-  const jurorAddress = event.params._account.toHexString();
-  const disputeID = event.params._disputeID.toString();
-  const shiftID = `${jurorAddress}-${disputeID}`;
-  const shift = new TokenAndETHShift(shiftID);
-  shift.juror = jurorAddress;
-  shift.dispute = disputeID;
-  shift.tokenAmount = event.params._pnkAmount;
-  shift.ethAmount = event.params._feeAmount;
-  shift.save();
+export function ensureTokenAndEthShift(
+  jurorAddress: Address,
+  disputeID: BigInt,
+  roundIndex: BigInt,
+  feeTokenAddress: Address
+): TokenAndETHShift {
+  const shiftID = `${jurorAddress.toHexString()}-${disputeID.toString()}-${roundIndex.toString()}`;
+  let shift = TokenAndETHShift.load(shiftID);
+  if (!shift) {
+    shift = new TokenAndETHShift(shiftID);
+    if (feeTokenAddress !== Address.fromI32(0)) {
+      shift.isNativeCurrency = false;
+      shift.feeToken = feeTokenAddress.toHexString();
+    } else {
+      shift.isNativeCurrency = true;
+    }
+    shift.feeTokenAmount = ZERO;
+    shift.ethAmount = ZERO;
+    shift.juror = jurorAddress.toHexString();
+    shift.dispute = disputeID.toString();
+    shift.pnkAmount = ZERO;
+    shift.save();
+  }
+  return shift;
 }
diff --git a/subgraph/subgraph.yaml b/subgraph/subgraph.yaml
index d69b93290..3aa625bfe 100644
--- a/subgraph/subgraph.yaml
+++ b/subgraph/subgraph.yaml
@@ -54,6 +54,8 @@ dataSources:
           handler: handleTokenAndETHShift
         - event: Ruling(indexed address,indexed uint256,uint256)
           handler: handleRuling
+        - event: AcceptedFeeToken(indexed address,indexed bool)
+          handler: handleAcceptedFeeToken
       file: ./src/KlerosCore.ts
   - kind: ethereum
     name: PolicyRegistry
diff --git a/web/.parcelrc b/web/.parcelrc
index b812a5214..8b6b0a40c 100644
--- a/web/.parcelrc
+++ b/web/.parcelrc
@@ -1,6 +1,8 @@
 {
   "extends": "@parcel/config-default",
   "transformers": {
-    "*.svg": ["...", "@parcel/transformer-svg-react"]
+    "*.svg": ["...", "@parcel/transformer-svg-react"],
+    "tsx:*.svg": ["@parcel/transformer-svg-react"],
+    "tsx:*": ["..."]
   }
 }
diff --git a/web/package.json b/web/package.json
index 428cda609..7c30df9f3 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,8 +23,7 @@
   },
   "packageManager": "yarn@3.3.1",
   "scripts": {
-    "clear": "rm -r .parcel-cache",
-    "clean": "rm dist/bundle.js",
+    "clear": "rm -fr ../.parcel-cache dist/bundle.js",
     "start": "parcel",
     "start-local": "REACT_APP_SUBGRAPH_ENDPOINT=http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local parcel",
     "build": "yarn generate && yarn parcel build",
diff --git a/web/src/assets/svgs/icons/appeal.png b/web/src/assets/svgs/icons/appeal.png
new file mode 100644
index 000000000..d0faae682
Binary files /dev/null and b/web/src/assets/svgs/icons/appeal.png differ
diff --git a/web/src/assets/svgs/icons/appeal.svg b/web/src/assets/svgs/icons/appeal.svg
new file mode 100644
index 000000000..a5afa1e66
--- /dev/null
+++ b/web/src/assets/svgs/icons/appeal.svg
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M326.109 87.5L174.554 0L23 87.5V262.5L174.554 350L326.109 262.5V87.5ZM307.641 97.973L174.435 21.0664L41.2285 97.973V251.786L174.435 328.693L307.641 251.786V97.973Z" fill="#F0F9FF"/>
+<path d="M174.435 21.0664L307.641 97.973V251.786L174.435 328.693L41.2285 251.786V97.973L174.435 21.0664Z" fill="#7E1BD4"/>
+<path d="M290.662 261.589L174.435 328.693L58.4463 261.727V214.021H290.662V261.589Z" fill="#973AE8"/>
+<path d="M139.093 254.796H129.821L127.409 260.056H123.888L134.604 237.037L144.943 260.056H141.366L139.093 254.796ZM137.761 251.724L134.548 244.359L131.182 251.724H137.761ZM150.918 251.261V260.056H147.65V238.398H151.353C153.167 238.398 154.537 238.524 155.463 238.776C156.398 239.029 157.221 239.506 157.932 240.207C159.176 241.423 159.797 242.957 159.797 244.808C159.797 246.791 159.133 248.362 157.806 249.521C156.478 250.681 154.687 251.261 152.433 251.261H150.918ZM150.918 248.231H152.139C155.14 248.231 156.641 247.076 156.641 244.766C156.641 242.531 155.094 241.414 151.998 241.414H150.918V248.231ZM166.432 251.261V260.056H163.164V238.398H166.867C168.681 238.398 170.051 238.524 170.977 238.776C171.912 239.029 172.735 239.506 173.446 240.207C174.69 241.423 175.312 242.957 175.312 244.808C175.312 246.791 174.648 248.362 173.32 249.521C171.992 250.681 170.201 251.261 167.947 251.261H166.432ZM166.432 248.231H167.653C170.655 248.231 172.155 247.076 172.155 244.766C172.155 242.531 170.608 241.414 167.512 241.414H166.432V248.231ZM190.629 241.47H181.946V246.674H190.377V249.746H181.946V256.984H190.629V260.056H178.678V238.398H190.629V241.47ZM207.644 254.796H198.372L195.96 260.056H192.439L203.156 237.037L213.494 260.056H209.917L207.644 254.796ZM206.312 251.724L203.099 244.359L199.733 251.724H206.312ZM219.469 238.398V256.984H225.838V260.056H216.201V238.398H219.469Z" fill="white"/>
+<path d="M117.316 90.3982C113.386 90.3982 110.328 91.2378 108.145 92.917C106.034 94.5232 104.978 97.2611 104.978 101.131C104.978 102.883 105.342 104.379 106.07 105.621C106.798 106.862 107.708 107.92 108.8 108.796C109.965 109.673 111.275 110.403 112.731 110.987C114.259 111.498 115.788 111.936 117.316 112.301V90.3982ZM103.341 136.832C103.268 141.65 104.323 145.447 106.507 148.221C108.691 150.996 112.294 152.456 117.316 152.602V126.1C114.332 125.296 111.348 124.347 108.363 123.252C105.452 122.084 102.795 120.624 100.393 118.872C98.0635 117.046 96.171 114.783 94.7152 112.082C93.2594 109.381 92.5315 106.022 92.5315 102.007C92.5315 98.5022 93.1866 95.4358 94.4968 92.8075C95.8798 90.1062 97.6996 87.8794 99.956 86.1272C102.285 84.302 104.942 82.9148 107.926 81.9657C110.911 81.0166 114.041 80.542 117.316 80.542V72H122.011V80.542C125.287 80.542 128.38 80.9801 131.292 81.8562C134.203 82.7323 136.715 84.0465 138.825 85.7987C141.009 87.5509 142.72 89.7776 143.957 92.479C145.267 95.1803 145.922 98.3197 145.922 101.897H133.475C133.33 98.1737 132.347 95.3263 130.527 93.3551C128.781 91.3838 125.942 90.3982 122.011 90.3982V113.506C125.287 114.382 128.489 115.404 131.619 116.572C134.749 117.74 137.515 119.237 139.917 121.062C142.319 122.887 144.248 125.15 145.704 127.852C147.16 130.553 147.888 133.875 147.888 137.817C147.888 141.906 147.196 145.483 145.813 148.55C144.503 151.543 142.683 154.062 140.354 156.106C138.025 158.077 135.295 159.574 132.165 160.596C129.035 161.691 125.651 162.312 122.011 162.458V171H117.316V162.458C113.386 162.385 109.783 161.764 106.507 160.596C103.232 159.428 100.429 157.785 98.0999 155.668C95.7706 153.478 93.9509 150.813 92.6407 147.674C91.4033 144.534 90.821 140.92 90.8938 136.832H103.341ZM122.011 152.602C125.942 152.31 129.144 151.178 131.619 149.207C134.167 147.163 135.441 143.95 135.441 139.57C135.441 137.525 135.04 135.81 134.24 134.423C133.512 133.035 132.493 131.867 131.183 130.918C129.945 129.969 128.526 129.202 126.924 128.618C125.323 128.034 123.685 127.523 122.011 127.085V152.602Z" fill="#4D00B4"/>
+<path d="M228.316 133.398C224.386 133.398 221.328 134.238 219.145 135.917C217.034 137.523 215.978 140.261 215.978 144.131C215.978 145.883 216.342 147.379 217.07 148.621C217.798 149.862 218.708 150.92 219.8 151.796C220.965 152.673 222.275 153.403 223.731 153.987C225.259 154.498 226.788 154.936 228.316 155.301V133.398ZM214.341 179.832C214.268 184.65 215.323 188.447 217.507 191.221C219.691 193.996 223.294 195.456 228.316 195.602V169.1C225.332 168.296 222.348 167.347 219.363 166.252C216.452 165.084 213.795 163.624 211.393 161.872C209.063 160.046 207.171 157.783 205.715 155.082C204.259 152.381 203.532 149.022 203.532 145.007C203.532 141.502 204.187 138.436 205.497 135.808C206.88 133.106 208.7 130.879 210.956 129.127C213.285 127.302 215.942 125.915 218.926 124.966C221.911 124.017 225.041 123.542 228.316 123.542V115H233.011V123.542C236.287 123.542 239.38 123.98 242.292 124.856C245.203 125.732 247.715 127.046 249.825 128.799C252.009 130.551 253.72 132.778 254.957 135.479C256.267 138.18 256.922 141.32 256.922 144.897H244.475C244.33 141.174 243.347 138.326 241.527 136.355C239.781 134.384 236.942 133.398 233.011 133.398V156.506C236.287 157.382 239.489 158.404 242.619 159.572C245.749 160.74 248.515 162.237 250.917 164.062C253.319 165.887 255.248 168.15 256.704 170.852C258.16 173.553 258.888 176.875 258.888 180.817C258.888 184.906 258.196 188.483 256.813 191.55C255.503 194.543 253.683 197.062 251.354 199.106C249.025 201.077 246.295 202.574 243.165 203.596C240.035 204.691 236.651 205.312 233.011 205.458V214H228.316V205.458C224.386 205.385 220.783 204.764 217.507 203.596C214.232 202.428 211.429 200.785 209.1 198.668C206.771 196.478 204.951 193.813 203.641 190.674C202.403 187.534 201.821 183.92 201.894 179.832H214.341ZM233.011 195.602C236.942 195.31 240.144 194.178 242.619 192.207C245.167 190.163 246.441 186.95 246.441 182.57C246.441 180.525 246.04 178.81 245.24 177.423C244.512 176.035 243.493 174.867 242.183 173.918C240.945 172.969 239.526 172.202 237.924 171.618C236.323 171.034 234.685 170.523 233.011 170.085V195.602Z" fill="#4D00B4"/>
+<path d="M121.888 172.91V181.75C121.888 189.058 139.524 195 161.263 195C183.001 195 200.638 189.058 200.638 181.75V172.91C192.168 178.934 176.685 181.75 161.263 181.75C145.841 181.75 130.357 178.934 121.888 172.91ZM187.513 115.5C209.251 115.5 226.888 109.558 226.888 102.25C226.888 94.9418 209.251 89 187.513 89C165.774 89 148.138 94.9418 148.138 102.25C148.138 109.558 165.774 115.5 187.513 115.5ZM121.888 151.192V161.875C121.888 169.183 139.524 175.125 161.263 175.125C183.001 175.125 200.638 169.183 200.638 161.875V151.192C192.168 158.231 176.664 161.875 161.263 161.875C145.861 161.875 130.357 158.231 121.888 151.192ZM207.2 153.47C218.951 151.171 226.888 146.907 226.888 142V133.16C222.13 136.555 215.137 138.874 207.2 140.302V153.47ZM161.263 122.125C139.524 122.125 121.888 129.537 121.888 138.688C121.888 147.838 139.524 155.25 161.263 155.25C183.001 155.25 200.638 147.838 200.638 138.688C200.638 129.537 183.001 122.125 161.263 122.125ZM206.236 133.781C218.541 131.545 226.888 127.156 226.888 122.125V113.285C219.607 118.481 207.098 121.276 193.932 121.939C199.981 124.899 204.432 128.874 206.236 133.781Z" fill="white"/>
+</svg>
diff --git a/web/src/assets/svgs/icons/balance.svg b/web/src/assets/svgs/icons/balance.svg
new file mode 100644
index 000000000..25c5a37f9
--- /dev/null
+++ b/web/src/assets/svgs/icons/balance.svg
@@ -0,0 +1,11 @@
+<svg  viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M326.109 87.5L174.554 0L23 87.5V262.5L174.554 350L326.109 262.5V87.5ZM307.641 97.973L174.435 21.0664L41.2285 97.973V251.786L174.435 328.693L307.641 251.786V97.973Z" fill="#F0F9FF"/>
+<path d="M174.435 21.0664L307.641 97.973V251.786L174.435 328.693L41.2285 251.786V97.973L174.435 21.0664Z" fill="#7E1BD4"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M174.554 62.3547L77.002 118.677V231.321L174.554 287.643L272.107 231.321V118.677L174.554 62.3547ZM275.107 116.945L174.554 58.8906L74.002 116.945V233.053L174.554 291.107L275.107 233.053V116.945Z" fill="#B45FFF"/>
+<path d="M238.247 57.4617V231.26L174.835 195.35L110.888 231.26V58.0695L175.094 21L238.247 57.4617Z" fill="#4D00B4"/>
+<path d="M230.985 53.268V227.14L229.039 226.038V52.1445L230.985 53.268Z" fill="#9013FE"/>
+<path d="M120.309 52.6292V225.968L118.363 227.061V53.7527L120.309 52.6292Z" fill="#9013FE"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M149.657 66.9959L146.28 69.7649L147.869 65.6974L144.192 63.3412L148.552 63.5963L149.657 59.3711L150.761 63.5963L155.121 63.3412L151.444 65.6974L153.034 69.7649L149.657 66.9959ZM162.584 66.9959L159.207 69.7649L160.797 65.6974L157.12 63.3412L161.479 63.5963L162.584 59.3711L163.689 63.5963L168.048 63.3412L164.371 65.6974L165.961 69.7649L162.584 66.9959ZM172.135 69.7649L175.512 66.9959L178.889 69.7649L177.299 65.6974L180.976 63.3412L176.616 63.5963L175.512 59.3711L174.407 63.5963L170.047 63.3412L173.724 65.6974L172.135 69.7649ZM188.439 66.9959L185.062 69.7649L186.652 65.6974L182.975 63.3412L187.335 63.5963L188.439 59.3711L189.544 63.5963L193.904 63.3412L190.227 65.6974L191.817 69.7649L188.439 66.9959ZM197.99 69.7649L201.367 66.9959L204.744 69.7649L203.154 65.6974L206.831 63.3412L202.471 63.5963L201.367 59.3711L200.262 63.5963L195.902 63.3412L199.579 65.6974L197.99 69.7649Z" fill="#FCFEFF"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M180.315 104.18C180.315 106.747 179.736 108.223 178.799 109.059L204.699 116.787C205.408 116.175 206.331 115.803 207.344 115.803C209.579 115.803 211.391 117.608 211.391 119.835C211.391 121.454 210.432 122.846 209.05 123.488L218.114 149.563C220.988 150.02 222.888 150.694 222.888 151.586C222.888 155.244 215.724 158.21 206.888 158.21C198.051 158.21 190.888 155.244 190.888 151.586C190.888 150.638 193.034 149.936 196.214 149.48L205.308 123.316C204.473 122.831 203.83 122.058 203.514 121.132C203.208 119.863 202.498 119.062 201.382 118.729C200.048 118.331 198.741 118.286 197.282 118.235C195.439 118.172 193.352 118.1 190.661 117.297L177.502 113.371V140.19C178.527 140.922 179.197 142.115 179.197 143.467C179.197 144.363 178.9 145.189 178.403 145.859C179.74 146.85 180.609 148.431 180.609 150.219C180.609 152.382 179.338 154.245 177.502 155.121V160.721C183.478 161.032 188.03 162.643 188.03 164.584C188.03 164.616 188.029 164.649 188.026 164.682C197.672 165.513 204.331 167.284 204.331 169.334L204.378 172.194C204.378 175.043 191.547 177.329 175.69 177.329C159.833 177.329 147.002 174.996 147.002 172.147L146.908 169.334C146.908 167.317 153.356 165.57 162.752 164.723C162.747 164.676 162.745 164.63 162.745 164.584C162.745 162.675 167.151 161.085 172.984 160.737V155.212C171.046 154.376 169.689 152.456 169.689 150.219C169.689 148.432 170.559 146.85 171.895 145.859C171.399 145.189 171.101 144.364 171.101 143.467C171.101 142.034 171.854 140.779 172.984 140.064V112.022L157.977 107.544C156.978 107.246 155.517 106.455 153.955 105.609L153.955 105.609C152.163 104.639 150.239 103.598 148.732 103.148C147.688 102.836 146.616 103.062 145.516 103.826C145.304 103.998 145.074 104.148 144.83 104.276L153.874 130.295C156.882 130.753 158.888 131.439 158.888 132.355C158.888 136.014 151.724 138.98 142.888 138.98C134.051 138.98 126.888 136.014 126.888 132.355C126.888 131.467 128.775 130.794 131.634 130.337L140.758 104.088C139.645 103.369 138.907 102.123 138.907 100.704C138.907 98.4766 140.719 96.6712 142.955 96.6712C144.776 96.6712 146.315 97.8695 146.824 99.5175L170.083 106.458C169.955 105.815 169.887 105.062 169.887 104.18C169.887 100.745 171.625 96.6846 175.101 92C178.577 96.6846 180.315 100.745 180.315 104.18ZM208.25 123.762L217.17 149.425C211.541 148.671 202.966 148.648 197.154 149.355L206.084 123.665C206.481 123.795 206.904 123.867 207.344 123.867C207.656 123.867 207.958 123.828 208.25 123.762ZM132.578 130.198L141.521 104.471C141.967 104.64 142.449 104.736 142.955 104.736C143.331 104.736 143.694 104.681 144.04 104.585L152.931 130.163C147.109 129.416 138.308 129.427 132.578 130.198Z" fill="white"/>
+<path d="M167.799 222.45L184.771 223.207L191.643 238.447L181.948 252.375L164.884 251.284L157.888 234.772L167.799 222.45ZM180.242 231.235L167.941 236.599L178.458 244.715L180.242 231.235ZM178.818 228.547L168.988 224.322L166.923 233.205L178.818 228.547ZM176.326 246.757L165.643 239.142L165.901 249.461L176.326 246.757ZM189.936 238.413L182.656 231.039L180.735 245.219L189.936 238.413ZM178.831 248.416L169.821 250.766L180.417 251.443L178.831 248.416ZM188.514 241.759L180.627 247.624L182.194 250.681L188.514 241.759ZM184.783 225.337L183.251 228.476L188.953 234.261L184.783 225.337ZM182.874 223.835L172.862 223.429L181.121 227.035L182.874 223.835ZM166.337 225.286L159.323 234.126L164.012 235.117L166.337 225.286ZM163.73 236.851L159.018 235.855L163.934 247.416L163.73 236.851Z" fill="white"/>
+</svg>
diff --git a/web/src/assets/svgs/icons/info-circle.svg b/web/src/assets/svgs/icons/info-circle.svg
new file mode 100644
index 000000000..bcb80ff1e
--- /dev/null
+++ b/web/src/assets/svgs/icons/info-circle.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_16527_27048)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 3.58214 3.58214 0 8 0C12.4179 0 16 3.58214 16 8C16 12.4179 12.4179 16 8 16C3.58214 16 0 12.4179 0 8ZM1.35714 8C1.35714 11.6679 4.33214 14.6429 8 14.6429C11.6679 14.6429 14.6429 11.6679 14.6429 8C14.6429 4.33214 11.6679 1.35714 8 1.35714C4.33214 1.35714 1.35714 4.33214 1.35714 8ZM7.39363 5.46323C7.23288 5.30249 7.14258 5.08447 7.14258 4.85714C7.14258 4.62981 7.23288 4.4118 7.39363 4.25105C7.55437 4.09031 7.77239 4 7.99972 4C8.22705 4 8.44507 4.09031 8.60581 4.25105C8.76656 4.4118 8.85686 4.62981 8.85686 4.85714C8.85686 5.08447 8.76656 5.30249 8.60581 5.46323C8.44507 5.62398 8.22705 5.71429 7.99972 5.71429C7.77239 5.71429 7.55437 5.62398 7.39363 5.46323ZM7.57115 6.85714H8.42829C8.50686 6.85714 8.57115 6.92143 8.57115 7V11.8571C8.57115 11.9357 8.50686 12 8.42829 12H7.57115C7.49258 12 7.42829 11.9357 7.42829 11.8571V7C7.42829 6.92143 7.49258 6.85714 7.57115 6.85714Z" fill="#6CC5FF"/>
+</g>
+<defs>
+<clipPath id="clip0_16527_27048">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/src/assets/svgs/icons/kleros.svg b/web/src/assets/svgs/icons/kleros.svg
index 532aaf497..e0dc1a0fd 100644
--- a/web/src/assets/svgs/icons/kleros.svg
+++ b/web/src/assets/svgs/icons/kleros.svg
@@ -1,3 +1,3 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0937 3L38.2287 4.079L48 25.7943L34.2145 45.6406L9.94832 44.0863L0 20.5579L14.0937 3ZM31.7879 15.5172L14.2964 23.161L29.2505 34.7256L31.7879 15.5172ZM29.7628 11.687L15.7842 5.66695L12.8478 18.3244L29.7628 11.687ZM26.2197 37.6354L11.0277 26.7851L11.3952 41.4879L26.2197 37.6354ZM45.5734 25.7464L35.2209 15.2391L32.4884 35.4442L45.5734 25.7464ZM29.7816 39.9987L16.9691 43.3482L32.0365 44.3132L29.7816 39.9987ZM43.5503 30.5136L32.3348 38.8702L34.5634 43.2263L43.5503 30.5136ZM38.2453 7.11304L36.067 11.5859L44.1752 19.8297L38.2453 7.11304ZM35.5312 4.97263L21.293 4.39456L33.0378 9.53279L35.5312 4.97263ZM12.0145 7.04105L2.04155 19.6368L8.70928 21.0494L12.0145 7.04105ZM8.30723 23.5202L1.60736 22.1014L8.59816 38.5742L8.30723 23.5202Z" fill="#9013FE"/>
 </svg>
diff --git a/web/src/assets/svgs/icons/voted.svg b/web/src/assets/svgs/icons/voted.svg
new file mode 100644
index 000000000..d43f24ad6
--- /dev/null
+++ b/web/src/assets/svgs/icons/voted.svg
@@ -0,0 +1,13 @@
+<svg  viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M326.109 87.5L174.554 0L23 87.5V262.5L174.554 350L326.109 262.5V87.5ZM307.641 97.973L174.435 21.0664L41.2285 97.973V251.786L174.435 328.693L307.641 251.786V97.973Z" fill="#F0F9FF"/>
+<path d="M174.435 21.0664L307.641 97.973V251.786L174.435 328.693L41.2285 251.786V97.973L174.435 21.0664Z" fill="#7E1BD4"/>
+<path d="M290.662 261.589L174.435 328.693L58.4463 261.727V214.021H290.662V261.589Z" fill="#973AE8"/>
+<path d="M89.2074 82.832H260.379C262.296 82.832 263.849 84.3856 263.849 86.3021V86.3045C263.849 88.221 262.296 89.7746 260.379 89.7746H89.2074C87.2909 89.7746 85.7373 88.221 85.7373 86.3045V86.3021C85.7373 84.3856 87.2909 82.832 89.2074 82.832Z" fill="#4D00B4"/>
+<path d="M89.2074 105.335H260.379C262.296 105.335 263.849 106.889 263.849 108.806V108.808C263.849 110.724 262.296 112.278 260.379 112.278H89.2074C87.2909 112.278 85.7373 110.724 85.7373 108.808V108.806C85.7373 106.889 87.2909 105.335 89.2074 105.335Z" fill="#4D00B4"/>
+<path d="M260.379 127.839H89.2074C87.2909 127.839 85.7373 129.392 85.7373 131.309V131.311C85.7373 133.228 87.2909 134.781 89.2074 134.781H260.379C262.296 134.781 263.849 133.228 263.849 131.311V131.309C263.849 129.392 262.296 127.839 260.379 127.839Z" fill="#4D00B4"/>
+<path d="M89.2074 150.342H260.379C262.296 150.342 263.849 151.896 263.849 153.812V153.815C263.849 155.731 262.296 157.285 260.379 157.285H89.2074C87.2909 157.285 85.7373 155.731 85.7373 153.815V153.812C85.7373 151.896 87.2909 150.342 89.2074 150.342Z" fill="#4D00B4"/>
+<path d="M260.379 172.846H89.2074C87.2909 172.846 85.7373 174.399 85.7373 176.316V176.318C85.7373 178.235 87.2909 179.788 89.2074 179.788H260.379C262.296 179.788 263.849 178.235 263.849 176.318V176.316C263.849 174.399 262.296 172.846 260.379 172.846Z" fill="#4D00B4"/>
+<path d="M89.2074 195.349H260.379C262.296 195.349 263.849 196.903 263.849 198.819V198.822C263.849 200.738 262.296 202.292 260.379 202.292H89.2074C87.2909 202.292 85.7373 200.738 85.7373 198.822V198.819C85.7373 196.903 87.2909 195.349 89.2074 195.349Z" fill="#4D00B4"/>
+<path d="M131.092 236.614L137.08 251.618L143.152 236.614H146.727L137.01 259.891L127.517 236.614H131.092ZM147.386 247.341C147.386 244.293 148.504 241.676 150.738 239.488C152.963 237.301 155.636 236.207 158.759 236.207C161.844 236.207 164.489 237.31 166.695 239.516C168.911 241.723 170.019 244.373 170.019 247.467C170.019 250.58 168.906 253.221 166.681 255.39C164.447 257.568 161.75 258.657 158.59 258.657C155.795 258.657 153.285 257.689 151.06 255.754C148.611 253.614 147.386 250.809 147.386 247.341ZM150.682 247.383C150.682 249.776 151.486 251.744 153.094 253.286C154.692 254.829 156.538 255.6 158.632 255.6C160.904 255.6 162.82 254.815 164.382 253.244C165.943 251.655 166.723 249.72 166.723 247.439C166.723 245.13 165.952 243.195 164.41 241.634C162.876 240.063 160.979 239.278 158.717 239.278C156.464 239.278 154.561 240.063 153.009 241.634C151.458 243.186 150.682 245.102 150.682 247.383ZM179.33 239.685V258.264H176.062V239.685H171.084V236.614H184.293V239.685H179.33ZM199.157 239.685H190.477V244.887H198.905V247.958H190.477V255.193H199.157V258.264H187.21V236.614H199.157V239.685ZM203.448 258.264V236.614H207.991C210.17 236.614 211.89 236.829 213.152 237.259C214.507 237.679 215.736 238.395 216.84 239.404C219.074 241.442 220.191 244.12 220.191 247.439C220.191 250.767 219.027 253.459 216.699 255.516C215.531 256.544 214.306 257.259 213.025 257.661C211.829 258.063 210.132 258.264 207.935 258.264H203.448ZM206.715 255.193H208.188C209.655 255.193 210.875 255.039 211.848 254.731C212.82 254.403 213.698 253.885 214.484 253.174C216.092 251.706 216.896 249.795 216.896 247.439C216.896 245.065 216.101 243.139 214.512 241.662C213.081 240.344 210.973 239.685 208.188 239.685H206.715V255.193Z" fill="white"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M184.273 95.4367C184.273 99.8744 183.272 102.427 181.652 103.872L226.436 117.236C227.662 116.178 229.259 115.534 231.009 115.534C234.875 115.534 238.009 118.656 238.009 122.507C238.009 125.306 236.349 127.713 233.96 128.823L249.633 173.911C254.603 174.701 257.888 175.867 257.888 177.409C257.888 183.735 245.501 188.863 230.221 188.863C214.941 188.863 202.555 183.735 202.555 177.409C202.555 175.77 206.265 174.556 211.764 173.767L227.49 128.526C226.046 127.687 224.933 126.35 224.387 124.749C223.859 122.555 222.63 121.169 220.7 120.594C218.394 119.905 216.134 119.827 213.612 119.74C210.424 119.631 206.816 119.506 202.162 118.118L179.409 111.328V157.704C181.181 158.969 182.339 161.032 182.339 163.37C182.339 164.92 181.825 166.348 180.966 167.505C183.277 169.22 184.781 171.954 184.781 175.045C184.781 178.786 182.583 182.007 179.409 183.522V193.204C189.742 193.744 197.613 196.529 197.613 199.884C197.613 199.941 197.611 199.998 197.607 200.054C214.285 201.492 225.8 204.553 225.8 208.099L225.882 213.045C225.882 217.97 203.694 221.922 176.275 221.922C148.856 221.922 126.669 217.889 126.669 212.963L126.506 208.099C126.506 204.61 137.657 201.59 153.904 200.124C153.895 200.045 153.89 199.965 153.89 199.884C153.89 196.583 161.509 193.834 171.595 193.232V183.678C168.245 182.234 165.899 178.914 165.899 175.046C165.899 171.955 167.402 169.22 169.713 167.506C168.854 166.348 168.34 164.921 168.34 163.37C168.34 160.893 169.641 158.722 171.595 157.486V108.997L145.646 101.253C143.92 100.738 141.392 99.3696 138.691 97.9074C135.593 96.2301 132.267 94.4294 129.66 93.6517C127.854 93.1128 126.001 93.5034 124.099 94.8235C123.733 95.1217 123.335 95.381 122.913 95.6014L138.552 140.594C143.752 141.385 147.221 142.572 147.221 144.156C147.221 150.482 134.834 155.61 119.554 155.61C104.274 155.61 91.8877 150.482 91.8877 144.156C91.8877 142.619 95.1518 141.456 100.095 140.666L115.872 95.2764C113.947 94.034 112.671 91.8798 112.671 89.4251C112.671 85.5741 115.805 82.4524 119.67 82.4524C122.819 82.4524 125.481 84.5243 126.361 87.3741L166.579 99.3752C166.359 98.2638 166.24 96.9615 166.24 95.4367C166.24 89.4959 169.246 82.4754 175.257 74.375C181.268 82.4754 184.273 89.4959 184.273 95.4367ZM232.576 129.297L248.001 173.673C238.268 172.369 223.439 172.329 213.39 173.552L228.831 129.129C229.517 129.353 230.249 129.478 231.01 129.478C231.549 129.478 232.072 129.412 232.576 129.297ZM101.728 140.426L117.191 95.9395C117.963 96.2309 118.796 96.3978 119.67 96.3978C120.321 96.3978 120.949 96.3024 121.546 96.137L136.921 140.366C126.853 139.073 111.635 139.093 101.728 140.426Z" fill="white"/>
+</svg>
diff --git a/web/src/components/DisputeCard/index.tsx b/web/src/components/DisputeCard/index.tsx
index c6ba8f6cb..5470894c3 100644
--- a/web/src/components/DisputeCard/index.tsx
+++ b/web/src/components/DisputeCard/index.tsx
@@ -34,7 +34,11 @@ const Container = styled.div`
   }
 `;
 
-const getPeriodEndTimestamp = (lastPeriodChange: string, currentPeriodIndex: number, timesPerPeriod: string[]) => {
+export const getPeriodEndTimestamp = (
+  lastPeriodChange: string,
+  currentPeriodIndex: number,
+  timesPerPeriod: string[]
+) => {
   const durationCurrentPeriod = parseInt(timesPerPeriod[currentPeriodIndex]);
   return parseInt(lastPeriodChange) + durationCurrentPeriod;
 };
diff --git a/web/src/components/GradientTokenIcons.tsx b/web/src/components/GradientTokenIcons.tsx
new file mode 100644
index 000000000..f79454b32
--- /dev/null
+++ b/web/src/components/GradientTokenIcons.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+const LinearGradientPath = styled.path<{ gradient: string }>`
+  ${({ gradient }) =>
+    gradient &&
+    css`
+      stroke: url(#${gradient});
+    `}
+`;
+
+interface IGradientTokenIcons {
+  icon: string;
+}
+
+const GradientTokenIcons: React.FC<IGradientTokenIcons> = ({ icon }) => {
+  return (
+    <>
+      {icon === "ETH" ? (
+        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <LinearGradientPath
+            gradient="eth"
+            id="paint0_linear_14360_27088"
+            d="M9.86602 28.0687L22.923 36.0836V47.1905L9.86602 28.0687ZM23.423 36.0836L36.4799 28.0687L23.423 47.1905V36.0836ZM23.423 16.428V0.930308L36.666 23.7911L23.423 16.428ZM36.8415 24.4607L23.423 32.703V17L36.8415 24.4607ZM22.923 0.929777V16.4279L9.67081 23.7913L22.923 0.929777ZM22.923 32.7032L9.49539 24.4607L22.923 16.9999V32.7032Z"
+          />
+          <defs>
+            <linearGradient id="eth" x1="23.173" y1="0" x2="23.173" y2="48" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#6CC5FF" />
+              <stop offset="1" stopColor="#B45FFF" />
+            </linearGradient>
+          </defs>
+        </svg>
+      ) : (
+        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <LinearGradientPath
+            gradient="pnk"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.7151 6L35.6632 7.30096L43.9078 25.526L32.6361 42L12.2385 41.132L4 21.1862L15.7151 6ZM16.2222 7.03373L13.1105 22.2033L31.3917 13.6461L16.2222 7.03373ZM31.8965 14.3445L13.3445 23.0284L29.1334 34.8701L31.8965 14.3445ZM28.5319 35.4771L12.9497 23.7905V40.1518L28.5319 35.4771ZM12.1032 38.5872V23.2874L5.18188 21.8302L12.1032 38.5872ZM5.23158 20.9756L12.1974 22.4421L15.1303 8.14394L5.23158 20.9756ZM15.0532 40.4045L31.7195 41.1137L29.2373 36.1493L15.0532 40.4045ZM29.9956 35.773L32.4763 40.7345L41.6905 27.2676L29.9956 35.773ZM41.9695 23.295L35.3631 8.69144L32.9292 13.5593L41.9695 23.295ZM32.2205 13.0839L18.3024 7.01704L34.7186 8.08766L32.2205 13.0839ZM32.7193 14.5773L30.0082 34.7171L42.7892 25.4218L32.7193 14.5773Z"
+            fill="url(#paint0_linear_14360_27090)"
+          />
+          <defs>
+            <linearGradient id="pnk" x1="23.9539" y1="6" x2="23.9539" y2="42" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#6CC5FF" />
+              <stop offset="1" stopColor="#B45FFF" />
+            </linearGradient>
+          </defs>
+        </svg>
+      )}
+    </>
+  );
+};
+export default GradientTokenIcons;
diff --git a/web/src/components/Popup/Description/Appeal.tsx b/web/src/components/Popup/Description/Appeal.tsx
new file mode 100644
index 000000000..e994b96c1
--- /dev/null
+++ b/web/src/components/Popup/Description/Appeal.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledAmountFunded = styled.div`
+  display: flex;
+  margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  color: ${({ theme }) => theme.secondaryText};
+  text-align: center;
+`;
+
+const StyledOptionFunded = styled.div`
+  display: flex;
+  margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
+  margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  color: ${({ theme }) => theme.secondaryText};
+  text-align: center;
+`;
+
+const AmountContainer = styled.div`
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const OptionContainer = styled.div`
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+interface IAppeal {
+  amount: string;
+  option: string;
+}
+
+const Appeal: React.FC<IAppeal> = ({ amount, option }) => {
+  return (
+    <Container>
+      <StyledAmountFunded>
+        You have funded: &nbsp;<AmountContainer>{amount} ETH</AmountContainer>
+      </StyledAmountFunded>
+      <StyledOptionFunded>
+        Option funded: &nbsp;<OptionContainer>{option}</OptionContainer>
+      </StyledOptionFunded>
+    </Container>
+  );
+};
+export default Appeal;
diff --git a/web/src/components/Popup/Description/StakeWithdraw.tsx b/web/src/components/Popup/Description/StakeWithdraw.tsx
new file mode 100644
index 000000000..960d817b8
--- /dev/null
+++ b/web/src/components/Popup/Description/StakeWithdraw.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import styled from "styled-components";
+import { isUndefined } from "utils/index";
+import { useAccount } from "wagmi";
+import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
+import { format } from "src/pages/Dashboard/Courts/CourtCard";
+import KlerosLogo from "tsx:svgs/icons/kleros.svg";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledKlerosLogo = styled(KlerosLogo)`
+  width: 14px;
+  height: 14px;
+`;
+
+const StyledTitle = styled.div`
+  display: flex;
+  margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
+  margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  color: ${({ theme }) => theme.secondaryText};
+  text-align: center;
+`;
+
+const AmountStakedOrWithdrawnContainer = styled.div`
+  font-size: 24px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.secondaryPurple};
+  margin-bottom: calc(0px + (4 - 0) * ((100vw - 300px) / (1250 - 300)));
+`;
+
+const TotalStakeContainer = styled.div`
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+`;
+
+const MyStakeContainer = styled.div`
+  display: flex;
+  margin: 0px calc(4px + (8 - 4) * ((100vw - 300px) / (1250 - 300)));
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
+const AmountContainer = styled.div`
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+interface IStakeWithdraw {
+  pnkStaked: string;
+  courtName: string;
+  isStake: boolean;
+  courtId: string;
+}
+
+interface IAmountStakedOrWithdrawn {
+  pnkStaked: string;
+  isStake: boolean;
+}
+
+const AmountStakedOrWithdrawn: React.FC<IAmountStakedOrWithdrawn> = ({ pnkStaked, isStake }) => {
+  return isStake ? <div>+ {pnkStaked} PNK</div> : <div>- {pnkStaked} PNK</div>;
+};
+
+const StakeWithdraw: React.FC<IStakeWithdraw> = ({ pnkStaked, courtName, isStake, courtId }) => {
+  const { address } = useAccount();
+
+  const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
+    enabled: !isUndefined(address) && !isUndefined(courtId),
+    args: [address, BigInt(courtId)],
+    watch: true,
+  });
+
+  return (
+    <Container>
+      <StyledTitle>🎉 Your stake in the {courtName} court was successful! 🎉</StyledTitle>
+      <AmountStakedOrWithdrawnContainer>
+        <AmountStakedOrWithdrawn pnkStaked={pnkStaked} isStake={isStake} />
+      </AmountStakedOrWithdrawnContainer>
+
+      <TotalStakeContainer>
+        <StyledKlerosLogo /> <MyStakeContainer>My Stake:</MyStakeContainer>{" "}
+        <AmountContainer>{`${format(jurorBalance?.[0])} PNK`} </AmountContainer>
+      </TotalStakeContainer>
+    </Container>
+  );
+};
+export default StakeWithdraw;
diff --git a/web/src/components/Popup/Description/VoteWithCommit.tsx b/web/src/components/Popup/Description/VoteWithCommit.tsx
new file mode 100644
index 000000000..789840385
--- /dev/null
+++ b/web/src/components/Popup/Description/VoteWithCommit.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledDescription = styled.div`
+  margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
+  margin-left: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-right: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+  color: ${({ theme }) => theme.secondaryText};
+  text-align: center;
+  line-height: 21.8px;
+`;
+
+const EmphasizedDate = styled.span`
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21.8px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+interface IVoteWithCommit {
+  date: string;
+}
+
+const VoteWithCommit: React.FC<IVoteWithCommit> = ({ date }) => {
+  return (
+    <Container>
+      <StyledDescription>
+        Your vote is confirmed. It's kept secret until all jurors have cast their votes.
+        <EmphasizedDate> You'll need to justify and reveal your vote on {date}</EmphasizedDate>
+      </StyledDescription>
+    </Container>
+  );
+};
+export default VoteWithCommit;
diff --git a/web/src/components/Popup/Description/VoteWithoutCommit.tsx b/web/src/components/Popup/Description/VoteWithoutCommit.tsx
new file mode 100644
index 000000000..a5b445130
--- /dev/null
+++ b/web/src/components/Popup/Description/VoteWithoutCommit.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledDescription = styled.div`
+  margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
+  margin-left: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-right: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+  color: ${({ theme }) => theme.secondaryText};
+  text-align: center;
+  line-height: 21.8px;
+`;
+
+const EmphasizedDate = styled.span`
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21.8px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+interface IVoteWithoutCommit {
+  date: string;
+}
+
+const VoteWithoutCommit: React.FC<IVoteWithoutCommit> = ({ date }) => {
+  return (
+    <Container>
+      <StyledDescription>
+        The decision date is <EmphasizedDate>{date}</EmphasizedDate> with the possibility for appeals. After that time
+        you will be informed about the jury decision.
+      </StyledDescription>
+    </Container>
+  );
+};
+export default VoteWithoutCommit;
diff --git a/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx
new file mode 100644
index 000000000..5ca4b4169
--- /dev/null
+++ b/web/src/components/Popup/ExtraInfo/StakeWithdrawExtraInfo.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  color: ${({ theme }) => theme.secondaryText};
+  text-align: center;
+  margin-left: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-right: calc(8px + (44 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-top: calc(8px + (24 - 8) * ((100vw - 300px) / (1250 - 300)));
+`;
+
+const StakeWithdrawExtraInfo: React.FC = () => {
+  return (
+    <Container>
+      {
+        "In order not to miss when you're drawn for cases, make sure to subscribe to notifications: Settings > Notifications"
+      }
+    </Container>
+  );
+};
+export default StakeWithdrawExtraInfo;
diff --git a/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx
new file mode 100644
index 000000000..199264b3d
--- /dev/null
+++ b/web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+import InfoCircle from "tsx:svgs/icons/info-circle.svg";
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  text-align: center;
+  align-items: center;
+  margin: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+  margin-top: calc(8px + (24 - 8) * ((100vw - 300px) / (1250 - 300)));
+  small {
+    font-size: 14px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.secondaryText};
+    line-height: 19px;
+  }
+`;
+
+const StyledInfoCircle = styled(InfoCircle)`
+  min-width: 16px;
+  min-height: 16px;
+`;
+
+const VoteWithCommitExtraInfo: React.FC = () => {
+  return (
+    <Container>
+      <StyledInfoCircle />
+      <small>Subscribe to receive notifications to be reminded when the reveal time comes.</small>
+    </Container>
+  );
+};
+export default VoteWithCommitExtraInfo;
diff --git a/web/src/components/Popup/index.tsx b/web/src/components/Popup/index.tsx
new file mode 100644
index 000000000..f9433f1a2
--- /dev/null
+++ b/web/src/components/Popup/index.tsx
@@ -0,0 +1,171 @@
+import React, { useRef } from "react";
+import styled from "styled-components";
+import { Button } from "@kleros/ui-components-library";
+import { Overlay } from "components/Overlay";
+import StakeWithdraw from "./Description/StakeWithdraw";
+import VoteWithCommit from "./Description/VoteWithCommit";
+import VoteWithoutCommit from "./Description/VoteWithoutCommit";
+import Appeal from "./Description/Appeal";
+import VoteWithCommitExtraInfo from "./ExtraInfo/VoteWithCommitExtraInfo";
+import StakeWithdrawExtraInfo from "./ExtraInfo/StakeWithdrawExtraInfo";
+
+export enum PopupType {
+  STAKE_WITHDRAW = "STAKE_WITHDRAW",
+  APPEAL = "APPEAL",
+  VOTE_WITHOUT_COMMIT = "VOTE_WITHOUT_COMMIT",
+  VOTE_WITH_COMMIT = "VOTE_WITH_COMMIT",
+}
+
+interface IStakeWithdraw {
+  popupType: PopupType.STAKE_WITHDRAW;
+  pnkStaked: string;
+  courtName: string;
+  isStake: boolean;
+  courtId: string;
+}
+
+interface IVoteWithoutCommit {
+  popupType: PopupType.VOTE_WITHOUT_COMMIT;
+  date: string;
+}
+
+interface IVoteWithCommit {
+  popupType: PopupType.VOTE_WITH_COMMIT;
+  date: string;
+}
+
+interface IAppeal {
+  popupType: PopupType.APPEAL;
+  amount: string;
+  option: string;
+}
+interface IPopup {
+  title: string;
+  icon: React.FC<React.SVGAttributes<SVGElement>>;
+  popupType: PopupType;
+  setIsOpen: (val: boolean) => void;
+  setAmount?: (val: string) => void;
+  isCommit?: boolean;
+}
+
+type PopupProps = IStakeWithdraw | IVoteWithoutCommit | IVoteWithCommit | IAppeal;
+
+const Header = styled.h1`
+  display: flex;
+  margin-top: calc(12px + (32 - 12) * ((100vw - 300px) / (1250 - 300)));
+  margin-bottom: calc(12px + (24 - 12) * ((100vw - 300px) / (1250 - 300)));
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32.68px;
+`;
+
+const IconContainer = styled.div`
+  width: calc(150px + (350 - 150) * (100vw - 375px) / (1250 - 375));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    display: inline-block;
+    width: calc(150px + (350 - 150) * (100vw - 375px) / (1250 - 375));
+    height: calc(150px + (350 - 150) * (100vw - 375px) / (1250 - 375));
+  }
+`;
+
+const StyledButton = styled(Button)`
+  margin: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
+`;
+
+const Container = styled.div`
+  display: flex;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  z-index: 10;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: calc(300px + (600 - 300) * (100vw - 375px) / (1250 - 375));
+  max-width: 600px;
+  border-radius: 3px;
+  border: 1px solid ${({ theme }) => theme.stroke};
+  background-color: ${({ theme }) => theme.whiteBackground};
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06);
+
+  svg {
+    visibility: visible;
+  }
+`;
+
+const Popup: React.FC<PopupProps & IPopup> = ({
+  title,
+  icon: Icon,
+  popupType,
+  setIsOpen,
+  setAmount,
+  isCommit,
+  ...props
+}) => {
+  const containerRef = useRef(null);
+
+  const resetValue = () => {
+    if (setAmount) {
+      setAmount("");
+    }
+  };
+
+  let PopupComponent: JSX.Element | null = null;
+
+  switch (popupType) {
+    case PopupType.STAKE_WITHDRAW: {
+      const { pnkStaked, courtName, isStake, courtId } = props as IStakeWithdraw;
+      PopupComponent = (
+        <StakeWithdraw pnkStaked={pnkStaked} courtName={courtName} isStake={isStake} courtId={courtId} />
+      );
+      break;
+    }
+    case PopupType.VOTE_WITHOUT_COMMIT: {
+      const { date } = props as IVoteWithoutCommit;
+      PopupComponent = <VoteWithoutCommit date={date} />;
+      break;
+    }
+    case PopupType.VOTE_WITH_COMMIT: {
+      const { date } = props as IVoteWithCommit;
+      PopupComponent = <VoteWithCommit date={date} />;
+      break;
+    }
+    case PopupType.APPEAL: {
+      const { amount, option } = props as IAppeal;
+      PopupComponent = <Appeal amount={amount} option={option} />;
+      break;
+    }
+    default:
+      break;
+  }
+
+  return (
+    <>
+      <Overlay />
+      <Container ref={containerRef}>
+        <Header>{title}</Header>
+        {PopupComponent}
+        <IconContainer>
+          <Icon />
+        </IconContainer>
+        {popupType === PopupType.STAKE_WITHDRAW && <StakeWithdrawExtraInfo />}
+        {popupType === PopupType.VOTE_WITH_COMMIT && <VoteWithCommitExtraInfo />}
+        <StyledButton
+          variant="secondary"
+          text="Close"
+          onClick={() => {
+            setIsOpen(false);
+            resetValue();
+          }}
+        />
+      </Container>
+    </>
+  );
+};
+export default Popup;
diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx
index 439abd8e2..d53b88520 100644
--- a/web/src/components/Verdict/DisputeTimeline.tsx
+++ b/web/src/components/Verdict/DisputeTimeline.tsx
@@ -3,12 +3,13 @@ import { useParams } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
 import { Periods } from "consts/periods";
-import { useVotingHistory } from "queries/useVotingHistory";
-import { useDisputeTemplate } from "queries/useDisputeTemplate";
+import { ClassicRound } from "src/graphql/graphql";
 import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+import { useDisputeTemplate } from "queries/useDisputeTemplate";
+import { useVotingHistory } from "queries/useVotingHistory";
+import CalendarIcon from "assets/svgs/icons/calendar.svg";
 import ClosedCaseIcon from "assets/svgs/icons/check-circle-outline.svg";
 import AppealedCaseIcon from "assets/svgs/icons/close-circle.svg";
-import CalendarIcon from "assets/svgs/icons/calendar.svg";
 
 const Container = styled.div`
   display: flex;
@@ -59,31 +60,31 @@ const getCaseEventTimes = (
 
 type TimelineItems = [_TimelineItem1, ..._TimelineItem1[]];
 
-const useItems = (disputeDetails?: DisputeDetailsQuery) => {
-  const { data: disputeTemplate } = useDisputeTemplate();
+const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string}`) => {
   const { id } = useParams();
   const { data: votingHistory } = useVotingHistory(id);
-  const localRounds = votingHistory?.dispute?.disputeKitDispute?.localRounds;
+  const { data: disputeTemplate } = useDisputeTemplate(id, arbitrable);
+  const localRounds: ClassicRound[] = votingHistory?.dispute?.disputeKitDispute?.localRounds;
   const theme = useTheme();
 
   return useMemo<TimelineItems | undefined>(() => {
     const dispute = disputeDetails?.dispute;
     if (dispute) {
+      const rulingOverride = dispute.overridden;
+      const parsedDisputeFinalRuling = parseInt(dispute.currentRuling);
       const currentPeriodIndex = Periods[dispute.period];
       const lastPeriodChange = dispute.lastPeriodChange;
       const courtTimePeriods = dispute.court.timesPerPeriod;
       return localRounds?.reduce<TimelineItems>(
         (acc, { winningChoice }, index) => {
-          const parsedWinningChoice = parseInt(winningChoice);
+          const parsedRoundChoice = parseInt(winningChoice);
           const eventDate = getCaseEventTimes(lastPeriodChange, currentPeriodIndex, courtTimePeriods, false);
-          const icon = disputeDetails?.dispute?.ruled && index === localRounds.length - 1 ? ClosedCaseIcon : "";
+          const icon = dispute.ruled && !rulingOverride && index === localRounds.length - 1 ? ClosedCaseIcon : "";
 
           acc.push({
             title: `Jury Decision - Round ${index + 1}`,
             party:
-              parsedWinningChoice !== 0
-                ? disputeTemplate?.answers?.[parseInt(winningChoice) - 1].title
-                : "Refuse to Arbitrate",
+              parsedRoundChoice !== 0 ? disputeTemplate?.answers?.[parsedRoundChoice - 1].title : "Refuse to Arbitrate",
             subtitle: eventDate,
             rightSided: true,
             variant: theme.secondaryPurple,
@@ -98,6 +99,17 @@ const useItems = (disputeDetails?: DisputeDetailsQuery) => {
               rightSided: true,
               Icon: AppealedCaseIcon,
             });
+          } else if (rulingOverride && parsedDisputeFinalRuling !== parsedRoundChoice) {
+            acc.push({
+              title: "Won by Appeal",
+              party:
+                parsedDisputeFinalRuling !== 0
+                  ? disputeTemplate?.answers?.[parsedDisputeFinalRuling - 1].title
+                  : "Refuse to Arbitrate",
+              subtitle: eventDate,
+              rightSided: true,
+              Icon: ClosedCaseIcon,
+            });
           }
 
           return acc;
@@ -117,10 +129,14 @@ const useItems = (disputeDetails?: DisputeDetailsQuery) => {
   }, [disputeDetails, disputeTemplate, localRounds, theme]);
 };
 
-const DisputeTimeline: React.FC = () => {
+interface IDisputeTimeline {
+  arbitrable?: `0x${string}`;
+}
+
+const DisputeTimeline: React.FC<IDisputeTimeline> = ({ arbitrable }) => {
   const { id } = useParams();
   const { data: disputeDetails } = useDisputeDetailsQuery(id);
-  const items = useItems(disputeDetails);
+  const items = useItems(disputeDetails, arbitrable);
 
   return (
     <Container>
diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx
index eb0393fda..39a4bcb27 100644
--- a/web/src/components/Verdict/FinalDecision.tsx
+++ b/web/src/components/Verdict/FinalDecision.tsx
@@ -3,9 +3,9 @@ import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
 import Identicon from "react-identicons";
 import ArrowIcon from "assets/svgs/icons/arrow.svg";
-import { useDisputeTemplate } from "queries/useDisputeTemplate";
-import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { useKlerosCoreCurrentRuling } from "hooks/contracts/generated";
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+import { useDisputeTemplate } from "queries/useDisputeTemplate";
 import LightButton from "../LightButton";
 import VerdictBanner from "./VerdictBanner";
 
@@ -75,9 +75,13 @@ const AnswerTitle = styled.h3`
   margin: 0;
 `;
 
-const FinalDecision: React.FC = () => {
+interface IFinalDecision {
+  arbitrable?: `0x${string}`;
+}
+
+const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
   const { id } = useParams();
-  const { data: disputeTemplate } = useDisputeTemplate(id);
+  const { data: disputeTemplate } = useDisputeTemplate(id, arbitrable);
   const { data: disputeDetails } = useDisputeDetailsQuery(id);
   const ruled = disputeDetails?.dispute?.ruled ?? false;
   const navigate = useNavigate();
diff --git a/web/src/components/Verdict/index.tsx b/web/src/components/Verdict/index.tsx
index 76f14bff4..565ec5837 100644
--- a/web/src/components/Verdict/index.tsx
+++ b/web/src/components/Verdict/index.tsx
@@ -9,11 +9,15 @@ const Container = styled.div`
   gap: 24px;
 `;
 
-const Verdict: React.FC = () => {
+interface IVerdict {
+  arbitrable?: `0x${string}`;
+}
+
+const Verdict: React.FC<IVerdict> = ({ arbitrable }) => {
   return (
     <Container>
-      <FinalDecision />
-      <DisputeTimeline />
+      <FinalDecision arbitrable={arbitrable} />
+      <DisputeTimeline arbitrable={arbitrable} />
     </Container>
   );
 };
diff --git a/web/src/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx
index 665f2e9b0..bf3596cd3 100644
--- a/web/src/context/Web3Provider.tsx
+++ b/web/src/context/Web3Provider.tsx
@@ -22,7 +22,7 @@ const { publicClient, webSocketPublicClient } = configureChains(chains, [
 ]);
 
 const wagmiConfig = createConfig({
-  autoConnect: false,
+  autoConnect: true,
   connectors: w3mConnectors({ projectId, version: 2, chains }),
   publicClient,
   webSocketPublicClient,
diff --git a/web/src/graphql/gql.ts b/web/src/graphql/gql.ts
index 90c809e70..f7ce54f38 100644
--- a/web/src/graphql/gql.ts
+++ b/web/src/graphql/gql.ts
@@ -23,7 +23,7 @@ const documents = {
     types.CourtPolicyUriDocument,
   '\n  query CourtTree {\n    court(id: "1") {\n      name\n      id\n      children(orderBy: name) {\n        name\n        id\n        children {\n          name\n          id\n          children {\n            name\n            id\n            children {\n              name\n              id\n              children {\n                name\n                id\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n':
     types.CourtTreeDocument,
-  "\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n":
+  "\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRuling\n      overridden\n      tied\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n":
     types.DisputeDetailsDocument,
   "\n  query Draw($address: String, $disputeID: String, $roundID: String) {\n    draws(where: { dispute: $disputeID, juror: $address, round: $roundID }) {\n      voteID\n    }\n  }\n":
     types.DrawDocument,
@@ -85,8 +85,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n"
-): (typeof documents)["\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n"];
+  source: "\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRuling\n      overridden\n      tied\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n"
+): (typeof documents)["\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRuling\n      overridden\n      tied\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/web/src/graphql/graphql.ts b/web/src/graphql/graphql.ts
index 879939a1f..c61ee4e48 100644
--- a/web/src/graphql/graphql.ts
+++ b/web/src/graphql/graphql.ts
@@ -201,10 +201,13 @@ export enum ClassicContribution_OrderBy {
   ContributorTotalStake = "contributor__totalStake",
   CoreDispute = "coreDispute",
   CoreDisputeCurrentRoundIndex = "coreDispute__currentRoundIndex",
+  CoreDisputeCurrentRuling = "coreDispute__currentRuling",
   CoreDisputeId = "coreDispute__id",
   CoreDisputeLastPeriodChange = "coreDispute__lastPeriodChange",
+  CoreDisputeOverridden = "coreDispute__overridden",
   CoreDisputePeriod = "coreDispute__period",
   CoreDisputeRuled = "coreDispute__ruled",
+  CoreDisputeTied = "coreDispute__tied",
   Id = "id",
   LocalRound = "localRound",
   LocalRoundFeeRewards = "localRound__feeRewards",
@@ -305,10 +308,13 @@ export type ClassicDispute_Filter = {
 export enum ClassicDispute_OrderBy {
   CoreDispute = "coreDispute",
   CoreDisputeCurrentRoundIndex = "coreDispute__currentRoundIndex",
+  CoreDisputeCurrentRuling = "coreDispute__currentRuling",
   CoreDisputeId = "coreDispute__id",
   CoreDisputeLastPeriodChange = "coreDispute__lastPeriodChange",
+  CoreDisputeOverridden = "coreDispute__overridden",
   CoreDisputePeriod = "coreDispute__period",
   CoreDisputeRuled = "coreDispute__ruled",
+  CoreDisputeTied = "coreDispute__tied",
   CurrentLocalRoundIndex = "currentLocalRoundIndex",
   ExtraData = "extraData",
   Id = "id",
@@ -724,10 +730,13 @@ export enum ClassicVote_OrderBy {
   Choice = "choice",
   CoreDispute = "coreDispute",
   CoreDisputeCurrentRoundIndex = "coreDispute__currentRoundIndex",
+  CoreDisputeCurrentRuling = "coreDispute__currentRuling",
   CoreDisputeId = "coreDispute__id",
   CoreDisputeLastPeriodChange = "coreDispute__lastPeriodChange",
+  CoreDisputeOverridden = "coreDispute__overridden",
   CoreDisputePeriod = "coreDispute__period",
   CoreDisputeRuled = "coreDispute__ruled",
+  CoreDisputeTied = "coreDispute__tied",
   Id = "id",
   Juror = "juror",
   JurorActiveDisputes = "juror__activeDisputes",
@@ -816,10 +825,13 @@ export enum Contribution_OrderBy {
   ContributorTotalStake = "contributor__totalStake",
   CoreDispute = "coreDispute",
   CoreDisputeCurrentRoundIndex = "coreDispute__currentRoundIndex",
+  CoreDisputeCurrentRuling = "coreDispute__currentRuling",
   CoreDisputeId = "coreDispute__id",
   CoreDisputeLastPeriodChange = "coreDispute__lastPeriodChange",
+  CoreDisputeOverridden = "coreDispute__overridden",
   CoreDisputePeriod = "coreDispute__period",
   CoreDisputeRuled = "coreDispute__ruled",
+  CoreDisputeTied = "coreDispute__tied",
   Id = "id",
 }
 
@@ -1192,13 +1204,16 @@ export type Dispute = {
   court: Court;
   currentRound: Round;
   currentRoundIndex: Scalars["BigInt"]["output"];
+  currentRuling: Scalars["BigInt"]["output"];
   disputeKitDispute?: Maybe<DisputeKitDispute>;
   id: Scalars["ID"]["output"];
   lastPeriodChange: Scalars["BigInt"]["output"];
+  overridden: Scalars["Boolean"]["output"];
   period: Period;
   rounds: Array<Round>;
   ruled: Scalars["Boolean"]["output"];
   shifts: Array<TokenAndEthShift>;
+  tied: Scalars["Boolean"]["output"];
 };
 
 export type DisputeRoundsArgs = {
@@ -1316,10 +1331,13 @@ export type DisputeKitDispute_Filter = {
 export enum DisputeKitDispute_OrderBy {
   CoreDispute = "coreDispute",
   CoreDisputeCurrentRoundIndex = "coreDispute__currentRoundIndex",
+  CoreDisputeCurrentRuling = "coreDispute__currentRuling",
   CoreDisputeId = "coreDispute__id",
   CoreDisputeLastPeriodChange = "coreDispute__lastPeriodChange",
+  CoreDisputeOverridden = "coreDispute__overridden",
   CoreDisputePeriod = "coreDispute__period",
   CoreDisputeRuled = "coreDispute__ruled",
+  CoreDisputeTied = "coreDispute__tied",
   CurrentLocalRoundIndex = "currentLocalRoundIndex",
   Id = "id",
   LocalRounds = "localRounds",
@@ -1535,6 +1553,14 @@ export type Dispute_Filter = {
   currentRound_not_starts_with_nocase?: InputMaybe<Scalars["String"]["input"]>;
   currentRound_starts_with?: InputMaybe<Scalars["String"]["input"]>;
   currentRound_starts_with_nocase?: InputMaybe<Scalars["String"]["input"]>;
+  currentRuling?: InputMaybe<Scalars["BigInt"]["input"]>;
+  currentRuling_gt?: InputMaybe<Scalars["BigInt"]["input"]>;
+  currentRuling_gte?: InputMaybe<Scalars["BigInt"]["input"]>;
+  currentRuling_in?: InputMaybe<Array<Scalars["BigInt"]["input"]>>;
+  currentRuling_lt?: InputMaybe<Scalars["BigInt"]["input"]>;
+  currentRuling_lte?: InputMaybe<Scalars["BigInt"]["input"]>;
+  currentRuling_not?: InputMaybe<Scalars["BigInt"]["input"]>;
+  currentRuling_not_in?: InputMaybe<Array<Scalars["BigInt"]["input"]>>;
   disputeKitDispute_?: InputMaybe<DisputeKitDispute_Filter>;
   id?: InputMaybe<Scalars["ID"]["input"]>;
   id_gt?: InputMaybe<Scalars["ID"]["input"]>;
@@ -1553,6 +1579,10 @@ export type Dispute_Filter = {
   lastPeriodChange_not?: InputMaybe<Scalars["BigInt"]["input"]>;
   lastPeriodChange_not_in?: InputMaybe<Array<Scalars["BigInt"]["input"]>>;
   or?: InputMaybe<Array<InputMaybe<Dispute_Filter>>>;
+  overridden?: InputMaybe<Scalars["Boolean"]["input"]>;
+  overridden_in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
+  overridden_not?: InputMaybe<Scalars["Boolean"]["input"]>;
+  overridden_not_in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
   period?: InputMaybe<Period>;
   period_in?: InputMaybe<Array<Period>>;
   period_not?: InputMaybe<Period>;
@@ -1563,6 +1593,10 @@ export type Dispute_Filter = {
   ruled_not?: InputMaybe<Scalars["Boolean"]["input"]>;
   ruled_not_in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
   shifts_?: InputMaybe<TokenAndEthShift_Filter>;
+  tied?: InputMaybe<Scalars["Boolean"]["input"]>;
+  tied_in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
+  tied_not?: InputMaybe<Scalars["Boolean"]["input"]>;
+  tied_not_in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
 };
 
 export enum Dispute_OrderBy {
@@ -1592,15 +1626,18 @@ export enum Dispute_OrderBy {
   CurrentRoundRepartitions = "currentRound__repartitions",
   CurrentRoundTokensAtStakePerJuror = "currentRound__tokensAtStakePerJuror",
   CurrentRoundTotalFeesForJurors = "currentRound__totalFeesForJurors",
+  CurrentRuling = "currentRuling",
   DisputeKitDispute = "disputeKitDispute",
   DisputeKitDisputeCurrentLocalRoundIndex = "disputeKitDispute__currentLocalRoundIndex",
   DisputeKitDisputeId = "disputeKitDispute__id",
   Id = "id",
   LastPeriodChange = "lastPeriodChange",
+  Overridden = "overridden",
   Period = "period",
   Rounds = "rounds",
   Ruled = "ruled",
   Shifts = "shifts",
+  Tied = "tied",
 }
 
 export type Draw = {
@@ -1701,10 +1738,13 @@ export type Draw_Filter = {
 export enum Draw_OrderBy {
   Dispute = "dispute",
   DisputeCurrentRoundIndex = "dispute__currentRoundIndex",
+  DisputeCurrentRuling = "dispute__currentRuling",
   DisputeId = "dispute__id",
   DisputeLastPeriodChange = "dispute__lastPeriodChange",
+  DisputeOverridden = "dispute__overridden",
   DisputePeriod = "dispute__period",
   DisputeRuled = "dispute__ruled",
+  DisputeTied = "dispute__tied",
   Id = "id",
   Juror = "juror",
   JurorActiveDisputes = "juror__activeDisputes",
@@ -2113,10 +2153,13 @@ export enum Penalty_OrderBy {
   DegreeOfCoherency = "degreeOfCoherency",
   Dispute = "dispute",
   DisputeCurrentRoundIndex = "dispute__currentRoundIndex",
+  DisputeCurrentRuling = "dispute__currentRuling",
   DisputeId = "dispute__id",
   DisputeLastPeriodChange = "dispute__lastPeriodChange",
+  DisputeOverridden = "dispute__overridden",
   DisputePeriod = "dispute__period",
   DisputeRuled = "dispute__ruled",
+  DisputeTied = "dispute__tied",
   Id = "id",
   Juror = "juror",
   JurorActiveDisputes = "juror__activeDisputes",
@@ -2695,10 +2738,13 @@ export enum Round_OrderBy {
   DisputeKitId = "disputeKit__id",
   DisputeKitNeedsFreezing = "disputeKit__needsFreezing",
   DisputeCurrentRoundIndex = "dispute__currentRoundIndex",
+  DisputeCurrentRuling = "dispute__currentRuling",
   DisputeId = "dispute__id",
   DisputeLastPeriodChange = "dispute__lastPeriodChange",
+  DisputeOverridden = "dispute__overridden",
   DisputePeriod = "dispute__period",
   DisputeRuled = "dispute__ruled",
+  DisputeTied = "dispute__tied",
   DrawnJurors = "drawnJurors",
   Id = "id",
   NbVotes = "nbVotes",
@@ -3217,10 +3263,13 @@ export type TokenAndEthShift_Filter = {
 export enum TokenAndEthShift_OrderBy {
   Dispute = "dispute",
   DisputeCurrentRoundIndex = "dispute__currentRoundIndex",
+  DisputeCurrentRuling = "dispute__currentRuling",
   DisputeId = "dispute__id",
   DisputeLastPeriodChange = "dispute__lastPeriodChange",
+  DisputeOverridden = "dispute__overridden",
   DisputePeriod = "dispute__period",
   DisputeRuled = "dispute__ruled",
+  DisputeTied = "dispute__tied",
   EthAmount = "ethAmount",
   Id = "id",
   Juror = "juror",
@@ -3517,10 +3566,13 @@ export type Vote_Filter = {
 export enum Vote_OrderBy {
   CoreDispute = "coreDispute",
   CoreDisputeCurrentRoundIndex = "coreDispute__currentRoundIndex",
+  CoreDisputeCurrentRuling = "coreDispute__currentRuling",
   CoreDisputeId = "coreDispute__id",
   CoreDisputeLastPeriodChange = "coreDispute__lastPeriodChange",
+  CoreDisputeOverridden = "coreDispute__overridden",
   CoreDisputePeriod = "coreDispute__period",
   CoreDisputeRuled = "coreDispute__ruled",
+  CoreDisputeTied = "coreDispute__tied",
   Id = "id",
   Juror = "juror",
   JurorActiveDisputes = "juror__activeDisputes",
@@ -3681,6 +3733,9 @@ export type DisputeDetailsQuery = {
     period: Period;
     ruled: boolean;
     lastPeriodChange: any;
+    currentRuling: any;
+    overridden: boolean;
+    tied: boolean;
     currentRoundIndex: any;
     court: { __typename?: "Court"; id: string; timesPerPeriod: Array<any>; hiddenVotes: boolean; feeForJuror: any };
     arbitrated: { __typename?: "Arbitrable"; id: string };
@@ -4185,6 +4240,9 @@ export const DisputeDetailsDocument = {
                 { kind: "Field", name: { kind: "Name", value: "period" } },
                 { kind: "Field", name: { kind: "Name", value: "ruled" } },
                 { kind: "Field", name: { kind: "Name", value: "lastPeriodChange" } },
+                { kind: "Field", name: { kind: "Name", value: "currentRuling" } },
+                { kind: "Field", name: { kind: "Name", value: "overridden" } },
+                { kind: "Field", name: { kind: "Name", value: "tied" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "currentRound" },
diff --git a/web/src/hooks/queries/useDisputeDetailsQuery.ts b/web/src/hooks/queries/useDisputeDetailsQuery.ts
index db23752f6..221ef05b1 100644
--- a/web/src/hooks/queries/useDisputeDetailsQuery.ts
+++ b/web/src/hooks/queries/useDisputeDetailsQuery.ts
@@ -19,6 +19,9 @@ const disputeDetailsQuery = graphql(`
       period
       ruled
       lastPeriodChange
+      currentRuling
+      overridden
+      tied
       currentRound {
         id
       }
diff --git a/web/src/hooks/queries/useDisputeTemplate.ts b/web/src/hooks/queries/useDisputeTemplate.ts
index ea1319c05..c81c771f7 100644
--- a/web/src/hooks/queries/useDisputeTemplate.ts
+++ b/web/src/hooks/queries/useDisputeTemplate.ts
@@ -9,7 +9,7 @@ import { useIsCrossChainDispute } from "../useIsCrossChainDispute";
 export const useDisputeTemplate = (disputeID?: string, arbitrableAddress?: `0x${string}`) => {
   const publicClient = usePublicClient();
   const { data: crossChainData } = useIsCrossChainDispute(disputeID, arbitrableAddress);
-  const isEnabled = !isUndefined(arbitrableAddress) && !isUndefined(disputeID) && !isUndefined(crossChainData);
+  const isEnabled = !isUndefined(disputeID) && !isUndefined(crossChainData) && !isUndefined(arbitrableAddress);
   return useQuery({
     queryKey: [`DisputeTemplate${disputeID}${arbitrableAddress}`],
     enabled: isEnabled,
@@ -22,6 +22,7 @@ export const useDisputeTemplate = (disputeID?: string, arbitrableAddress?: `0x${
           const templateId = isCrossChainDispute
             ? crossChainTemplateId
             : await getTemplateId(arbitrableAddress, disputeID, publicClient);
+
           return await getDisputeTemplate(
             templateId,
             isCrossChainDispute ? crossChainArbitrableAddress : arbitrableAddress,
diff --git a/web/src/hooks/queries/useJurorBalance.ts b/web/src/hooks/queries/useJurorBalance.ts
deleted file mode 100644
index dad59bfab..000000000
--- a/web/src/hooks/queries/useJurorBalance.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getKlerosCore } from "hooks/contracts/generated";
-
-export const useJurorBalance = (user?: `0x${string}` | null, courtId?: string | undefined) => {
-  const klerosCore = getKlerosCore({});
-
-  const isEnabled = !!(klerosCore && user && courtId);
-
-  return useQuery({
-    queryKey: [`JurorBalance${user}${courtId}`],
-    enabled: isEnabled,
-    queryFn: async () => {
-      if (isEnabled) {
-        return await klerosCore.read.getJurorBalance([user, BigInt(courtId)]);
-      }
-      return undefined;
-    },
-  });
-};
diff --git a/web/src/hooks/queries/usePNKAllowance.ts b/web/src/hooks/queries/usePNKAllowance.ts
deleted file mode 100644
index d3b555f5a..000000000
--- a/web/src/hooks/queries/usePNKAllowance.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getPnk, getKlerosCore } from "hooks/contracts/generated";
-
-export const usePNKAllowance = (user?: `0x${string}` | null) => {
-  const pnkContract = getPnk({});
-  const klerosCore = getKlerosCore({});
-  const isEnabled = user !== undefined;
-
-  return useQuery({
-    queryKey: [`pnkAllowance${user}`],
-    enabled: isEnabled,
-    queryFn: async () => {
-      if (pnkContract && user && klerosCore) {
-        return await pnkContract.read.allowance([user, klerosCore.address]);
-      } else {
-        return undefined;
-      }
-    },
-  });
-};
diff --git a/web/src/hooks/queries/usePNKBalance.ts b/web/src/hooks/queries/usePNKBalance.ts
deleted file mode 100644
index 8dea187d1..000000000
--- a/web/src/hooks/queries/usePNKBalance.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getPnk } from "hooks/contracts/generated";
-
-export const usePNKBalance = (user?: `0x${string}` | null) => {
-  const pnkContract = getPnk({});
-
-  const isEnabled = !!(pnkContract && user);
-
-  return useQuery({
-    queryKey: [`PNKBalance${user}`],
-    enabled: isEnabled,
-    queryFn: async () => {
-      if (isEnabled) {
-        const balance = await pnkContract.read.balanceOf([user]);
-        return balance;
-      }
-      return undefined;
-    },
-  });
-};
diff --git a/web/src/hooks/queries/useVotingHistory.ts b/web/src/hooks/queries/useVotingHistory.ts
index 621b1e167..7f912f38b 100644
--- a/web/src/hooks/queries/useVotingHistory.ts
+++ b/web/src/hooks/queries/useVotingHistory.ts
@@ -36,8 +36,8 @@ const votingHistoryQuery = graphql(`
 export const useVotingHistory = (disputeID?: string) => {
   const isEnabled = disputeID !== undefined;
 
-  return useQuery({
-    queryKey: [`VotingHistory${disputeID}`],
+  return useQuery<VotingHistoryQuery>({
+    queryKey: ["refetchOnBlock", `VotingHistory${disputeID}`],
     enabled: isEnabled,
     queryFn: async () => await graphqlQueryFnHelper(votingHistoryQuery, { disputeID }),
   });
diff --git a/web/src/hooks/useCountdown.ts b/web/src/hooks/useCountdown.ts
index 85e102566..ca60fa33a 100644
--- a/web/src/hooks/useCountdown.ts
+++ b/web/src/hooks/useCountdown.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { getTimeLeft } from "utils/date";
+import { isUndefined } from "utils/index";
 
 export function useCountdown(deadline?: number): number | undefined {
   const [counter, setCounter] = useState<number | undefined>();
@@ -10,9 +11,10 @@ export function useCountdown(deadline?: number): number | undefined {
     }
   }, [deadline]);
   useEffect(() => {
-    typeof counter !== "undefined" &&
-      counter > 0 &&
-      setTimeout(() => setCounter(counter - 1), 1000);
+    if (!isUndefined(counter) && counter > 0) {
+      const timeout = setTimeout(() => setCounter(counter - 1), 1000);
+      return () => clearTimeout(timeout);
+    } else return;
   }, [counter]);
   return counter;
 }
diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx
index 3888b2b25..12ab41015 100644
--- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx
+++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx
@@ -42,7 +42,13 @@ const useFundAppeal = (parsedAmount) => {
   return fundAppeal;
 };
 
-const Fund: React.FC = () => {
+interface IFund {
+  amount: string;
+  setAmount: (val: string) => void;
+  setIsOpen: (val: boolean) => void;
+}
+
+const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
   const needFund = useNeedFund();
   const { address, isDisconnected } = useAccount();
   const { data: balance } = useBalance({
@@ -51,7 +57,6 @@ const Fund: React.FC = () => {
   });
   const publicClient = usePublicClient();
 
-  const [amount, setAmount] = useState("");
   const [debouncedAmount, setDebouncedAmount] = useState("");
   useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
 
@@ -79,12 +84,12 @@ const Fund: React.FC = () => {
             onClick={() => {
               if (fundAppeal) {
                 setIsSending(true);
-                wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient)
-                  .then(() => {
-                    setAmount("");
-                    close();
-                  })
-                  .finally(() => setIsSending(false));
+                wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient).finally(
+                  () => {
+                    setIsSending(false);
+                    setIsOpen(true);
+                  }
+                );
               }
             }}
           />
diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx
index 657f6748d..d5020a627 100644
--- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx
@@ -1,15 +1,44 @@
-import React from "react";
-import { ClassicAppealProvider } from "hooks/useClassicAppealContext";
+import React, { useState } from "react";
+import { ClassicAppealProvider, useOptionsContext, useSelectedOptionContext } from "hooks/useClassicAppealContext";
 import Options from "./Options";
 import Fund from "./Fund";
+import Popup, { PopupType } from "components/Popup";
+import AppealIcon from "svgs/icons/appeal.svg";
+import { isUndefined } from "utils/index";
 
-const Classic: React.FC = () => (
-  <ClassicAppealProvider>
-    <h1>Appeal crowdfunding</h1>
-    <label> The jury decision is appealed when two options are fully funded. </label>
-    <Options />
-    <Fund />
-  </ClassicAppealProvider>
-);
+const Classic: React.FC = () => {
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [amount, setAmount] = useState("");
+  const { selectedOption } = useSelectedOptionContext();
+  const options = useOptionsContext();
 
-export default Classic;
+  return (
+    <>
+      {isPopupOpen && (
+        <Popup
+          title="Thanks for Funding the Appeal"
+          icon={AppealIcon}
+          popupType={PopupType.APPEAL}
+          setIsOpen={setIsPopupOpen}
+          setAmount={setAmount}
+          option={!isUndefined(options) && !isUndefined(selectedOption) ? options[selectedOption] : ""}
+          amount={amount}
+        />
+      )}
+      <h1>Appeal crowdfunding</h1>
+      <label> The jury decision is appealed when two options are fully funded. </label>
+      <Options />
+      <Fund amount={amount} setAmount={setAmount} setIsOpen={setIsPopupOpen} />
+    </>
+  );
+};
+
+const ClassicWrapper: React.FC = () => {
+  return (
+    <ClassicAppealProvider>
+      <Classic />
+    </ClassicAppealProvider>
+  );
+};
+
+export default ClassicWrapper;
diff --git a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx
index d81c37167..b30c6a24f 100644
--- a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import Classic from "./Classic";
+import ClassicWrapper from "./Classic";
 import { Periods } from "consts/periods";
 
 const Appeal: React.FC<{ currentPeriodIndex: number }> = ({ currentPeriodIndex }) =>
-  Periods.appeal === currentPeriodIndex ? <Classic /> : <h2>Not in appeal period</h2>;
+  Periods.appeal === currentPeriodIndex ? <ClassicWrapper /> : <h2>Not in appeal period</h2>;
 
 export default Appeal;
diff --git a/web/src/pages/Cases/CaseDetails/Overview.tsx b/web/src/pages/Cases/CaseDetails/Overview.tsx
index 3935ab568..43f96e61b 100644
--- a/web/src/pages/Cases/CaseDetails/Overview.tsx
+++ b/web/src/pages/Cases/CaseDetails/Overview.tsx
@@ -120,7 +120,7 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
         {currentPeriodIndex !== Periods.evidence && (
           <>
             <hr />
-            <Verdict />
+            <Verdict arbitrable={arbitrable} />
             <hr />
           </>
         )}
@@ -137,7 +137,11 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
             </StyledA>
           )}
           {courtPolicy && (
-            <StyledA href={`https://cloudflare-ipfs.com${courtPolicyURI}`} target="_blank" rel="noreferrer">
+            <StyledA
+              href={`https://cloudflare-ipfs.com${courtPolicyURI?.court?.policy ?? ""}`}
+              target="_blank"
+              rel="noreferrer"
+            >
               <PolicyIcon />
               Court Policy
             </StyledA>
diff --git a/web/src/pages/Cases/CaseDetails/Timeline.tsx b/web/src/pages/Cases/CaseDetails/Timeline.tsx
index 1712573b6..f25ad94d5 100644
--- a/web/src/pages/Cases/CaseDetails/Timeline.tsx
+++ b/web/src/pages/Cases/CaseDetails/Timeline.tsx
@@ -10,42 +10,23 @@ const Timeline: React.FC<{
   dispute: DisputeDetailsQuery["dispute"];
   currentPeriodIndex: number;
 }> = ({ currentPeriodIndex, dispute }) => {
-  const currentItemIndex = currentPeriodToCurrentItem(
-    currentPeriodIndex,
-    dispute?.ruled
-  );
+  const currentItemIndex = currentPeriodToCurrentItem(currentPeriodIndex, dispute?.ruled);
   const items = useTimeline(dispute, currentItemIndex, currentItemIndex);
   return (
     <TimeLineContainer>
-      <StyledSteps
-        horizontal
-        {...{ items, currentItemIndex, currentPeriodIndex }}
-      />
+      <StyledSteps horizontal {...{ items, currentItemIndex, currentPeriodIndex }} />
     </TimeLineContainer>
   );
 };
 
-const currentPeriodToCurrentItem = (
-  currentPeriodIndex: number,
-  ruled?: boolean
-): number => {
+const currentPeriodToCurrentItem = (currentPeriodIndex: number, ruled?: boolean): number => {
   if (currentPeriodIndex <= Periods.commit) return currentPeriodIndex;
-  else if (currentPeriodIndex < Periods.execution)
-    return currentPeriodIndex - 1;
+  else if (currentPeriodIndex < Periods.execution) return currentPeriodIndex - 1;
   else return ruled ? 5 : currentPeriodIndex - 1;
 };
 
-const useTimeline = (
-  dispute: DisputeDetailsQuery["dispute"],
-  currentItemIndex: number,
-  currentPeriodIndex: number
-) => {
-  const titles = [
-    "Evidence Period",
-    "Voting Period",
-    "Appeal Period",
-    "Executed",
-  ];
+const useTimeline = (dispute: DisputeDetailsQuery["dispute"], currentItemIndex: number, currentPeriodIndex: number) => {
+  const titles = ["Evidence Period", "Voting Period", "Appeal Period", "Executed"];
   const deadlineCurrentPeriod = getDeadline(
     currentPeriodIndex,
     dispute?.lastPeriodChange,
@@ -77,15 +58,9 @@ const getDeadline = (
   lastPeriodChange?: string,
   timesPerPeriod?: string[]
 ): number | undefined => {
-  if (
-    lastPeriodChange &&
-    timesPerPeriod &&
-    currentPeriodIndex < timesPerPeriod.length
-  ) {
+  if (lastPeriodChange && timesPerPeriod && currentPeriodIndex < timesPerPeriod.length) {
     const parsedLastPeriodChange = parseInt(lastPeriodChange, 10);
-    const parsedTimeCurrentPeriod = parseInt(
-      timesPerPeriod[currentPeriodIndex]
-    );
+    const parsedTimeCurrentPeriod = parseInt(timesPerPeriod[currentPeriodIndex]);
     return parsedLastPeriodChange + parsedTimeCurrentPeriod;
   }
   return 0;
diff --git a/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic.tsx
similarity index 87%
rename from web/src/pages/Cases/CaseDetails/Voting/Binary.tsx
rename to web/src/pages/Cases/CaseDetails/Voting/Classic.tsx
index 3930271ea..1856da6b4 100644
--- a/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx
+++ b/web/src/pages/Cases/CaseDetails/Voting/Classic.tsx
@@ -8,6 +8,7 @@ import { wrapWithToast } from "utils/wrapWithToast";
 import { useDisputeTemplate } from "queries/useDisputeTemplate";
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { EnsureChain } from "components/EnsureChain";
+import ReactMarkdown from "react-markdown";
 
 const Container = styled.div`
   width: 100%;
@@ -44,7 +45,13 @@ const RefuseToArbitrateContainer = styled.div`
   justify-content: center;
 `;
 
-const Binary: React.FC<{ arbitrable: `0x${string}`; voteIDs: string[] }> = ({ arbitrable, voteIDs }) => {
+interface IClassic {
+  arbitrable: `0x${string}`;
+  voteIDs: string[];
+  setIsOpen: (val: boolean) => void;
+}
+
+const Classic: React.FC<IClassic> = ({ arbitrable, voteIDs, setIsOpen }) => {
   const { id } = useParams();
   const parsedDisputeID = BigInt(id ?? 0);
   const parsedVoteIDs = useMemo(() => voteIDs.map((voteID) => BigInt(voteID)), [voteIDs]);
@@ -70,17 +77,21 @@ const Binary: React.FC<{ arbitrable: `0x${string}`; voteIDs: string[] }> = ({ ar
       ],
     });
     if (walletClient) {
-      wrapWithToast(async () => await walletClient.writeContract(request), publicClient).finally(() => {
-        setChosenOption(-1);
-        setIsSending(false);
-      });
+      wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
+        .then(() => {
+          setIsOpen(true);
+        })
+        .finally(() => {
+          setChosenOption(-1);
+          setIsSending(false);
+        });
     }
   };
 
   return id ? (
     <Container>
       <MainContainer>
-        <h1>{disputeTemplate?.question}</h1>
+        <ReactMarkdown>{disputeTemplate.question}</ReactMarkdown>
         <StyledTextarea
           value={justification}
           onChange={(e) => setJustification(e.target.value)}
@@ -122,4 +133,4 @@ const Binary: React.FC<{ arbitrable: `0x${string}`; voteIDs: string[] }> = ({ ar
   );
 };
 
-export default Binary;
+export default Classic;
diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx
index 4504b438c..3fc351993 100644
--- a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx
+++ b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx
@@ -112,7 +112,9 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable })
             <p>
               {localRounds.at(currentTab)?.totalVoted === rounds.at(currentTab)?.nbVotes
                 ? "All jurors voted"
-                : localRounds.at(currentTab)?.totalVoted + " jurors voted out of " + rounds.at(currentTab)?.nbVotes}
+                : localRounds.at(currentTab)?.totalVoted.toString() +
+                  ` vote${localRounds.at(currentTab)?.totalVoted.toString() === "1" ? "" : "s"} cast out of ` +
+                  rounds.at(currentTab)?.nbVotes}
             </p>
           </StyledBox>
           <StyledAccordion
diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx
index 848525b56..d9c8ada77 100644
--- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/Voting/index.tsx
@@ -1,13 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useAccount } from "wagmi";
+import { useLockBodyScroll } from "react-use";
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { useDrawQuery } from "queries/useDrawQuery";
-import Binary from "./Binary";
+import Classic from "./Classic";
 import VotingHistory from "./VotingHistory";
+import Popup, { PopupType } from "components/Popup";
 import { Periods } from "consts/periods";
 import { isUndefined } from "utils/index";
+import { getPeriodEndTimestamp } from "components/DisputeCard";
 import { useDisputeKitClassicIsVoteActive } from "hooks/contracts/generated";
+import VoteIcon from "assets/svgs/icons/voted.svg";
+
+function formatDate(unixTimestamp: number): string {
+  const date = new Date(unixTimestamp * 1000);
+  const options: Intl.DateTimeFormatOptions = { month: "long", day: "2-digit", year: "numeric" };
+  return date.toLocaleDateString("en-US", options);
+}
 
 const Voting: React.FC<{
   arbitrable?: `0x${string}`;
@@ -24,14 +34,37 @@ const Voting: React.FC<{
     args: [BigInt(id ?? 0), roundId, voteId],
     watch: true,
   });
-  return drawData &&
-    !isUndefined(arbitrable) &&
-    currentPeriodIndex === Periods.vote &&
-    drawData.draws?.length > 0 &&
-    !voted ? (
-    <Binary {...{ arbitrable }} voteIDs={drawData.draws.map((draw) => draw.voteID)} />
-  ) : (
-    <VotingHistory {...{ arbitrable }} />
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  useLockBodyScroll(isPopupOpen);
+  const lastPeriodChange = disputeData?.dispute?.lastPeriodChange;
+  const timesPerPeriod = disputeData?.dispute?.court?.timesPerPeriod;
+  const finalDate =
+    !isUndefined(currentPeriodIndex) &&
+    !isUndefined(timesPerPeriod) &&
+    getPeriodEndTimestamp(lastPeriodChange, currentPeriodIndex, timesPerPeriod);
+
+  return (
+    <>
+      {isPopupOpen && (
+        <Popup
+          title="Thanks for Voting"
+          icon={VoteIcon}
+          popupType={disputeData?.court?.hiddenVotes ? PopupType.VOTE_WITHOUT_COMMIT : PopupType.VOTE_WITH_COMMIT}
+          date={finalDate ? formatDate(finalDate) : ""}
+          isCommit={false}
+          setIsOpen={setIsPopupOpen}
+        />
+      )}
+      {drawData &&
+      !isUndefined(arbitrable) &&
+      currentPeriodIndex === Periods.vote &&
+      drawData.draws?.length > 0 &&
+      !voted ? (
+        <Classic {...{ arbitrable }} setIsOpen={setIsPopupOpen} voteIDs={drawData.draws.map((draw) => draw.voteID)} />
+      ) : (
+        <VotingHistory {...{ arbitrable }} />
+      )}
+    </>
   );
 };
 
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
index f969070ec..b43e5aa7e 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
@@ -5,10 +5,8 @@ import { formatEther } from "viem";
 import { useDebounce } from "react-use";
 import { useAccount } from "wagmi";
 import { Field } from "@kleros/ui-components-library";
-
 import { useParsedAmount } from "hooks/useParsedAmount";
-import { usePNKBalance } from "queries/usePNKBalance";
-import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
+import { useKlerosCoreGetJurorBalance, usePnkBalanceOf } from "hooks/contracts/generated";
 import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
 import { isUndefined } from "utils/index";
 import { EnsureChain } from "components/EnsureChain";
@@ -39,17 +37,30 @@ interface IInputDisplay {
   action: ActionType;
   isSending: boolean;
   setIsSending: (arg0: boolean) => void;
+  setIsPopupOpen: (arg0: boolean) => void;
+  amount: string;
+  setAmount: (arg0: string) => void;
 }
 
-const InputDisplay: React.FC<IInputDisplay> = ({ action, isSending, setIsSending }) => {
-  const [amount, setAmount] = useState("");
+const InputDisplay: React.FC<IInputDisplay> = ({
+  action,
+  isSending,
+  setIsSending,
+  setIsPopupOpen,
+  amount,
+  setAmount,
+}) => {
   const [debouncedAmount, setDebouncedAmount] = useState("");
   useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
   const parsedAmount = useParsedAmount(debouncedAmount);
 
   const { id } = useParams();
   const { address } = useAccount();
-  const { data: balance } = usePNKBalance(address);
+  const { data: balance } = usePnkBalanceOf({
+    enabled: !isUndefined(address),
+    args: [address ?? "0x"],
+    watch: true,
+  });
   const parsedBalance = formatEther(balance ?? 0n);
   const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
     enabled: !isUndefined(address),
@@ -93,6 +104,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({ action, isSending, setIsSending
               setAmount,
               isSending,
               setIsSending,
+              setIsPopupOpen,
             }}
           />
         </EnsureChain>
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
index 6e0ed5686..f047c3b23 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
@@ -9,7 +9,7 @@ import DiceIcon from "svgs/icons/dice.svg";
 import LockerIcon from "svgs/icons/locker.svg";
 import PNKIcon from "svgs/icons/pnk.svg";
 import { useCourtDetails } from "queries/useCourtDetails";
-import { useJurorBalance } from "queries/useJurorBalance";
+import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
 
 const format = (value: bigint | undefined): string => (value !== undefined ? formatEther(value) : "0");
 
@@ -32,7 +32,11 @@ const formatBigIntPercentage = (numerator: bigint, denominator: bigint): string
 const JurorBalanceDisplay = () => {
   const { id } = useParams();
   const { address } = useAccount();
-  const { data: jurorBalance } = useJurorBalance(address, id);
+  const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
+    enabled: !isUndefined(address),
+    args: [address ?? "0x", BigInt(id ?? 0)],
+    watch: true,
+  });
   const { data: courtDetails } = useCourtDetails(id);
 
   const stakedByAllJurors = courtDetails?.court?.stake;
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
index 3c94541d8..962c44184 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
@@ -10,8 +10,8 @@ import {
   usePnkIncreaseAllowance,
   usePreparePnkIncreaseAllowance,
   useKlerosCoreGetJurorBalance,
+  usePnkAllowance,
 } from "hooks/contracts/generated";
-import { usePNKAllowance } from "queries/usePNKAllowance";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { isUndefined } from "utils/index";
 import { EnsureChain } from "components/EnsureChain";
@@ -28,11 +28,20 @@ interface IActionButton {
   action: ActionType;
   setIsSending: (arg0: boolean) => void;
   setAmount: (arg0: string) => void;
+  setIsPopupOpen: (arg0: boolean) => void;
 }
 
-const StakeWithdrawButton: React.FC<IActionButton> = ({ parsedAmount, action, setAmount, isSending, setIsSending }) => {
+const StakeWithdrawButton: React.FC<IActionButton> = ({
+  parsedAmount,
+  action,
+  setAmount,
+  isSending,
+  setIsSending,
+  setIsPopupOpen,
+}) => {
   const { id } = useParams();
   const { address } = useAccount();
+  const klerosCore = getKlerosCore({});
   const { data: balance } = usePnkBalanceOf({
     enabled: !isUndefined(address),
     args: [address!],
@@ -43,7 +52,11 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ parsedAmount, action, se
     args: [address ?? "0x", BigInt(id ?? 0)],
     watch: true,
   });
-  const { data: allowance } = usePNKAllowance(address);
+  const { data: allowance } = usePnkAllowance({
+    enabled: !isUndefined(address),
+    args: [address ?? "0x", klerosCore.address],
+    watch: true,
+  });
   const publicClient = usePublicClient();
 
   const isStaking = action === ActionType.stake;
@@ -62,7 +75,6 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ parsedAmount, action, se
     return 0n;
   }, [jurorBalance, parsedAmount, isAllowance, isStaking]);
 
-  const klerosCore = getKlerosCore({});
   const { config: increaseAllowanceConfig } = usePreparePnkIncreaseAllowance({
     enabled: isAllowance && !isUndefined(klerosCore) && !isUndefined(targetStake) && !isUndefined(allowance),
     args: [klerosCore?.address, BigInt(targetStake ?? 0) - BigInt(allowance ?? 0)],
@@ -87,11 +99,10 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ parsedAmount, action, se
   const handleStake = () => {
     if (typeof setStake !== "undefined") {
       setIsSending(true);
-      wrapWithToast(async () => await setStake().then((response) => response.hash), publicClient)
-        .then(() => {
-          setAmount("");
-        })
-        .finally(() => setIsSending(false));
+      wrapWithToast(async () => await setStake().then((response) => response.hash), publicClient).finally(() => {
+        setIsSending(false);
+        setIsPopupOpen(true);
+      });
     }
   };
 
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx
index 640d2c146..d814e9e56 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx
@@ -1,18 +1,22 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-
+import { useLockBodyScroll } from "react-use";
 import Tag from "components/Tag";
 import JurorBalanceDisplay from "./JurorStakeDisplay";
 import InputDisplay from "./InputDisplay";
 import { ActionType } from "./StakeWithdrawButton";
+import Popup, { PopupType } from "components/Popup/index";
+import BalanceIcon from "assets/svgs/icons/balance.svg";
 
-const StakePanel: React.FC<{ courtName: string }> = ({
-  courtName = "General Court",
-}) => {
+const StakePanel: React.FC<{ courtName: string; id: string }> = ({ courtName = "General Court", id }) => {
+  const [amount, setAmount] = useState("");
   const [isSending, setIsSending] = useState<boolean>(false);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [isActive, setIsActive] = useState<boolean>(true);
   const [action, setAction] = useState<ActionType>(ActionType.stake);
 
+  useLockBodyScroll(isPopupOpen);
+
   const handleClick = (action: ActionType) => {
     setIsActive(action === ActionType.stake);
     setAction(action);
@@ -22,25 +26,30 @@ const StakePanel: React.FC<{ courtName: string }> = ({
   return (
     <Container>
       <TagArea>
-        <Tag
-          text="Stake"
-          active={isActive}
-          onClick={() => handleClick(ActionType.stake)}
-        />
-        <Tag
-          text="Withdraw"
-          active={!isActive}
-          onClick={() => handleClick(ActionType.withdraw)}
-        />
+        <Tag text="Stake" active={isActive} onClick={() => handleClick(ActionType.stake)} />
+        <Tag text="Withdraw" active={!isActive} onClick={() => handleClick(ActionType.withdraw)} />
       </TagArea>
       <TextArea>
-        <strong>{`${isStaking ? "Stake" : "Withdraw"} PNK`}</strong>{" "}
-        {`${isStaking ? "to join the" : "from"}`} {courtName} court.
+        <strong>{`${isStaking ? "Stake" : "Withdraw"} PNK`}</strong> {`${isStaking ? "to join the" : "from"}`}{" "}
+        {courtName} court.
       </TextArea>
       <StakeArea>
-        <InputDisplay {...{ action, isSending, setIsSending }} />
+        <InputDisplay {...{ action, isSending, setIsSending, setIsPopupOpen, amount, setAmount }} />
         <JurorBalanceDisplay />
       </StakeArea>
+      {isPopupOpen && (
+        <Popup
+          title={isStaking ? "Stake Confirmed" : "Withdraw Confirmed"}
+          icon={BalanceIcon}
+          popupType={PopupType.STAKE_WITHDRAW}
+          isStake={isStaking}
+          pnkStaked={amount}
+          courtName={courtName}
+          courtId={id}
+          setIsOpen={setIsPopupOpen}
+          setAmount={setAmount}
+        />
+      )}
     </Container>
   );
 };
@@ -48,6 +57,7 @@ const StakePanel: React.FC<{ courtName: string }> = ({
 export default StakePanel;
 
 const Container = styled.div`
+  position: relative;
   width: 100%;
   margin-top: 32px;
   display: flex;
diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx
index a0fb7e591..82abe751d 100644
--- a/web/src/pages/Courts/CourtDetails/index.tsx
+++ b/web/src/pages/Courts/CourtDetails/index.tsx
@@ -5,7 +5,7 @@ import { useParams } from "react-router-dom";
 import { Card, Breadcrumb } from "@kleros/ui-components-library";
 import { useCourtPolicy } from "queries/useCourtPolicy";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
-
+import { isUndefined } from "utils/index";
 import Stats from "./Stats";
 import Description from "./Description";
 import StakePanel from "./StakePanel";
@@ -30,7 +30,7 @@ const CourtDetails: React.FC = () => {
         <hr />
         <Stats />
         <hr />
-        <StakePanel courtName={policy?.name} />
+        <StakePanel id={!isUndefined(id) ? id : ""} courtName={policy?.name} />
       </StyledCard>
       <StyledCard>
         <Description />
@@ -60,11 +60,7 @@ interface IItem {
   id: string;
 }
 
-const getCourtsPath = (
-  node: CourtTreeQuery["court"],
-  id: string | undefined,
-  path: IItem[] = []
-): IItem[] | null => {
+const getCourtsPath = (node: CourtTreeQuery["court"], id: string | undefined, path: IItem[] = []): IItem[] | null => {
   if (!node || !id) return null;
 
   if (node.id === id) {
diff --git a/web/src/pages/Dashboard/Courts/CourtCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard.tsx
index 822d898a1..b7d385d57 100644
--- a/web/src/pages/Dashboard/Courts/CourtCard.tsx
+++ b/web/src/pages/Dashboard/Courts/CourtCard.tsx
@@ -33,7 +33,7 @@ const tooltipMsg =
   "The locked stake of incoherent jurors is redistributed as incentives for " +
   "the coherent jurors.";
 
-const format = (value: bigint | undefined): string => (value !== undefined ? formatEther(value) : "0");
+export const format = (value: bigint | undefined): string => (value !== undefined ? formatEther(value) : "0");
 
 interface ICourtCard {
   id: string;
diff --git a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx
index 6554d9a3a..22b553844 100644
--- a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx
+++ b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx
@@ -18,22 +18,38 @@ const tooltipMsg =
   " using the number of times you have been coherent and the total cases you" +
   " have been in.";
 
+const levelTitles = [
+  { scoreRange: [0, 20], level: 0, title: "Diogenes" },
+  { scoreRange: [20, 40], level: 1, title: "Pythagoras" },
+  { scoreRange: [40, 60], level: 2, title: "Socrates" },
+  { scoreRange: [60, 80], level: 3, title: "Plato" },
+  { scoreRange: [80, 100], level: 4, title: "Aristotle" },
+];
+
 const Coherency: React.FC = () => {
   const { address } = useAccount();
   const { data } = useUserQuery(address?.toLowerCase());
   const totalCoherent = parseInt(data?.user?.totalCoherent) ?? 0;
   const totalResolvedDisputes = parseInt(data?.user?.totalResolvedDisputes) ?? 1;
   const coherencyScore = calculateCoherencyScore(totalCoherent, totalResolvedDisputes);
+  const roundedCoherencyScore = Math.round(coherencyScore * 100);
+
+  const { level, title } =
+    levelTitles.find(({ scoreRange }) => {
+      return roundedCoherencyScore >= scoreRange[0] && roundedCoherencyScore < scoreRange[1];
+    }) ?? levelTitles[0];
 
   return (
     <Container>
-      <small>Aristotle</small>
-      <label>Level 4</label>
-      <CircularProgress progress={(totalCoherent / Math.max(totalResolvedDisputes, 1)) * 100} />
+      <small>{title}</small>
+      <label>Level {level}</label>
+      <CircularProgress
+        progress={parseFloat(((totalCoherent / Math.max(totalResolvedDisputes, 1)) * 100).toFixed(2))}
+      />
       <WithHelpTooltip place="left" {...{ tooltipMsg }}>
         <label>
           Coherency Score:
-          <small> {coherencyScore.toFixed(3)} </small>
+          <small> {coherencyScore.toFixed(2)} </small>
         </label>
       </WithHelpTooltip>
     </Container>
diff --git a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
index 19679c151..4edf67170 100644
--- a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
+++ b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import _ETH from "assets/svgs/styled/eth.svg";
-import _PNK from "assets/svgs/styled/pnk.svg";
+import GradientTokenIcons from "components/GradientTokenIcons";
 
 const RewardContainer = styled.div`
   display: flex;
@@ -10,14 +9,6 @@ const RewardContainer = styled.div`
   gap: 8px;
 `;
 
-const ETH = styled(_ETH)`
-  stroke: ${({ theme }) => theme.secondaryBlue};
-`;
-
-const PNK = styled(_PNK)`
-  stroke: ${({ theme }) => theme.secondaryBlue};
-`;
-
 const StyledH1 = styled.h1`
   margin: 0;
 `;
@@ -31,7 +22,7 @@ interface ITokenRewards {
 const TokenRewards: React.FC<ITokenRewards> = ({ token, amount, value }) => {
   return (
     <RewardContainer>
-      {token === "ETH" ? <ETH /> : <PNK />}
+      {token && <GradientTokenIcons icon={token} />}
       <StyledH1>
         {amount} {token}
       </StyledH1>