feat: jurors page

subgraph/core/schema.graphql

@@ -237,6 +237,7 @@ type Counter @entity {
   casesVoting: BigInt!
   casesRuled: BigInt!
   casesAppealing: BigInt!
+  totalLeaderboardJurors: BigInt!
 }
 
 type FeeToken @entity {

subgraph/core/src/KlerosCore.ts

@@ -18,13 +18,19 @@ import { createCourtFromEvent } from "./entities/Court";
 import { createDisputeKitFromEvent, filterSupportedDisputeKits } from "./entities/DisputeKit";
 import { createDisputeFromEvent } from "./entities/Dispute";
 import { createRoundFromRoundInfo, updateRoundTimeline } from "./entities/Round";
-import { updateCases, updateCasesAppealing, updateCasesRuled, updateCasesVoting } from "./datapoint";
+import {
+  updateCases,
+  updateCasesAppealing,
+  updateCasesRuled,
+  updateCasesVoting,
+  updateTotalLeaderboardJurors,
+} from "./datapoint";
 import { addUserActiveDispute, computeCoherenceScore, ensureUser } from "./entities/User";
 import { updateJurorStake } from "./entities/JurorTokensPerCourt";
 import { createDrawFromEvent } from "./entities/Draw";
 import { updateTokenAndEthShiftFromEvent } from "./entities/TokenAndEthShift";
 import { updateArbitrableCases } from "./entities/Arbitrable";
-import { ClassicVote, Court, Dispute, Draw, Round, User } from "../generated/schema";
+import { ClassicVote, Counter, Court, Dispute, Draw, Round, User } from "../generated/schema";
 import { BigInt } from "@graphprotocol/graph-ts";
 import { updatePenalty } from "./entities/Penalty";
 import { ensureFeeToken } from "./entities/FeeToken";
@@ -139,13 +145,23 @@ export function handleNewPeriod(event: NewPeriod): void {
         const draw = Draw.load(draws[j].id);
         if (!draw) continue;
 
+        const juror = ensureUser(draw.juror);
+        juror.totalResolvedVotes = juror.totalResolvedVotes.plus(ONE);
+
+        // Increment totalLeaderboardJurors in the Counter entity if this is the first resolved vote for the juror
+        if (juror.totalResolvedVotes.equals(ONE)) {
+          updateTotalLeaderboardJurors(ONE, event.block.timestamp);
+        }
+
         // Since this is a ClassicVote entity, this will only work for the Classic DisputeKit (which has ID "1").
         const vote = ClassicVote.load(`${round.disputeKit}-${draw.id}`);
 
-        if (!vote) continue;
-
-        const juror = ensureUser(draw.juror);
-        juror.totalResolvedVotes = juror.totalResolvedVotes.plus(ONE);
+        if (!vote) {
+          // Recalculate coherenceScore
+          juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes);
+          juror.save();
+          continue;
+        }
 
         if (vote.choice === null) continue;
 
@@ -155,9 +171,7 @@ export function handleNewPeriod(event: NewPeriod): void {
         }
 
         // Recalculate coherenceScore
-        if (juror.totalResolvedVotes.gt(ZERO)) {
-          juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes);
-        }
+        juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes);
 
         juror.save();
       }

subgraph/core/src/datapoint.ts

@@ -15,6 +15,7 @@ const VARIABLES = [
   "casesVoting",
   "casesRuled",
   "casesAppealing",
+  "totalLeaderboardJurors",
 ];
 
 function updateDataPoint(delta: BigInt, timestamp: BigInt, variable: string): void {
@@ -43,6 +44,7 @@ function checkFirstDayActivity(): void {
     counter.casesVoting = ZERO;
     counter.casesRuled = ZERO;
     counter.casesAppealing = ZERO;
+    counter.totalLeaderboardJurors = ZERO;
     counter.save();
   }
 }
@@ -86,3 +88,7 @@ export function updateCasesRuled(delta: BigInt, timestamp: BigInt): void {
 export function updateCasesAppealing(delta: BigInt, timestamp: BigInt): void {
   updateDataPoint(delta, timestamp, "casesAppealing");
 }
+
+export function updateTotalLeaderboardJurors(delta: BigInt, timestamp: BigInt): void {
+  updateDataPoint(delta, timestamp, "totalLeaderboardJurors");
+}

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

web/src/app.tsx

@@ -14,8 +14,9 @@ import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
 const Home = lazy(() => import("./pages/Home"));
 const Cases = lazy(() => import("./pages/Cases"));
-const Dashboard = lazy(() => import("./pages/Dashboard"));
+const Profile = lazy(() => import("./pages/Profile"));
 const Courts = lazy(() => import("./pages/Courts"));
+const Jurors = lazy(() => import("./pages/Jurors"));
 const DisputeResolver = lazy(() => import("./pages/Resolver"));
 const GetPnk = lazy(() => import("./pages/GetPnk"));
 const Settings = lazy(() => import("./pages/Settings"));
@@ -64,10 +65,18 @@ const App: React.FC = () => {
                           }
                         />
                         <Route
-                          path="dashboard/:page/:order/:filter"
+                          path="jurors/:page/:order/:filter"
                           element={
                             <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                              <Dashboard />
+                              <Jurors />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="profile/:page/:order/:filter"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <Profile />
                             </Suspense>
                           }
                         />

web/src/components/EvidenceCard.tsx

@@ -8,7 +8,6 @@ import { Card } from "@kleros/ui-components-library";
 
 import AttachmentIcon from "svgs/icons/attachment.svg";
 
-import { DEFAULT_CHAIN, getChain } from "consts/chains";
 import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
@@ -224,7 +223,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
   description,
   fileURI,
 }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${sender}`;
+  const profileLink = `/profile/1/desc/all?address=${sender}`;
 
   const transactionExplorerLink = useMemo(() => {
     return getTxnExplorerLink(transactionHash ?? "");
@@ -249,7 +248,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
         <BottomLeftContent>
           <AccountContainer>
             <Identicon size="24" string={sender} />
-            <InternalLink to={dashboardLink}>
+            <InternalLink to={profileLink}>
               <Address>{shortenAddress(sender)}</Address>
             </InternalLink>
           </AccountContainer>

web/src/components/Popup/MiniGuides/JurorLevels.tsx

@@ -5,8 +5,8 @@ import { Card as _Card } from "@kleros/ui-components-library";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import Coherence from "pages/Dashboard/JurorInfo/Coherence";
-import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
+import Coherence from "pages/Profile/JurorInfo/Coherence";
+import PixelArt from "pages/Profile/JurorInfo/PixelArt";
 
 import Template from "./MainStructureTemplate";
 import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate";
@@ -35,16 +35,16 @@ const leftPageContents = [
     title: "Juror Level 1: Pythagoras",
     paragraphs: [
       "Jurors are classified into distinct levels according to their performance starting from Level 1.",
-      "Level 1: Jurors with 0 cases arbitrated, OR Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
+      "Level 1: Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
     ],
   },
   {
     title: "Juror Level 2: Socrates",
-    paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with 70%-80% of coherent votes."],
+    paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with more than 70% coherent votes."],
   },
   {
     title: "Juror Level 3: Plato",
-    paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with 80%-90% of coherent votes."],
+    paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with more than 80% of coherent votes."],
   },
   {
     title: "Juror Level 4: Aristotle",

web/src/hooks/queries/useJurorsByCoherenceScore.ts

@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { isUndefined } from "utils/index";
+
+import { graphql } from "src/graphql";
+import { JurorsByCoherenceScoreQuery } from "src/graphql/graphql";
+export type { JurorsByCoherenceScoreQuery };
+
+const jurorsByCoherenceScoreQuery = graphql(`
+  query JurorsByCoherenceScore($skip: Int, $first: Int, $orderBy: User_orderBy, $orderDirection: OrderDirection) {
+    users(
+      first: $first
+      skip: $skip
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { totalResolvedVotes_gt: 0 }
+    ) {
+      id
+      coherenceScore
+      totalCoherentVotes
+      totalResolvedVotes
+      totalResolvedDisputes
+    }
+  }
+`);
+
+export const useJurorsByCoherenceScore = (skip = 0, first = 20, orderBy: string, orderDirection: string) => {
+  const isEnabled = !isUndefined(first);
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery<JurorsByCoherenceScoreQuery>({
+    queryKey: [`JurorsByCoherenceScore`, skip, first, orderBy, orderDirection],
+    enabled: isEnabled,
+    staleTime: Infinity,
+    queryFn: async () =>
+      isEnabled
+        ? await graphqlBatcher.fetch({
+            id: crypto.randomUUID(),
+            document: jurorsByCoherenceScoreQuery,
+            variables: {
+              skip,
+              first,
+              orderBy,
+              orderDirection,
+            },
+          })
+        : undefined,
+  });
+};

web/src/hooks/queries/useTotalLeaderboardJurors.ts

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+
+import { graphql } from "src/graphql";
+import { TotalLeaderboardJurorsQuery } from "src/graphql/graphql";
+export type { TotalLeaderboardJurorsQuery };
+
+const totalLeaderboardJurorsQuery = graphql(`
+  query TotalLeaderboardJurors($id: ID!) {
+    counter(id: $id) {
+      totalLeaderboardJurors
+    }
+  }
+`);
+
+export const useTotalLeaderboardJurors = () => {
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery<TotalLeaderboardJurorsQuery>({
+    queryKey: [`TotalLeaderboardJurors`],
+    staleTime: Infinity,
+    queryFn: async () =>
+      await graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: totalLeaderboardJurorsQuery,
+        variables: {
+          id: 0,
+        },
+      }),
+  });
+};

web/src/layout/Header/navbar/Explore.tsx

@@ -54,7 +54,7 @@ const links = [
   { to: "/", text: "Home" },
   { to: "/cases/display/1/desc/all", text: "Cases" },
   { to: "/courts", text: "Courts" },
-  { to: "/dashboard/1/desc/all", text: "Dashboard" },
+  { to: "/jurors/1/desc/all", text: "Jurors" },
   { to: "/get-pnk", text: "Get PNK" },
 ];
 

web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+
+import ArrowIcon from "svgs/icons/arrow.svg";
+
+import { AddressOrName, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay";
+import { StyledArrowLink } from "components/StyledArrowLink";
+import { ISettings } from "../../../index";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 32px;
+  gap: 24px;
+  border: 1px solid ${({ theme }) => theme.stroke};
+  border-radius: 30px;
+
+  > label {
+    color: ${({ theme }) => theme.primaryText};
+    font-size: 16px;
+    font-weight: 600;
+  }
+`;
+
+const AvatarAndAddressContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+`;
+
+const ReStyledArrowLink = styled(StyledArrowLink)`
+  font-size: 14px;
+
+  > svg {
+    height: 14px;
+    width: 14px;
+  }
+`;
+
+const WalletAndProfile: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
+  return (
+    <Container>
+      <AvatarAndAddressContainer>
+        <IdenticonOrAvatar />
+        <AddressOrName />
+      </AvatarAndAddressContainer>
+      <ReStyledArrowLink to={"/profile/1/desc/all"} onClick={toggleIsSettingsOpen}>
+        My Profile <ArrowIcon />
+      </ReStyledArrowLink>
+    </Container>
+  );
+};
+export default WalletAndProfile;

web/src/layout/Header/navbar/Menu/Settings/General.tsx → web/src/layout/Header/navbar/Menu/Settings/General/index.tsx

@@ -1,12 +1,14 @@
-import React, { useMemo } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { useAccount, useDisconnect } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
-import { AddressOrName, ChainDisplay, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay";
+import { ChainDisplay } from "components/ConnectWallet/AccountDisplay";
 import { EnsureChain } from "components/EnsureChain";
+import WalletAndProfile from "./WalletAndProfile";
+import { ISettings } from "../../../index";
 
 const Container = styled.div`
   display: flex;
@@ -33,22 +35,6 @@ const StyledChainContainer = styled.div`
   }
 `;
 
-const StyledAddressContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  > label {
-    color: ${({ theme }) => theme.primaryText};
-    font-size: 16px;
-    font-weight: 600;
-  }
-`;
-
-const StyledAvatarContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 12px;
-`;
-
 const StyledButton = styled.div`
   display: flex;
   justify-content: center;
@@ -67,47 +53,24 @@ const UserContainer = styled.div`
   gap: 12px;
 `;
 
-const StyledA = styled.a`
-  text-decoration: none;
-  label {
-    cursor: pointer;
-    color: ${({ theme }) => theme.primaryBlue};
-  }
-
-  :hover {
-    text-decoration: underline;
-  }
-`;
-
 export const DisconnectWalletButton: React.FC = () => {
   const { disconnect } = useDisconnect();
   return <Button text={`Disconnect`} onClick={() => disconnect()} />;
 };
 
-const General: React.FC = () => {
-  const { address, chain } = useAccount();
-
-  const addressExplorerLink = useMemo(() => {
-    return `${chain?.blockExplorers?.default.url}/address/${address}`;
-  }, [address, chain]);
+const General: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
+  const { address } = useAccount();
 
   return (
     <EnsureChainContainer>
       <EnsureChain>
         <Container>
           {address && (
             <UserContainer>
-              <StyledAvatarContainer>
-                <IdenticonOrAvatar size="48" />
-              </StyledAvatarContainer>
-              <StyledAddressContainer>
-                <StyledA href={addressExplorerLink} rel="noreferrer" target="_blank">
-                  <AddressOrName />
-                </StyledA>
-              </StyledAddressContainer>
               <StyledChainContainer>
                 <ChainDisplay />
               </StyledChainContainer>
+              <WalletAndProfile {...{ toggleIsSettingsOpen }} />
               <StyledButton>
                 <DisconnectWalletButton />
               </StyledButton>

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -91,7 +91,11 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
           setCurrentTab(n);
         }}
       />
-      {currentTab === 0 ? <General /> : <NotificationSettings {...{ toggleIsSettingsOpen }} />}
+      {currentTab === 0 ? (
+        <General {...{ toggleIsSettingsOpen }} />
+      ) : (
+        <NotificationSettings {...{ toggleIsSettingsOpen }} />
+      )}
     </Container>
   );
 };

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx

@@ -88,13 +88,13 @@ const AccordionTitle: React.FC<{
   commited: boolean;
   hiddenVotes: boolean;
 }> = ({ juror, choice, voteCount, period, answers, isActiveRound, commited, hiddenVotes }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${juror}`;
+  const profileLink = `/profile/1/desc/all?address=${juror}`;
 
   return (
     <TitleContainer>
       <AddressContainer>
         <Identicon size="20" string={juror} />
-        <StyledInternalLink to={dashboardLink}>
+        <StyledInternalLink to={profileLink}>
           <StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
         </StyledInternalLink>
       </AddressContainer>

web/src/pages/Courts/CourtDetails/TopSearch.tsx

@@ -68,6 +68,8 @@ const SearchResultsContainer = styled(OverlayScrollbarsComponent)`
   overflow-y: auto;
   z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 `;
 
 const StyledCard = styled(Card)<{ selected: boolean }>`
@@ -79,6 +81,7 @@ const StyledCard = styled(Card)<{ selected: boolean }>`
   border: none;
   border-left: ${({ selected, theme }) => (selected ? `3px solid ${theme.primaryBlue}` : "none")};
   background-color: ${({ selected, theme }) => (selected ? theme.mediumBlue : "transparent")};
+  border-radius: 0;
 
   :hover {
     background-color: ${({ theme }) => theme.mediumBlue};

web/src/pages/Home/CourtOverview/Stats.tsx

@@ -37,7 +37,7 @@ const StyledCard = styled(Card)`
   )}
 `;
 
-const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) =>
+export const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) =>
   src.length > 0 ? src.at(-1)?.[stat] : 0n.toString();
 
 interface IStat {

web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx

@@ -11,21 +11,24 @@ const Container = styled.div`
   justify-content: center;
 `;
 
+export const getPercent = (num: number, den: number): string => {
+  if (den === 0) return "0%";
+  return `${Math.floor((num * 100) / den)}%`;
+};
+
 interface ICoherence {
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
 }
 
 const Coherence: React.FC<ICoherence> = ({ totalCoherentVotes, totalResolvedVotes }) => {
   const coherenceRatio = `${totalCoherentVotes}/${totalResolvedVotes}`;
 
   return (
     <Container>
-      <Tooltip text={coherenceRatio}>{getPercent(totalCoherentVotes, totalResolvedVotes)}</Tooltip>
+      <Tooltip text={coherenceRatio}>{getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}</Tooltip>
     </Container>
   );
 };
 
-const getPercent = (num: number, den: number): string => `${Math.floor((num * 100) / den)}%`;
-
 export default Coherence;

web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx

@@ -39,10 +39,10 @@ const Container = styled.div`
 interface IDesktopCard {
   rank: number;
   address: string;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
-  coherenceScore: number;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
+  coherenceScore: string;
 }
 
 const DesktopCard: React.FC<IDesktopCard> = ({
@@ -59,7 +59,7 @@ const DesktopCard: React.FC<IDesktopCard> = ({
       <JurorTitle address={address} />
       <Rewards address={address} />
       <Coherence {...{ totalCoherentVotes, totalResolvedVotes }} />
-      <JurorLevel {...{ coherenceScore, totalResolvedDisputes }} />
+      <JurorLevel {...{ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }} />
     </Container>
   );
 };

web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx

@@ -5,7 +5,8 @@ import { getUserLevelData } from "utils/userLevelCalculation";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
+import PixelArt from "pages/Profile/JurorInfo/PixelArt";
+import { getPercent } from "./Coherence";
 
 const Container = styled.div`
   display: flex;
@@ -39,12 +40,14 @@ const StyledLabel = styled.label`
 `;
 
 interface IJurorLevel {
-  coherenceScore: number;
-  totalResolvedDisputes: number;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
 }
 
-const JurorLevel: React.FC<IJurorLevel> = ({ coherenceScore, totalResolvedDisputes }) => {
-  const userLevelData = getUserLevelData(coherenceScore, totalResolvedDisputes);
+const JurorLevel: React.FC<IJurorLevel> = ({ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }) => {
+  const coherencePercentage = getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
+  const userLevelData = getUserLevelData(coherencePercentage, Number(totalResolvedDisputes));
   const level = userLevelData.level;
 
   return (

web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx

@@ -1,8 +1,11 @@
 import React from "react";
 import styled from "styled-components";
 
+import ArrowIcon from "svgs/icons/arrow.svg";
+
 import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay";
-import { InternalLink } from "components/InternalLink";
+import { StyledArrowLink } from "components/StyledArrowLink";
+import { useAccount } from "wagmi";
 
 const Container = styled.div`
   display: flex;
@@ -20,10 +23,14 @@ const Container = styled.div`
   }
 `;
 
-const StyledInternalLink = styled(InternalLink)`
+export const ReStyledArrowLink = styled(StyledArrowLink)`
+  label {
+    cursor: pointer;
+    color: ${({ theme }) => theme.primaryBlue};
+  }
+
   :hover {
     label {
-      cursor: pointer;
       color: ${({ theme }) => theme.secondaryBlue};
     }
   }
@@ -34,15 +41,21 @@ interface IJurorTitle {
 }
 
 const JurorTitle: React.FC<IJurorTitle> = ({ address }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${address}`;
+  const { isConnected, address: connectedAddress } = useAccount();
+  const profileLink =
+    isConnected && connectedAddress?.toLowerCase() === address.toLowerCase()
+      ? "/profile/1/desc/all"
+      : `/profile/1/desc/all?address=${address}`;
 
   return (
     <Container>
       <IdenticonOrAvatar address={address} />
-      <StyledInternalLink to={dashboardLink}>
+      <ReStyledArrowLink to={profileLink}>
         <AddressOrName address={address} />
-      </StyledInternalLink>
+        <ArrowIcon />
+      </ReStyledArrowLink>
     </Container>
   );
 };
+
 export default JurorTitle;

web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx

@@ -80,10 +80,10 @@ const HeaderCoherenceAndCoherence = styled.div`
 interface IMobileCard {
   rank: number;
   address: string;
-  coherenceScore: number;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
+  coherenceScore: string;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
 }
 
 const MobileCard: React.FC<IMobileCard> = ({
@@ -101,7 +101,7 @@ const MobileCard: React.FC<IMobileCard> = ({
           <Rank rank={rank} />
           <JurorTitle address={address} />
         </RankAndTitle>
-        <JurorLevel {...{ coherenceScore, totalResolvedDisputes }} />
+        <JurorLevel {...{ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }} />
       </TopSide>
       <BottomSide>
         <HeaderRewardsAndRewards>

web/src/pages/Home/TopJurors/JurorCard/index.tsx

@@ -6,10 +6,10 @@ import MobileCard from "./MobileCard";
 interface IJurorCard {
   rank: number;
   address: `0x${string}`;
-  coherenceScore: number;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
+  coherenceScore: string;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
 }
 
 const JurorCard: React.FC<IJurorCard> = ({

web/src/pages/Home/TopJurors/index.tsx

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 
 import { isUndefined } from "utils/index";
 
-import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore";
+import { useJurorsByCoherenceScore } from "queries/useJurorsByCoherenceScore";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
@@ -22,7 +22,7 @@ const Title = styled.h1`
   font-size: ${responsiveSize(20, 24)};
 `;
 
-const ListContainer = styled.div`
+export const ListContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -35,12 +35,12 @@ const ListContainer = styled.div`
   )}
 `;
 
-const StyledLabel = styled.label`
+export const StyledLabel = styled.label`
   font-size: 16px;
 `;
 
 const TopJurors: React.FC = () => {
-  const { data: queryJurors } = useTopUsersByCoherenceScore();
+  const { data: queryJurors } = useJurorsByCoherenceScore(0, 5, "coherenceScore", "desc");
 
   const topJurors = queryJurors?.users?.map((juror, index) => ({
     ...juror,

web/src/pages/Jurors/DisplayJurors.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+import { isUndefined } from "utils/index";
+import { StandardPagination } from "@kleros/ui-components-library";
+
+import { useJurorsByCoherenceScore } from "queries/useJurorsByCoherenceScore";
+import useIsDesktop from "hooks/useIsDesktop";
+
+import { OrderDirection } from "src/graphql/graphql";
+
+import { SkeletonDisputeListItem } from "components/StyledSkeleton";
+import JurorCard from "../Home/TopJurors/JurorCard";
+import { ListContainer, StyledLabel } from "../Home/TopJurors";
+import Header from "../Home/TopJurors/Header";
+
+interface IDisplayJurors {
+  totalLeaderboardJurors: number;
+}
+
+const StyledPagination = styled(StandardPagination)`
+  margin-top: 24px;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) => {
+  const { page, order, filter } = useParams();
+  const navigate = useNavigate();
+  const isDesktop = useIsDesktop();
+  const jurorsPerPage = isDesktop ? 20 : 10;
+  const currentPage = parseInt(page ?? "1");
+
+  const jurorSkip = jurorsPerPage * (currentPage - 1);
+
+  const { data: queryJurors } = useJurorsByCoherenceScore(
+    jurorSkip,
+    jurorsPerPage,
+    "coherenceScore",
+    order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
+  );
+
+  const jurors = useMemo(
+    () =>
+      queryJurors?.users?.map((juror, index) => ({
+        ...juror,
+        rank: jurorSkip + index + 1,
+      })),
+    [queryJurors, jurorSkip]
+  );
+
+  const totalPages = useMemo(
+    () => Math.ceil(totalLeaderboardJurors / jurorsPerPage),
+    [totalLeaderboardJurors, jurorsPerPage]
+  );
+
+  const handlePageChange = (newPage: number) => {
+    navigate(`/jurors/${newPage}/${order}/${filter}`);
+  };
+
+  return (
+    <>
+      {!isUndefined(jurors) && jurors.length === 0 ? (
+        <StyledLabel>There are no jurors staked yet.</StyledLabel>
+      ) : (
+        <>
+          <ListContainer>
+            <Header />
+            {!isUndefined(jurors)
+              ? jurors.map((juror) => <JurorCard key={juror.rank} address={juror.id} {...juror} />)
+              : [...Array(jurorsPerPage)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
+          </ListContainer>
+          <StyledPagination currentPage={currentPage} numPages={totalPages} callback={handlePageChange} />
+        </>
+      )}
+    </>
+  );
+};
+
+export default DisplayJurors;

web/src/pages/Jurors/Search.tsx

@@ -0,0 +1,58 @@
+import React, { useRef, useState } from "react";
+import styled from "styled-components";
+
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useDebounce } from "react-use";
+import { Searchbar } from "@kleros/ui-components-library";
+
+import { isEmpty } from "utils/index";
+import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
+
+const StyledSearchbar = styled(Searchbar)`
+  width: 100%;
+
+  input {
+    font-size: 16px;
+    height: 45px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+
+const Search: React.FC = () => {
+  const { page, order, filter } = useParams();
+  const location = useRootPath();
+  const decodedFilter = decodeURIFilter(filter ?? "all");
+  const { id: searchValue, ...filterObject } = decodedFilter;
+  const [search, setSearch] = useState(searchValue ?? "");
+  const initialRenderRef = useRef(true);
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  useDebounce(
+    () => {
+      if (initialRenderRef.current && isEmpty(search)) {
+        initialRenderRef.current = false;
+        return;
+      }
+      initialRenderRef.current = false;
+      const newFilters = isEmpty(search) ? { ...filterObject } : { ...filterObject, id: search };
+      const encodedFilter = encodeURIFilter(newFilters);
+      navigate(`${location}/${page}/${order}/${encodedFilter}?${searchParams.toString()}`);
+    },
+    500,
+    [search]
+  );
+
+  return (
+    <StyledSearchbar
+      dir="auto"
+      type="text"
+      placeholder="Search"
+      value={search}
+      onChange={(e) => setSearch(e.target.value)}
+    />
+  );
+};
+
+export default Search;

web/src/pages/Jurors/Stats.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+
+import Skeleton from "react-loading-skeleton";
+
+import { isUndefined } from "utils/index";
+
+const FieldWrapper = styled.div`
+  display: inline-flex;
+  gap: 8px;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const ValueAndExtraLabel = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+const Field: React.FC<{ label: string; value?: number; extraLabel?: string }> = ({ label, value, extraLabel }) => (
+  <FieldWrapper>
+    <StyledLabel>{label}</StyledLabel>
+    <ValueAndExtraLabel>
+      <small>{!isUndefined(value) ? value : <Skeleton width={16} />}</small>
+      {extraLabel ? <small>{extraLabel}</small> : null}
+    </ValueAndExtraLabel>
+  </FieldWrapper>
+);
+
+export interface IStats {
+  totalJurors?: number;
+}
+
+const Stats: React.FC<IStats> = ({ totalJurors }) => {
+  const value = !isUndefined(totalJurors) ? totalJurors : undefined;
+  return <Field label="Total" value={value} extraLabel="Jurors" />;
+};
+
+export default Stats;

web/src/pages/Jurors/StatsAndFilters.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+
+import { responsiveSize } from "styles/responsiveSize";
+import Stats, { IStats } from "./Stats";
+
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: ${responsiveSize(12, 13)};
+  margin-bottom: ${responsiveSize(16, 32)};
+  justify-content: space-between;
+`;
+
+const StatsAndFilters: React.FC<IStats> = ({ totalJurors }) => (
+  <Container>
+    <Stats {...{ totalJurors }} />
+  </Container>
+);
+
+export default StatsAndFilters;

web/src/pages/Jurors/index.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+import Skeleton from "react-loading-skeleton";
+import { useAccount } from "wagmi";
+
+import { isUndefined } from "utils/index";
+
+import { useTotalLeaderboardJurors } from "queries/useTotalLeaderboardJurors";
+
+import ArrowIcon from "svgs/icons/arrow.svg";
+
+import Search from "./Search";
+import StatsAndFilters from "./StatsAndFilters";
+import DisplayJurors from "./DisplayJurors";
+import { StyledArrowLink } from "components/StyledArrowLink";
+import ConnectWallet from "components/ConnectWallet";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.lightBackground};
+  padding: 32px 16px 40px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
+  margin: 0 auto;
+
+  ${landscapeStyle(
+    () => css`
+      padding: 48px ${responsiveSize(0, 132)} 60px;
+    `
+  )}
+`;
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: ${responsiveSize(12, 24)};
+  gap: 4px;
+`;
+
+const StyledTitle = styled.h1`
+  margin: 0px;
+  font-size: ${responsiveSize(20, 24)};
+`;
+
+const Jurors: React.FC = () => {
+  const { data: queryTotalLeaderBoardJurors } = useTotalLeaderboardJurors();
+  const totalLeaderboardJurors = queryTotalLeaderBoardJurors?.counter?.totalLeaderboardJurors;
+  const { isConnected } = useAccount();
+
+  return (
+    <Container>
+      <Header>
+        <StyledTitle>Jurors Leaderboard</StyledTitle>
+        {isConnected ? (
+          <StyledArrowLink to={"/profile/1/desc/all"}>
+            My Profile <ArrowIcon />
+          </StyledArrowLink>
+        ) : (
+          <ConnectWallet />
+        )}
+      </Header>
+      <Search />
+      <StatsAndFilters totalJurors={totalLeaderboardJurors} />
+      {!isUndefined(totalLeaderboardJurors) && Number(totalLeaderboardJurors) > 0 ? (
+        <DisplayJurors totalLeaderboardJurors={Number(totalLeaderboardJurors)} />
+      ) : (
+        <Skeleton height={1000} />
+      )}
+    </Container>
+  );
+};
+
+export default Jurors;

web/src/pages/Dashboard/JurorInfo/Header.tsx → web/src/pages/Profile/JurorInfo/Header.tsx

@@ -87,7 +87,7 @@ const Header: React.FC<IHeader> = ({
   return (
     <Container>
       <StyledTitle>
-        Juror Dashboard -
+        Juror Profile -
         <Copiable copiableContent={addressToQuery} info="Copy Address">
           <StyledExternalLink to={addressExplorerLink} target="_blank" rel="noopener noreferrer">
             {shortenAddress(addressToQuery)}

web/src/pages/Dashboard/JurorInfo/index.tsx → web/src/pages/Profile/JurorInfo/index.tsx

@@ -14,6 +14,7 @@ import Coherence from "./Coherence";
 import Header from "./Header";
 import JurorRewards from "./JurorRewards";
 import PixelArt from "./PixelArt";
+import { getPercent } from "pages/Home/TopJurors/JurorCard/Coherence";
 
 const Container = styled.div``;
 
@@ -43,13 +44,11 @@ interface IJurorInfo {
 
 const JurorInfo: React.FC<IJurorInfo> = ({ addressToQuery }) => {
   const { data } = useUserQuery(addressToQuery);
-  // TODO check graph schema
-  const coherenceScore = data?.user ? parseInt(data?.user?.coherenceScore) : 0;
   const totalCoherentVotes = data?.user ? parseInt(data?.user?.totalCoherentVotes) : 0;
   const totalResolvedVotes = data?.user ? parseInt(data?.user?.totalResolvedVotes) : 0;
   const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 0;
-
-  const userLevelData = getUserLevelData(coherenceScore, totalResolvedDisputes);
+  const coherencePercentage = getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
+  const userLevelData = getUserLevelData(coherencePercentage, totalResolvedDisputes);
 
   return (
     <Container>

web/src/pages/Dashboard/index.tsx → web/src/pages/Profile/index.tsx

@@ -50,7 +50,7 @@ const ConnectWalletContainer = styled.div`
   color: ${({ theme }) => theme.primaryText};
 `;
 
-const Dashboard: React.FC = () => {
+const Profile: React.FC = () => {
   const { isConnected, address: connectedAddress } = useAccount();
   const { page, order, filter } = useParams();
   const [searchParams] = useSearchParams();
@@ -97,7 +97,7 @@ const Dashboard: React.FC = () => {
         </>
       ) : (
         <ConnectWalletContainer>
-          To see your dashboard, connect first
+          To see your profile, connect first
           <hr />
           <ConnectWallet />
         </ConnectWalletContainer>
@@ -108,4 +108,4 @@ const Dashboard: React.FC = () => {
   );
 };
 
-export default Dashboard;
+export default Profile;

web/src/utils/userLevelCalculation.ts

@@ -2,24 +2,27 @@ interface ILevelCriteria {
   level: number;
   title: string;
   minDisputes: number;
-  minScore: number;
-  maxScore: number;
+  minCoherencePercentage: number;
+  maxCoherencePercentage: number;
 }
 
 const levelCriteria: ILevelCriteria[] = [
-  { level: 4, title: "Aristotle", minDisputes: 10, minScore: 91, maxScore: 100 },
-  { level: 3, title: "Plato", minDisputes: 7, minScore: 81, maxScore: 90 },
-  { level: 2, title: "Socrates", minDisputes: 3, minScore: 71, maxScore: 80 },
-  { level: 1, title: "Pythagoras", minDisputes: 0, minScore: 0, maxScore: 70 },
-  { level: 0, title: "Diogenes", minDisputes: 3, minScore: 0, maxScore: 49 },
+  { level: 4, title: "Aristotle", minDisputes: 10, minCoherencePercentage: 90, maxCoherencePercentage: 100 },
+  { level: 3, title: "Plato", minDisputes: 7, minCoherencePercentage: 80, maxCoherencePercentage: 100 },
+  { level: 2, title: "Socrates", minDisputes: 3, minCoherencePercentage: 70, maxCoherencePercentage: 100 },
+  { level: 1, title: "Pythagoras", minDisputes: 1, minCoherencePercentage: 0, maxCoherencePercentage: 70 },
+  { level: 0, title: "Diogenes", minDisputes: 3, minCoherencePercentage: 0, maxCoherencePercentage: 49 },
 ];
 
-export const getUserLevelData = (coherenceScore: number, totalResolvedDisputes: number) => {
+export const getUserLevelData = (coherencePercentage: string, totalResolvedDisputes: number) => {
+  const percentageToNumber = (percentage: string) => parseFloat(percentage.replace("%", ""));
+  const coherenceValue = percentageToNumber(coherencePercentage);
+
   for (const criteria of levelCriteria) {
     if (
       totalResolvedDisputes >= criteria.minDisputes &&
-      coherenceScore >= criteria.minScore &&
-      coherenceScore <= criteria.maxScore
+      coherenceValue >= criteria.minCoherencePercentage &&
+      coherenceValue <= criteria.maxCoherencePercentage
     ) {
       return criteria;
     }