diff --git a/apollo/subgraph.ts b/apollo/subgraph.ts
index 96a56a01..359eeb31 100644
--- a/apollo/subgraph.ts
+++ b/apollo/subgraph.ts
@@ -8963,6 +8963,13 @@ export type TreasuryProposalsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type TreasuryProposalsQuery = { __typename: 'Query', treasuryProposals: Array<{ __typename: 'TreasuryProposal', id: string, description: string, calldatas: Array<any>, targets: Array<string>, values: Array<string>, voteEnd: string, voteStart: string, proposer: { __typename: 'LivepeerAccount', id: string } }> };
 
+export type GetProposalsByIdsQueryVariables = Exact<{
+  ids: Array<Scalars['ID']> | Scalars['ID'];
+}>;
+
+
+export type GetProposalsByIdsQuery = { __typename: 'Query', treasuryProposals: Array<{ __typename: 'TreasuryProposal', id: string, description: string, voteStart: string, voteEnd: string }> };
+
 export type VoteQueryVariables = Exact<{
   id: Scalars['ID'];
 }>;
@@ -9906,6 +9913,44 @@ export function useTreasuryProposalsLazyQuery(baseOptions?: Apollo.LazyQueryHook
 export type TreasuryProposalsQueryHookResult = ReturnType<typeof useTreasuryProposalsQuery>;
 export type TreasuryProposalsLazyQueryHookResult = ReturnType<typeof useTreasuryProposalsLazyQuery>;
 export type TreasuryProposalsQueryResult = Apollo.QueryResult<TreasuryProposalsQuery, TreasuryProposalsQueryVariables>;
+export const GetProposalsByIdsDocument = gql`
+    query getProposalsByIds($ids: [ID!]!) {
+  treasuryProposals(where: {id_in: $ids}) {
+    id
+    description
+    voteStart
+    voteEnd
+  }
+}
+    `;
+
+/**
+ * __useGetProposalsByIdsQuery__
+ *
+ * To run a query within a React component, call `useGetProposalsByIdsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetProposalsByIdsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetProposalsByIdsQuery({
+ *   variables: {
+ *      ids: // value for 'ids'
+ *   },
+ * });
+ */
+export function useGetProposalsByIdsQuery(baseOptions: Apollo.QueryHookOptions<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>(GetProposalsByIdsDocument, options);
+      }
+export function useGetProposalsByIdsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>(GetProposalsByIdsDocument, options);
+        }
+export type GetProposalsByIdsQueryHookResult = ReturnType<typeof useGetProposalsByIdsQuery>;
+export type GetProposalsByIdsLazyQueryHookResult = ReturnType<typeof useGetProposalsByIdsLazyQuery>;
+export type GetProposalsByIdsQueryResult = Apollo.QueryResult<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>;
 export const VoteDocument = gql`
     query vote($id: ID!) {
   vote(id: $id) {
diff --git a/components/Account/index.tsx b/components/Account/index.tsx
index 9f74de7a..e295376b 100644
--- a/components/Account/index.tsx
+++ b/components/Account/index.tsx
@@ -1,3 +1,4 @@
+import { formatAddress } from "@lib/utils";
 import { Box, Flex, Link as A } from "@livepeer/design-system";
 import { useAccountAddress, useEnsData } from "hooks";
 import Link from "next/link";
@@ -52,11 +53,7 @@ const Account = () => {
           >
             <AccountIcon />
           </Flex>
-          <Box>
-            {ens?.name
-              ? ens.name
-              : accountAddress.replace(accountAddress.slice(6, 38), "…")}
-          </Box>
+          <Box>{ens?.name ? ens.name : formatAddress(accountAddress)}</Box>
         </A>
       </Flex>
     </Box>
diff --git a/components/AccountCell/index.tsx b/components/AccountCell/index.tsx
index f9dc8d59..43f86c15 100644
--- a/components/AccountCell/index.tsx
+++ b/components/AccountCell/index.tsx
@@ -1,4 +1,4 @@
-import { textTruncate } from "@lib/utils";
+import { formatAddress, textTruncate } from "@lib/utils";
 import { Box, Flex } from "@livepeer/design-system";
 import { useEnsData } from "hooks";
 import { QRCodeCanvas } from "qrcode.react";
@@ -88,7 +88,7 @@ const Index = ({ active, address }) => {
           <Box css={{ fontWeight: 600 }}>
             {identity?.name
               ? textTruncate(identity.name, 12, "…")
-              : address.replace(address.slice(5, 36), "…")}
+              : formatAddress(address)}
           </Box>
         </Flex>
       </Flex>
diff --git a/components/Claim/index.tsx b/components/Claim/index.tsx
index b64985d2..d0abfa8e 100644
--- a/components/Claim/index.tsx
+++ b/components/Claim/index.tsx
@@ -1,6 +1,7 @@
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { l2Migrator } from "@lib/api/abis/bridge/L2Migrator";
 import { getL2MigratorAddress } from "@lib/api/contracts";
+import { formatAddress } from "@lib/utils";
 import { Box, Button, Container, Flex, Text } from "@livepeer/design-system";
 import { ArrowTopRightIcon } from "@modulz/radix-icons";
 import { constants, ethers } from "ethers";
@@ -202,10 +203,7 @@ const Claim = () => {
               borderBottom: "1px solid rgba(255,255,255, .2)",
             }}
           >
-            {migrationParams.delegate.replace(
-              migrationParams.delegate.slice(6, 38),
-              "…"
-            )}
+            {formatAddress(migrationParams.delegate)}
           </Box>
         </Box>
         <Flex css={{ marginTop: "$3", alignItems: "center" }}>
diff --git a/components/DelegatingView/index.tsx b/components/DelegatingView/index.tsx
index 83279309..0f32a1b9 100644
--- a/components/DelegatingView/index.tsx
+++ b/components/DelegatingView/index.tsx
@@ -1,7 +1,7 @@
 import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import Stat from "@components/Stat";
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
-import { checkAddressEquality } from "@lib/utils";
+import { checkAddressEquality, formatAddress } from "@lib/utils";
 import { Box, Button, Flex, Link as A, Text } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
 import { AccountQueryResult, OrchestratorsSortedQueryResult } from "apollo";
@@ -167,10 +167,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 <Box>
                   {delegateIdentity?.name
                     ? delegateIdentity?.name
-                    : delegator?.delegate?.id.replace(
-                        delegator?.delegate?.id.slice(7, 37),
-                        "…"
-                      )}
+                    : formatAddress(delegator?.delegate?.id)}
                 </Box>
               }
             />{" "}
diff --git a/components/DelegatingWidget/Header.tsx b/components/DelegatingWidget/Header.tsx
index 60cda370..b808c216 100644
--- a/components/DelegatingWidget/Header.tsx
+++ b/components/DelegatingWidget/Header.tsx
@@ -1,4 +1,5 @@
 import { EnsIdentity } from "@lib/api/types/get-ens";
+import { formatAddress } from "@lib/utils";
 import { Box, Flex, Heading } from "@livepeer/design-system";
 import { QRCodeCanvas } from "qrcode.react";
 
@@ -58,7 +59,7 @@ const Header = ({
         <Heading size="1" css={{ fontWeight: 700 }}>
           {delegateProfile?.name
             ? delegateProfile.name
-            : transcoder?.id.replace(transcoder.id.slice(7, 37), "…")}
+            : formatAddress(transcoder?.id)}
         </Heading>
         <Box
           css={{
diff --git a/components/HistoryView/index.tsx b/components/HistoryView/index.tsx
index 82e37c65..888e8f09 100644
--- a/components/HistoryView/index.tsx
+++ b/components/HistoryView/index.tsx
@@ -1,5 +1,6 @@
 import Spinner from "@components/Spinner";
 import dayjs from "@lib/dayjs";
+import { formatAddress, formatTransactionHash } from "@lib/utils";
 import {
   Box,
   Card as CardBase,
@@ -185,11 +186,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Delegated with{" "}
-                {event.newDelegate.id.replace(
-                  event.newDelegate.id.slice(7, 37),
-                  "…"
-                )}
+                Delegated with {formatAddress(event.newDelegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -208,10 +205,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -271,10 +265,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -312,8 +303,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Redelegated with{" "}
-                {event.delegate.id.replace(event.delegate.id.slice(7, 37), "…")}
+                Redelegated with {formatAddress(event.delegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -332,10 +322,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -378,8 +365,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Undelegated from{" "}
-                {event.delegate.id.replace(event.delegate.id.slice(7, 37), "…")}
+                Undelegated from {formatAddress(event.delegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -398,10 +384,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -463,10 +446,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -526,10 +506,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -593,10 +570,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -655,10 +629,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -717,10 +688,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -780,10 +748,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -848,10 +813,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
diff --git a/components/OrchestratingView/index.tsx b/components/OrchestratingView/index.tsx
index df2cf494..e89fc8de 100644
--- a/components/OrchestratingView/index.tsx
+++ b/components/OrchestratingView/index.tsx
@@ -1,12 +1,15 @@
 import Stat from "@components/Stat";
 import dayjs from "@lib/dayjs";
-import { Box, Flex } from "@livepeer/design-system";
-import { CheckIcon, Cross1Icon } from "@modulz/radix-icons";
+import { Box, Flex, Link as A, Text } from "@livepeer/design-system";
+import { ArrowTopRightIcon, CheckIcon, Cross1Icon } from "@modulz/radix-icons";
 import { AccountQueryResult } from "apollo";
+import { CUBE_TYPE, getCubeData } from "cube/cube-client";
+import { getAccountVoterSummary } from "cube/query-generator";
 import { useScoreData } from "hooks";
 import { useRegionsData } from "hooks/useSwr";
+import Link from "next/link";
 import numbro from "numbro";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Masonry from "react-masonry-css";
 
 const breakpointColumnsObj = {
@@ -24,6 +27,11 @@ interface Props {
   isActive: boolean;
 }
 
+interface GovStats {
+  voted: number;
+  eligible: number;
+}
+
 const Index = ({ currentRound, transcoder, isActive }: Props) => {
   const callsMade = useMemo(
     () => transcoder?.pools?.filter((r) => r.rewardTokens != null)?.length ?? 0,
@@ -33,6 +41,41 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
   const scores = useScoreData(transcoder?.id);
   const knownRegions = useRegionsData();
 
+  const [govStats, setGovStats] = useState<GovStats | null>(null);
+
+  useEffect(() => {
+    const fetchGovStats = async () => {
+      if (!transcoder?.id) return;
+
+      try {
+        const cubeQuery = getAccountVoterSummary(transcoder.id);
+        const response = await getCubeData(cubeQuery, {
+          type: CUBE_TYPE.SERVER,
+        });
+
+        // Some cube responses are wrapped in [0].data, others are direct arrays
+        const data = Array.isArray(response)
+          ? response[0]?.data || response
+          : null;
+
+        if (data && data.length > 0) {
+          const votedCount = Number(
+            data[0]["LivepeerVoteProposals.numOfVoteCasted"] || 0
+          );
+          const eligibleCount = Number(
+            data[0]["LivepeerVoteProposals.numOfProposals"] || 0
+          );
+
+          setGovStats({ voted: votedCount, eligible: eligibleCount });
+        }
+      } catch (error) {
+        console.error("Error fetching governance stats:", error);
+      }
+    };
+
+    fetchGovStats();
+  }, [transcoder?.id]);
+
   const maxScore = useMemo(() => {
     const topTransData = Object.keys(scores?.scores ?? {}).reduce(
       (prev, curr) => {
@@ -279,6 +322,111 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
             }
           />
         )}
+        <A
+          as={Link}
+          href={`/accounts/${transcoder?.id}/history`}
+          passHref
+          className="masonry-grid_item"
+          css={{
+            display: "block",
+            textDecoration: "none",
+            "&:hover": {
+              textDecoration: "none",
+              ".see-history": {
+                textDecoration: "underline",
+                color: "$primary11",
+                transition: "color .3s",
+              },
+            },
+          }}
+        >
+          <Stat
+            label="Governance Participation"
+            variant="interactive"
+            tooltip={
+              <Box>
+                Number of proposals voted on relative to the number of proposals
+                the orchestrator was eligible for while active.
+              </Box>
+            }
+            value={
+              govStats ? (
+                <Flex css={{ alignItems: "baseline", gap: "$1" }}>
+                  <Box css={{ color: "$hiContrast" }}>{govStats.voted}</Box>
+                  <Box
+                    css={{
+                      fontSize: "$3",
+                      color: "$neutral11",
+                      fontWeight: 500,
+                    }}
+                  >
+                    / {govStats.eligible} Proposals
+                  </Box>
+                </Flex>
+              ) : (
+                "N/A"
+              )
+            }
+            meta={
+              <Box css={{ width: "100%", marginTop: "$2" }}>
+                {govStats && (
+                  <Box
+                    css={{
+                      width: "100%",
+                      height: 4,
+                      backgroundColor: "$neutral4",
+                      borderRadius: "$2",
+                      overflow: "hidden",
+                      marginBottom: "$2",
+                    }}
+                  >
+                    <Box
+                      css={{
+                        width: `${(govStats.voted / govStats.eligible) * 100}%`,
+                        height: "100%",
+                        backgroundColor: "$primary11",
+                      }}
+                    />
+                  </Box>
+                )}
+                <Flex
+                  css={{
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                  }}
+                >
+                  {govStats && (
+                    <Text
+                      size="2"
+                      css={{ color: "$neutral11", fontWeight: 600 }}
+                    >
+                      {numbro(govStats.voted / govStats.eligible).format({
+                        output: "percent",
+                        mantissa: 0,
+                      })}{" "}
+                      Participation
+                    </Text>
+                  )}
+                  <Text
+                    className="see-history"
+                    size="2"
+                    css={{
+                      color: "$primary11",
+                      fontWeight: 600,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "$0.75",
+                    }}
+                  >
+                    See history
+                    <Box as={ArrowTopRightIcon} width={15} height={15} />
+                  </Text>
+                </Flex>
+              </Box>
+            }
+          />
+        </A>
       </Masonry>
     </Box>
   );
diff --git a/components/OrchestratorList/index.tsx b/components/OrchestratorList/index.tsx
index 1370086e..dade2dec 100644
--- a/components/OrchestratorList/index.tsx
+++ b/components/OrchestratorList/index.tsx
@@ -11,7 +11,7 @@ import {
   ROIInflationChange,
   ROITimeHorizon,
 } from "@lib/roi";
-import { textTruncate } from "@lib/utils";
+import { formatAddress, textTruncate } from "@lib/utils";
 import {
   Badge,
   Box,
@@ -291,7 +291,7 @@ const OrchestratorList = ({
                     </Flex>
                   ) : (
                     <Box css={{ fontWeight: 600 }}>
-                      {row.values.id.replace(row.values.id.slice(7, 37), "…")}
+                      {formatAddress(row.values.id)}
                     </Box>
                   )}
                   {/* {(row?.original?.daysSinceChangeParams ??
diff --git a/components/OrchestratorVotingList/index.tsx b/components/OrchestratorVotingList/index.tsx
new file mode 100644
index 00000000..b57d06de
--- /dev/null
+++ b/components/OrchestratorVotingList/index.tsx
@@ -0,0 +1,318 @@
+import { ExplorerTooltip } from "@components/ExplorerTooltip";
+import Table from "@components/Table";
+import { formatAddress, textTruncate } from "@lib/utils";
+import { Badge, Box, Flex, Link as A, Text } from "@livepeer/design-system";
+import { CheckIcon, Cross2Icon, MinusIcon } from "@radix-ui/react-icons";
+import { useEnsData } from "hooks";
+import Link from "next/link";
+import numbro from "numbro";
+import QRCode from "qrcode.react";
+import { useMemo } from "react";
+import { Column } from "react-table";
+
+export type VoterSummary = {
+  id: string;
+  noOfProposalsVotedOn: number;
+  noOfVotesCasted: number;
+  mostRecentVotes: (string | null)[];
+  votingTurnout: number;
+};
+
+const OrchestratorVotingList = ({
+  initialVoterData,
+  pageSize = 10,
+}: {
+  initialVoterData?: VoterSummary[];
+  pageSize: number;
+}) => {
+  const columns = useMemo(
+    () => [
+      {
+        Header: (
+          <ExplorerTooltip
+            multiline
+            content={
+              <Box>
+                The account which is actively coordinating transcoders and
+                receiving fees/rewards.
+              </Box>
+            }
+          >
+            <Box
+              css={{
+                height: 20,
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              Orchestrator
+            </Box>
+          </ExplorerTooltip>
+        ),
+        accessor: "id",
+        Cell: ({ row }) => {
+          const identity = useEnsData(row.values.id);
+
+          return (
+            <Link href={`/accounts/${row.values.id}/orchestrating`} passHref>
+              <A
+                css={{
+                  width: 350,
+                  display: "block",
+                  textDecoration: "none",
+                  "&:hover": { textDecoration: "none" },
+                }}
+              >
+                <Flex css={{ alignItems: "center" }}>
+                  <Box
+                    css={{
+                      marginRight: "$2",
+                      backgroundColor: "$neutral4",
+                      borderRadius: 1000,
+                      color: "$neutral11",
+                      fontWeight: 700,
+                      width: 24,
+                      height: 24,
+                      minWidth: 24,
+                      minHeight: 24,
+                      fontSize: 11,
+                      justifyContent: "center",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                  >
+                    {+row.id + 1}
+                  </Box>
+
+                  <Flex css={{ marginRight: "$2", alignItems: "center" }}>
+                    {identity?.avatar ? (
+                      <Box
+                        as="img"
+                        css={{
+                          marginRight: "$2",
+                          width: 24,
+                          height: 24,
+                          maxWidth: 24,
+                          maxHeight: 24,
+                          borderRadius: 1000,
+                        }}
+                        src={identity.avatar}
+                      />
+                    ) : (
+                      <Box
+                        as={QRCode}
+                        css={{
+                          marginRight: "$2",
+                          borderRadius: 1000,
+                          width: 24,
+                          height: 24,
+                          maxWidth: 24,
+                          maxHeight: 24,
+                        }}
+                        fgColor={`#${row.values.id.substr(2, 6)}`}
+                        value={row.values.id}
+                      />
+                    )}
+                    {identity?.name ? (
+                      <Flex css={{ fontWeight: 600, alignItems: "center" }}>
+                        <Box
+                          css={{
+                            marginRight: "$2",
+                            fontSize: "$3",
+                          }}
+                        >
+                          {textTruncate(identity.name, 20, "…")}
+                        </Box>
+                        <Badge size="2" css={{ fontSize: "$2" }}>
+                          {row.values.id.substring(0, 6)}
+                        </Badge>
+                      </Flex>
+                    ) : (
+                      <Box css={{ fontWeight: 600 }}>
+                        {formatAddress(row.values.id)}
+                      </Box>
+                    )}
+                  </Flex>
+                </Flex>
+              </A>
+            </Link>
+          );
+        },
+      },
+      {
+        Header: (
+          <ExplorerTooltip
+            multiline
+            content={
+              <Box>
+                The total number of governance proposals this orchestrator has
+                participated in by casting a vote.
+              </Box>
+            }
+          >
+            <Box>Number of Proposals Voted On</Box>
+          </ExplorerTooltip>
+        ),
+        accessor: "noOfProposalsVotedOn",
+        Cell: ({ row }) => (
+          <Box>
+            <Text
+              css={{
+                fontWeight: 600,
+                color: "$white",
+              }}
+              size="2"
+            >
+              {numbro(row.values.noOfProposalsVotedOn).format({
+                mantissa: 0,
+                thousandSeparated: true,
+              })}
+            </Text>
+          </Box>
+        ),
+        sortType: "number",
+      },
+      {
+        Header: (
+          <ExplorerTooltip
+            multiline
+            content={
+              <Box>
+                The total count of individual votes submitted by this
+                orchestrator across all proposals.
+              </Box>
+            }
+          >
+            <Box>Number of Votes Casted</Box>
+          </ExplorerTooltip>
+        ),
+        accessor: "noOfVotesCasted",
+        Cell: ({ row }) => (
+          <Box>
+            <Text
+              css={{
+                fontWeight: 600,
+                color: "$white",
+              }}
+              size="2"
+            >
+              {numbro(row.values.noOfVotesCasted).format({
+                mantissa: 0,
+                thousandSeparated: true,
+              })}
+            </Text>
+          </Box>
+        ),
+        sortType: "number",
+      },
+      {
+        Header: (
+          <ExplorerTooltip
+            multiline
+            content={
+              <Box>
+                A list of up to 5 of the orchestrator’s most recent votes,
+                marked as [✓] for For, [✗] for Against, and [–] for Abstain.
+              </Box>
+            }
+          >
+            <Box>Most Recent Votes</Box>
+          </ExplorerTooltip>
+        ),
+        accessor: "mostRecentVotes",
+        Cell: ({ row }) => (
+          <Box>
+            <Flex css={{ alignItems: "center", gap: "$2" }}>
+              {row.values.mostRecentVotes?.map((mostRecentVote, index) => {
+                const icon =
+                  mostRecentVote == "for" ? (
+                    <CheckIcon style={{ color: "#1E1E1E" }} />
+                  ) : mostRecentVote == "against" ? (
+                    <Cross2Icon style={{ color: "#1E1E1E" }} />
+                  ) : mostRecentVote == "abstain" ? (
+                    <MinusIcon style={{ color: "#1E1E1E" }} />
+                  ) : null;
+
+                return (
+                  <Box
+                    css={{
+                      backgroundColor:
+                        mostRecentVote == "for"
+                          ? "#357052"
+                          : mostRecentVote == "against"
+                          ? "#884140"
+                          : mostRecentVote == "abstain"
+                          ? "#5F5F5F"
+                          : "",
+                      borderRadius: 1000,
+                      width: 24,
+                      height: 24,
+                      minWidth: 24,
+                      minHeight: 24,
+                      justifyContent: "center",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                    key={index}
+                  >
+                    {icon}
+                  </Box>
+                );
+              })}
+            </Flex>
+          </Box>
+        ),
+      },
+      {
+        Header: (
+          <ExplorerTooltip
+            multiline
+            content={
+              <Box>
+                The percentage of total governance proposals this orchestrator
+                voted on, showing how actively they participate in protocol
+                decisions.
+              </Box>
+            }
+          >
+            <Box>Voting Turnout</Box>
+          </ExplorerTooltip>
+        ),
+        accessor: "votingTurnout",
+        Cell: ({ row }) => (
+          <Box>
+            <Text
+              css={{
+                fontWeight: 600,
+                color: "$white",
+              }}
+              size="2"
+            >
+              {numbro(row.values.votingTurnout).format({
+                output: "percent",
+                mantissa: 2,
+              })}
+            </Text>
+          </Box>
+        ),
+        sortType: "number",
+      },
+    ],
+    []
+  );
+  if (initialVoterData) {
+    return (
+      <Table
+        data={initialVoterData as VoterSummary[]}
+        columns={columns as Column<VoterSummary>[]}
+        initialState={{
+          pageSize,
+        }}
+      />
+    );
+  } else {
+    return null;
+  }
+};
+
+export default OrchestratorVotingList;
diff --git a/components/PerformanceList/index.tsx b/components/PerformanceList/index.tsx
index fede2324..3bb703ad 100644
--- a/components/PerformanceList/index.tsx
+++ b/components/PerformanceList/index.tsx
@@ -3,7 +3,7 @@ import IdentityAvatar from "@components/IdentityAvatar";
 import Table from "@components/Table";
 import { Pipeline } from "@lib/api/types/get-available-pipelines";
 import { Region } from "@lib/api/types/get-regions";
-import { textTruncate } from "@lib/utils";
+import { formatAddress, textTruncate } from "@lib/utils";
 import { Badge, Box, Flex, Link as A, Skeleton } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
 import { OrchestratorsQueryResult } from "apollo";
@@ -149,7 +149,7 @@ const PerformanceList = ({
                   </Flex>
                 ) : (
                   <Box css={{ fontWeight: 600 }}>
-                    {row.values.id.replace(row.values.id.slice(7, 37), "…")}
+                    {formatAddress(row.values.id)}
                   </Box>
                 )}
                 {typeof row.values.scores != "undefined" &&
diff --git a/components/Profile/index.tsx b/components/Profile/index.tsx
index 2f5f1522..233226d9 100644
--- a/components/Profile/index.tsx
+++ b/components/Profile/index.tsx
@@ -1,6 +1,7 @@
 import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import ShowMoreRichText from "@components/ShowMoreRichText";
 import { EnsIdentity } from "@lib/api/types/get-ens";
+import { formatAddress } from "@lib/utils";
 import { Box, Flex, Heading, Link as A, Text } from "@livepeer/design-system";
 import {
   CheckIcon,
@@ -107,9 +108,7 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
                   fontWeight: 700,
                 }}
               >
-                {identity?.name
-                  ? identity.name
-                  : account.replace(account.slice(5, 39), "…")}
+                {identity?.name ? identity.name : formatAddress(account)}
                 <ExplorerTooltip
                   content={`${copied ? "Copied" : "Copy address to clipboard"}`}
                 >
diff --git a/components/Search/index.tsx b/components/Search/index.tsx
index 28853e7e..ad2f8d96 100644
--- a/components/Search/index.tsx
+++ b/components/Search/index.tsx
@@ -1,4 +1,5 @@
 import Spinner from "@components/Spinner";
+import { formatAddress } from "@lib/utils";
 import {
   Box,
   Dialog,
@@ -182,14 +183,10 @@ const Index = ({ css = {}, ...props }) => {
                     <Flex>
                       <Text>
                         {result.item.name
-                          ? `${result.item.name} (${result.item.id.replace(
-                              result.item.id.slice(5, 39),
-                              "…"
+                          ? `${result.item.name} (${formatAddress(
+                              result.item.id
                             )})`
-                          : result.item.id.replace(
-                              result.item.id.slice(7, 37),
-                              "…"
-                            )}
+                          : formatAddress(result.item.id, 8, 6)}
                       </Text>
                     </Flex>
                     <Box as={ArrowRightIcon} />
diff --git a/components/StakeTransactions/index.tsx b/components/StakeTransactions/index.tsx
index d4511cee..c2f244ad 100644
--- a/components/StakeTransactions/index.tsx
+++ b/components/StakeTransactions/index.tsx
@@ -4,6 +4,7 @@ import { parseEther } from "viem";
 
 import {
   abbreviateNumber,
+  formatAddress,
   getHint,
   simulateNewActiveSetOrder,
 } from "../../lib/utils";
@@ -62,11 +63,7 @@ const Index = ({ delegator, transcoders, currentRound, isMyAccount }) => {
                 >
                   <Box>
                     <Box css={{ marginBottom: "$1" }}>
-                      Undelegating from{" "}
-                      {lock.delegate.id.replace(
-                        lock.delegate.id.slice(7, 37),
-                        "…"
-                      )}
+                      Undelegating from {formatAddress(lock.delegate.id)}
                     </Box>
                     <Text variant="neutral" size="1">
                       Tokens will be available for withdrawal in approximately{" "}
@@ -136,13 +133,7 @@ const Index = ({ delegator, transcoders, currentRound, isMyAccount }) => {
                     justifyContent: "space-between",
                   }}
                 >
-                  <Box>
-                    Undelegated from{" "}
-                    {lock.delegate.id.replace(
-                      lock.delegate.id.slice(7, 37),
-                      "…"
-                    )}
-                  </Box>
+                  <Box>Undelegated from {formatAddress(lock.delegate.id)}</Box>
 
                   <Flex css={{ alignItems: "center" }}>
                     {isMyAccount && (
diff --git a/components/Table/index.tsx b/components/Table/index.tsx
index 6e9832fa..84884998 100644
--- a/components/Table/index.tsx
+++ b/components/Table/index.tsx
@@ -80,7 +80,7 @@ function DataTable<T extends object>({
         <>
           <Box
             css={{
-              overflowY: "scroll",
+              overflowX: "auto",
             }}
           >
             {input && (
@@ -98,7 +98,6 @@ function DataTable<T extends object>({
               css={{
                 borderCollapse: "collapse",
                 tableLayout: "auto",
-                minWidth: 980,
                 width: "100%",
                 "@bp4": {
                   width: "100%",
diff --git a/components/TransactionsList/index.tsx b/components/TransactionsList/index.tsx
index 7fdb1e05..8b9fe98c 100644
--- a/components/TransactionsList/index.tsx
+++ b/components/TransactionsList/index.tsx
@@ -1,5 +1,6 @@
 import Table from "@components/Table";
 import dayjs from "@lib/dayjs";
+import { formatTransactionHash } from "@lib/utils";
 import { Badge, Box, Flex, Link as A, Text } from "@livepeer/design-system";
 import { ArrowTopRightIcon } from "@modulz/radix-icons";
 import { EventsQueryResult } from "apollo";
@@ -79,7 +80,7 @@ const Transaction = (props: { id: string | undefined }) => {
       }
     >
       <Badge css={{ cursor: "pointer" }} variant="primary" size="1">
-        {props.id ? props.id.replace(props.id.slice(6, 62), "…") : "N/A"}
+        {props.id ? formatTransactionHash(props.id) : "N/A"}
         <Box
           css={{ marginLeft: "$1", width: 15, height: 15 }}
           as={ArrowTopRightIcon}
@@ -378,10 +379,13 @@ const TransactionsList = ({
             <Box>
               {`Voted `}
               <Badge
-                variant={+event?.choiceID === 0 ? "primary" : "red"}
+                css={{
+                  backgroundColor:
+                    +event?.choiceID === 0 ? "$tomato9" : "$sky9",
+                }}
                 size="1"
               >
-                {+event?.choiceID === 0 ? '"Yes"' : '"No"'}
+                {+event?.choiceID === 0 ? '"Against"' : '"For"'}
               </Badge>
               {` on a proposal`}
               {renderEmoji("👩‍⚖️")}
diff --git a/components/TreasuryVotingReason/index.tsx b/components/TreasuryVotingReason/index.tsx
index 52724984..67b77998 100644
--- a/components/TreasuryVotingReason/index.tsx
+++ b/components/TreasuryVotingReason/index.tsx
@@ -1,4 +1,4 @@
-import { Text, TextArea } from "@livepeer/design-system";
+import { Box, Text, TextArea } from "@livepeer/design-system";
 
 const MAX_INPUT_LENGTH = 256;
 const MIN_INPUT_LENGTH = 3;
@@ -22,17 +22,30 @@ const Index = ({
   const charsLeft = MAX_INPUT_LENGTH - reason.length;
 
   return (
-    <>
-      <Text size="2" css={{ fontWeight: 600 }}>
+    <Box css={{ marginTop: "$2" }}>
+      <Text
+        size="2"
+        css={{
+          fontWeight: 600,
+          display: "block",
+          marginBottom: "$2",
+          color: "$hiContrast",
+        }}
+      >
         Reason (optional)
       </Text>
       <TextArea
         css={{
           borderRadius: "$2",
           fontSize: "$2",
-          paddingRight: "$3",
-          paddingLeft: "$3",
+          padding: "$3",
           width: "100%",
+          backgroundColor: "$neutral3",
+          border: "1px solid $neutral4",
+          "&:focus": {
+            outline: "none",
+            borderColor: "$neutral6",
+          },
         }}
         placeholder="Please provide reasoning behind your vote..."
         value={reason}
@@ -41,21 +54,18 @@ const Index = ({
         maxLength={MAX_INPUT_LENGTH}
         minLength={MIN_INPUT_LENGTH}
         onChange={(e) => setReason(e.target.value)}
-        rows={3}
-        size="3"
+        rows={4}
       />
       <Text
         css={{
           fontSize: "$1",
-          paddingTop: "$1",
-          paddingBottom: "$1",
-          paddingLeft: "$1",
-          color: "$gray",
+          marginTop: "$1",
+          color: "$neutral11",
         }}
       >
         {charsLeft} characters left
       </Text>
-    </>
+    </Box>
   );
 };
 
diff --git a/components/TreasuryVotingWidget/index.tsx b/components/TreasuryVotingWidget/index.tsx
index 167c1194..1f81f91d 100644
--- a/components/TreasuryVotingWidget/index.tsx
+++ b/components/TreasuryVotingWidget/index.tsx
@@ -3,7 +3,7 @@ import TreasuryVotingReason from "@components/TreasuryVotingReason";
 import { ProposalExtended } from "@lib/api/treasury";
 import { ProposalVotingPower } from "@lib/api/types/get-treasury-proposal";
 import dayjs from "@lib/dayjs";
-import { abbreviateNumber, fromWei, shortenAddress } from "@lib/utils";
+import { abbreviateNumber, formatAddress, fromWei } from "@lib/utils";
 import { Box, Button, Flex, Link, Text } from "@livepeer/design-system";
 import { InfoCircledIcon } from "@modulz/radix-icons";
 import { useAccountAddress } from "hooks";
@@ -11,7 +11,7 @@ import numbro from "numbro";
 import { useMemo, useState } from "react";
 import { zeroAddress } from "viem";
 
-import VoteButton from "../VoteButton";
+import VoteButton from "../Votes/VoteButton";
 
 type Props = {
   proposal: ProposalExtended;
@@ -31,11 +31,11 @@ const SectionLabel = ({ children }: { children: React.ReactNode }) => (
   <Text
     css={{
       fontSize: "$1",
-      fontWeight: 600,
+      fontWeight: 700,
       color: "$neutral10",
       textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      marginBottom: "$2",
+      letterSpacing: "0.08em",
+      marginBottom: "$3",
     }}
   >
     {children}
@@ -100,8 +100,8 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
               >
                 <Box
                   css={{
-                    height: 6,
-                    borderRadius: 3,
+                    height: 8,
+                    borderRadius: 4,
                     backgroundColor: "$neutral5",
                     width: "100%",
                     overflow: "hidden",
@@ -110,8 +110,8 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
                   <Box
                     css={{
                       height: "100%",
-                      borderRadius: 3,
-                      backgroundColor: "$neutral9",
+                      borderRadius: 4,
+                      backgroundColor: "$tomato9",
                       width: `${proposal.votes.percent.against * 100}%`,
                     }}
                   />
@@ -121,6 +121,7 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
                 css={{
                   fontSize: "$2",
                   color: "$hiContrast",
+                  fontWeight: 500,
                   fontVariantNumeric: "tabular-nums",
                   minWidth: 55,
                   textAlign: "right",
@@ -151,8 +152,8 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
               >
                 <Box
                   css={{
-                    height: 6,
-                    borderRadius: 3,
+                    height: 8,
+                    borderRadius: 4,
                     backgroundColor: "$neutral5",
                     width: "100%",
                     overflow: "hidden",
@@ -161,8 +162,8 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
                   <Box
                     css={{
                       height: "100%",
-                      borderRadius: 3,
-                      backgroundColor: "$green9",
+                      borderRadius: 4,
+                      backgroundColor: "$sky9",
                       width: `${proposal.votes.percent.for * 100}%`,
                     }}
                   />
@@ -172,6 +173,7 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
                 css={{
                   fontSize: "$2",
                   color: "$hiContrast",
+                  fontWeight: 500,
                   fontVariantNumeric: "tabular-nums",
                   minWidth: 55,
                   textAlign: "right",
@@ -201,8 +203,8 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
               >
                 <Box
                   css={{
-                    height: 6,
-                    borderRadius: 3,
+                    height: 8,
+                    borderRadius: 4,
                     backgroundColor: "$neutral5",
                     width: "100%",
                     overflow: "hidden",
@@ -211,7 +213,7 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
                   <Box
                     css={{
                       height: "100%",
-                      borderRadius: 3,
+                      borderRadius: 4,
                       backgroundColor: "$neutral8",
                       width: `${proposal.votes.percent.abstain * 100}%`,
                     }}
@@ -222,6 +224,7 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
                 css={{
                   fontSize: "$2",
                   color: "$hiContrast",
+                  fontWeight: 500,
                   fontVariantNumeric: "tabular-nums",
                   minWidth: 55,
                   textAlign: "right",
@@ -233,13 +236,26 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
           </Box>
 
           {/* Summary line */}
-          <Text css={{ fontSize: "$2", color: "$neutral11" }}>
-            {abbreviateNumber(proposal.votes.total.voters, 4)} LPT voted ·{" "}
-            {proposal.state !== "Pending" && proposal.state !== "Active"
-              ? "Final Results"
-              : dayjs.duration(proposal.votes.voteEndTime.diff()).humanize() +
-                " left"}
-          </Text>
+          <Flex css={{ alignItems: "center", justifyContent: "space-between" }}>
+            <Text css={{ fontSize: "$2", color: "$neutral11" }}>
+              {abbreviateNumber(proposal.votes.total.voters, 4)} LPT voted ·{" "}
+              {proposal.state !== "Pending" && proposal.state !== "Active"
+                ? "Final Results"
+                : dayjs.duration(proposal.votes.voteEndTime.diff()).humanize() +
+                  " left"}
+            </Text>
+            <Link
+              href="#votes-section"
+              css={{
+                fontSize: "$1",
+                color: "$primary11",
+                textDecoration: "none",
+                "&:hover": { textDecoration: "underline" },
+              }}
+            >
+              View votes
+            </Link>
+          </Flex>
         </Box>
 
         {/* ========== YOUR VOTE SECTION ========== */}
@@ -257,12 +273,12 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
               <Flex
                 css={{
                   fontSize: "$2",
-                  marginBottom: "$2",
+                  marginBottom: "$3",
                   justifyContent: "space-between",
                 }}
               >
                 <Text css={{ color: "$neutral11" }}>
-                  Delegate vote ({shortenAddress(vote.delegate!.address)})
+                  Delegate vote ({formatAddress(vote.delegate!.address)})
                 </Text>
                 <Text css={{ fontWeight: 500, color: "$hiContrast" }}>
                   {vote.delegate!.hasVoted ? "Voted" : "Not voted"}
@@ -274,7 +290,7 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
             <Flex
               css={{
                 fontSize: "$2",
-                marginBottom: "$2",
+                marginBottom: "$3",
                 justifyContent: "space-between",
               }}
             >
@@ -294,6 +310,7 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
               css={{
                 fontSize: "$2",
                 justifyContent: "space-between",
+                marginBottom: "$4",
               }}
             >
               <Text css={{ color: "$neutral11" }}>Voting power</Text>
@@ -316,35 +333,62 @@ const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
                 css={{
                   marginTop: "$4",
                   display: "grid",
-                  gap: "$2",
+                  gap: "$3",
                   gridTemplateColumns: "1fr 1fr",
                 }}
               >
                 <VoteButton
-                  variant="red"
                   size="4"
                   choiceId={0}
                   proposalId={proposal?.id}
                   reason={reason}
+                  css={{
+                    backgroundColor: "$tomato3",
+                    color: "$tomato11",
+                    fontWeight: 600,
+                    border: "1px solid $tomato4",
+                    "&:hover": {
+                      backgroundColor: "$tomato4",
+                      borderColor: "$tomato5",
+                    },
+                  }}
                 >
                   Against
                 </VoteButton>
                 <VoteButton
-                  variant="primary"
                   choiceId={1}
                   size="4"
                   proposalId={proposal?.id}
                   reason={reason}
+                  css={{
+                    backgroundColor: "$sky3",
+                    color: "$sky11",
+                    fontWeight: 600,
+                    border: "1px solid $sky4",
+                    "&:hover": {
+                      backgroundColor: "$sky4",
+                      borderColor: "$sky5",
+                    },
+                  }}
                 >
                   For
                 </VoteButton>
                 <VoteButton
-                  variant="gray"
                   size="4"
                   choiceId={2}
                   proposalId={proposal?.id}
                   reason={reason}
-                  css={{ gridColumn: "span 2" }}
+                  css={{
+                    gridColumn: "span 2",
+                    backgroundColor: "$neutral3",
+                    color: "$neutral11",
+                    fontWeight: 600,
+                    border: "1px solid $neutral4",
+                    "&:hover": {
+                      backgroundColor: "$neutral4",
+                      borderColor: "$neutral5",
+                    },
+                  }}
                 >
                   Abstain
                 </VoteButton>
diff --git a/components/TxConfirmedDialog/index.tsx b/components/TxConfirmedDialog/index.tsx
index 6f108a17..984676fa 100644
--- a/components/TxConfirmedDialog/index.tsx
+++ b/components/TxConfirmedDialog/index.tsx
@@ -19,7 +19,7 @@ import { useRouter } from "next/router";
 import { useCallback } from "react";
 import { MdReceipt } from "react-icons/md";
 
-import { fromWei, txMessages } from "../../lib/utils";
+import { formatAddress, fromWei, txMessages } from "../../lib/utils";
 
 const Index = () => {
   const router = useRouter();
@@ -219,10 +219,7 @@ function renderSwitch(tx: TransactionStatus, onDismiss: () => void) {
               }}
             >
               You&apos;ve successfully redelegated to orchestrator{" "}
-              {tx.inputData.delegate.replace(
-                tx.inputData.delegate.slice(7, 37),
-                "…"
-              )}
+              {formatAddress(tx.inputData.delegate)}
             </Box>
           </Table>
           <DialogClose asChild>
@@ -249,10 +246,7 @@ function renderSwitch(tx: TransactionStatus, onDismiss: () => void) {
               You&apos;ve successfully checkpointed{" "}
               {!isOrchestrator
                 ? "your stake"
-                : `your orchestrator (${targetAddress?.replace(
-                    targetAddress?.slice(7, 37) ?? "",
-                    "…"
-                  )}) stake!`}
+                : `your orchestrator (${formatAddress(targetAddress)}) stake!`}
             </Box>
           </Table>
           <DialogClose asChild>
diff --git a/components/TxStartedDialog/index.tsx b/components/TxStartedDialog/index.tsx
index 3c80c857..6b8df896 100644
--- a/components/TxStartedDialog/index.tsx
+++ b/components/TxStartedDialog/index.tsx
@@ -1,4 +1,4 @@
-import { fromWei, txMessages } from "@lib/utils";
+import { formatAddress, fromWei, txMessages } from "@lib/utils";
 import {
   Badge,
   Box,
@@ -90,7 +90,7 @@ function Table({ tx, account }: { tx: TransactionStatus; account: string }) {
       }}
     >
       <Row>
-        <Box>Your account</Box> {account?.replace(account?.slice(7, 37), "…")}
+        <Box>Your account</Box> {formatAddress(account)}
       </Row>
       <Inputs tx={tx} />
     </Box>
@@ -107,8 +107,7 @@ function Inputs({ tx }: { tx: TransactionStatus }) {
       return (
         <>
           <Row>
-            <Box>Delegate</Box>{" "}
-            {inputData.to.replace(inputData.to.slice(7, 37), "…")}
+            <Box>Delegate</Box> {formatAddress(inputData.to)}
           </Row>
 
           {Number(inputData.amount) > 0 ? (
@@ -134,8 +133,7 @@ function Inputs({ tx }: { tx: TransactionStatus }) {
       return (
         <>
           <Row>
-            <Box>Delegate</Box>{" "}
-            {inputData.delegate.replace(inputData.delegate.slice(7, 37), "…")}
+            <Box>Delegate</Box> {formatAddress(inputData.delegate)}
           </Row>
         </>
       );
diff --git a/components/VoteButton/index.tsx b/components/Votes/VoteButton/index.tsx
similarity index 100%
rename from components/VoteButton/index.tsx
rename to components/Votes/VoteButton/index.tsx
diff --git a/components/Votes/VoteDetail/index.tsx b/components/Votes/VoteDetail/index.tsx
new file mode 100644
index 00000000..7c8aa461
--- /dev/null
+++ b/components/Votes/VoteDetail/index.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { Vote, VOTING_SUPPORT } from "@lib/api/types/votes";
+import { formatAddress, formatLpt, formatTransactionHash } from "@lib/utils";
+import { Badge, Box, Flex, Heading, Link, Text } from "@livepeer/design-system";
+import { ArrowTopRightIcon } from "@modulz/radix-icons";
+import React from "react";
+
+interface VoteDetailItemProps {
+  vote: Vote;
+}
+
+const Index: React.FC<VoteDetailItemProps> = ({ vote }) => {
+  const support = VOTING_SUPPORT[vote.choiceID] || VOTING_SUPPORT["2"];
+  const hasReason =
+    vote.reason && vote.reason.toLowerCase() !== "no reason provided";
+
+  return (
+    <Box
+      css={{
+        position: "relative",
+        paddingBottom: "$6",
+        "&:last-child": { paddingBottom: 0 },
+      }}
+    >
+      <Flex
+        css={{
+          position: "relative",
+          paddingLeft: "$6",
+          alignItems: "center",
+        }}
+      >
+        {/* Timeline Dot */}
+        <Box
+          css={{
+            position: "absolute",
+            left: 0,
+            top: "50%",
+            transform: "translateY(-50%)",
+            width: 16,
+            height: 16,
+            borderRadius: "50%",
+            backgroundColor: "$neutral3",
+            border: `3px solid ${support.style.color}`,
+            zIndex: 1,
+          }}
+        />
+
+        <Box
+          css={{
+            backgroundColor: "$neutral4",
+            padding: "$4",
+            borderRadius: "$2",
+            width: "100%",
+            transition: "all 0.2s ease",
+            "&:hover, &:focus-within": {
+              backgroundColor: "$neutral5",
+              transform: "translateX(4px)",
+            },
+          }}
+        >
+          <Flex
+            css={{
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              gap: "$4",
+              flexDirection: "column",
+              "@bp2": { flexDirection: "row" },
+            }}
+          >
+            <Box css={{ flex: 1 }}>
+              <Heading
+                as="h2"
+                css={{ fontSize: "$2", marginBottom: "$1", color: "$white" }}
+              >
+                <Link
+                  href={`https://explorer.livepeer.org/treasury/${vote.proposalId}`}
+                  target="_blank"
+                  css={{
+                    color: "$green11",
+                    textDecoration: "none",
+                    "&:hover": { textDecoration: "underline" },
+                    "&:focus-visible": {
+                      outline: "2px solid $green11",
+                      outlineOffset: "2px",
+                      borderRadius: "2px",
+                    },
+                  }}
+                >
+                  {vote.proposalTitle}
+                </Link>
+              </Heading>
+              <Text
+                size="1"
+                css={{
+                  color: "$neutral11",
+                  display: "block",
+                  marginBottom: "$2",
+                }}
+              >
+                ID: {formatAddress(vote.proposalId)}
+              </Text>
+
+              {hasReason && (
+                <Box
+                  css={{
+                    marginTop: "$2",
+                    padding: "$2 $3",
+                    backgroundColor: "$neutral3",
+                    borderRadius: "$1",
+                    borderLeft: `2px solid ${support.style.color}`,
+                  }}
+                >
+                  <Text
+                    size="1"
+                    css={{ color: "$neutral12", fontStyle: "italic" }}
+                  >
+                    &ldquo;{vote.reason}&rdquo;
+                  </Text>
+                </Box>
+              )}
+            </Box>
+
+            <Flex
+              css={{
+                flexDirection: "column",
+                gap: "$2",
+                minWidth: "140px",
+                alignItems: "flex-start",
+                "@bp2": { alignItems: "flex-end" },
+              }}
+            >
+              <Badge
+                size="1"
+                css={{
+                  color: support.style.color,
+                  fontWeight: support.style.fontWeight,
+                }}
+              >
+                {support.text.toUpperCase()}
+              </Badge>
+
+              <Text size="1" css={{ fontWeight: 600, color: "$white" }}>
+                {formatLpt(vote.weight)}
+              </Text>
+
+              {vote.transactionHash && (
+                <Link
+                  href={`https://arbiscan.io/tx/${vote.transactionHash}#eventlog`}
+                  target="_blank"
+                  css={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "$1",
+                    fontSize: "$1",
+                    color: "$neutral11",
+                    textDecoration: "none",
+                    "&:hover": { color: "$primary11" },
+                    "&:focus-visible": {
+                      outline: "2px solid $primary11",
+                      outlineOffset: "2px",
+                      borderRadius: "2px",
+                    },
+                  }}
+                >
+                  {formatTransactionHash(vote.transactionHash)}
+                  <Box as={ArrowTopRightIcon} css={{ width: 12, height: 12 }} />
+                </Link>
+              )}
+            </Flex>
+          </Flex>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Index;
diff --git a/components/Votes/VoteModal/index.tsx b/components/Votes/VoteModal/index.tsx
new file mode 100644
index 00000000..1b448985
--- /dev/null
+++ b/components/Votes/VoteModal/index.tsx
@@ -0,0 +1,211 @@
+import { Box, Text } from "@livepeer/design-system";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+interface VoteModalProps {
+  onClose: () => void;
+  children: React.ReactNode;
+  title?: string;
+  header?: React.ReactNode;
+}
+
+const Index: React.FC<VoteModalProps> = ({
+  onClose,
+  children,
+  title,
+  header,
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Disable scroll on mount
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = "hidden";
+
+    // Focus management
+    const focusableElementsSelector =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const firstFocusableElement = modalRef.current?.querySelectorAll(
+      focusableElementsSelector
+    )[0] as HTMLElement;
+
+    if (firstFocusableElement) {
+      firstFocusableElement.focus();
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+
+      if (e.key === "Tab") {
+        const focusableContent = modalRef.current?.querySelectorAll(
+          focusableElementsSelector
+        );
+        if (!focusableContent) return;
+
+        const focusableArray = Array.from(focusableContent) as HTMLElement[];
+        const firstElement = focusableArray[0];
+        const lastElement = focusableArray[focusableArray.length - 1];
+
+        if (e.shiftKey) {
+          // if shift key pressed for shift + tab combination
+          if (document.activeElement === firstElement) {
+            lastElement.focus(); // add focus for the last focusable element
+            e.preventDefault();
+          }
+        } else {
+          // if tab key is pressed
+          if (document.activeElement === lastElement) {
+            // if focused has reached to last element then focus again first element
+            firstElement.focus(); // add focus for the first focusable element
+            e.preventDefault();
+          }
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = originalStyle;
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+
+  return createPortal(
+    <Box
+      css={{
+        position: "fixed",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        backdropFilter: "blur(4px)",
+        zIndex: 9999,
+      }}
+      onClick={onClose}
+    >
+      <Box
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        css={{
+          position: "relative",
+          backgroundColor: "$neutral3",
+          borderRadius: "$2",
+          width: "75%",
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
+          "@bp2": { width: "50%" },
+          borderTop: "4px solid $primary11",
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Box
+          css={{
+            position: "sticky",
+            top: 0,
+            zIndex: 10,
+            backgroundColor: "$neutral3",
+            paddingLeft: "$4",
+            paddingRight: "$4",
+            paddingTop: "$4",
+            paddingBottom: "$2",
+            borderBottom: "1px solid $neutral5",
+            borderTopLeftRadius: "$2",
+            borderTopRightRadius: "$2",
+          }}
+        >
+          <Box
+            css={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: header ? "$3" : 0,
+            }}
+          >
+            {title && (
+              <Box
+                id="modal-title"
+                css={{ fontSize: "$4", fontWeight: 700, color: "$white" }}
+              >
+                {title}
+              </Box>
+            )}
+            <Box css={{ display: "flex", alignItems: "center", gap: "$3" }}>
+              <Text
+                size="1"
+                variant="neutral"
+                css={{
+                  display: "none",
+                  "@bp2": { display: "block" },
+                  color: "$neutral10",
+                  backgroundColor: "$neutral4",
+                  padding: "2px 6px",
+                  borderRadius: "4px",
+                  fontSize: "10px",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                }}
+              >
+                ESC TO CLOSE
+              </Text>
+              <Box
+                as="button"
+                onClick={onClose}
+                aria-label="Close modal"
+                css={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 28,
+                  height: 28,
+                  borderRadius: "50%",
+                  cursor: "pointer",
+                  border: "none",
+                  backgroundColor: "$neutral5",
+                  color: "$neutral11",
+                  "&:hover": {
+                    backgroundColor: "$green3",
+                    color: "$green11",
+                    transform: "rotate(90deg)",
+                  },
+                  "&:focus-visible": {
+                    outline: "2px solid $primary11",
+                    outlineOffset: "2px",
+                  },
+                  transition: "all 0.2s",
+                }}
+              >
+                <Cross1Icon />
+              </Box>
+            </Box>
+          </Box>
+          {header && <Box>{header}</Box>}
+        </Box>
+
+        <Box
+          css={{
+            overflowY: "auto",
+            paddingLeft: "$4",
+            paddingRight: "$4",
+            paddingTop: "$4",
+            paddingBottom: "$4",
+            maxHeight: "calc(90vh - 100px)",
+          }}
+        >
+          {children}
+        </Box>
+      </Box>
+    </Box>,
+    document.body
+  );
+};
+
+export default Index;
diff --git a/components/Votes/VotePopover/index.tsx b/components/Votes/VotePopover/index.tsx
new file mode 100644
index 00000000..fb09be0d
--- /dev/null
+++ b/components/Votes/VotePopover/index.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import Spinner from "@components/Spinner";
+import { Box, Flex, Link, Text } from "@livepeer/design-system";
+import { ArrowTopRightIcon } from "@radix-ui/react-icons";
+import React from "react";
+
+import { useInfuraVoterVotes } from "../../../hooks/TreasuryVotes/useInfuraVoterVotes";
+import VoteDetail from "../VoteDetail";
+import VoteModal from "../VoteModal";
+
+interface VoterPopoverProps {
+  voter: string;
+  ensName?: string;
+  onClose: () => void;
+}
+
+const Index: React.FC<VoterPopoverProps> = ({ voter, ensName, onClose }) => {
+  const { votes, isLoading } = useInfuraVoterVotes(voter);
+
+  const stats = React.useMemo(() => {
+    if (!votes.length) return null;
+    return {
+      total: votes.length,
+      for: votes.filter((v) => v.choiceID === "1").length,
+      against: votes.filter((v) => v.choiceID === "0").length,
+      abstain: votes.filter((v) => v.choiceID === "2").length,
+    };
+  }, [votes]);
+
+  const summaryHeader = React.useMemo(() => {
+    return (
+      <Box>
+        <Flex css={{ alignItems: "center", gap: "$2", marginBottom: "$2" }}>
+          <Link
+            href={`https://explorer.livepeer.org/accounts/${voter}/delegating`}
+            target="_blank"
+            css={{
+              fontSize: "$1",
+              color: "$primary11",
+              textDecoration: "none",
+              display: "flex",
+              alignItems: "center",
+              gap: "$1",
+              "&:hover": { textDecoration: "underline" },
+            }}
+          >
+            {ensName || voter}
+            <Box as={ArrowTopRightIcon} css={{ width: 12, height: 12 }} />
+          </Link>
+        </Flex>
+        {stats && (
+          <Flex css={{ gap: "$4", alignItems: "center" }}>
+            <Flex css={{ alignItems: "center", gap: "$1" }}>
+              <Text size="1" css={{ color: "$neutral11", fontWeight: 600 }}>
+                Total:
+              </Text>
+              <Text size="1" css={{ color: "$white", fontWeight: 700 }}>
+                {stats.total}
+              </Text>
+            </Flex>
+            <Flex css={{ alignItems: "center", gap: "$1" }}>
+              <Box
+                css={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: "$sky11",
+                }}
+              />
+              <Text size="1" css={{ color: "$neutral11" }}>
+                For: {stats.for}
+              </Text>
+            </Flex>
+            <Flex css={{ alignItems: "center", gap: "$1" }}>
+              <Box
+                css={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: "$tomato11",
+                }}
+              />
+              <Text size="1" css={{ color: "$neutral11" }}>
+                Against: {stats.against}
+              </Text>
+            </Flex>
+            <Flex css={{ alignItems: "center", gap: "$1" }}>
+              <Box
+                css={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: "$neutral11",
+                }}
+              />
+              <Text size="1" css={{ color: "$neutral11" }}>
+                Abstain: {stats.abstain}
+              </Text>
+            </Flex>
+          </Flex>
+        )}
+      </Box>
+    );
+  }, [stats, voter, ensName]);
+
+  return (
+    <VoteModal onClose={onClose} title="Voting History" header={summaryHeader}>
+      {isLoading ? (
+        <Flex
+          css={{
+            justifyContent: "center",
+            alignItems: "center",
+            height: "150px",
+          }}
+        >
+          <Spinner />
+        </Flex>
+      ) : votes.length > 0 ? (
+        <Box
+          css={{
+            position: "relative",
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              left: "7px",
+              top: 0,
+              bottom: 0,
+              width: "2px",
+              backgroundColor: "$neutral5",
+              zIndex: 0,
+            },
+          }}
+        >
+          {votes.map((vote, idx) => (
+            <Box
+              key={vote.transactionHash ?? idx}
+              css={{ position: "relative" }}
+            >
+              <VoteDetail vote={vote} />
+            </Box>
+          ))}
+        </Box>
+      ) : (
+        <Text
+          css={{ color: "$neutral11", textAlign: "center", marginTop: "$4" }}
+        >
+          No votes found for this voter.
+        </Text>
+      )}
+    </VoteModal>
+  );
+};
+
+export default Index;
diff --git a/components/Votes/VoteTable/Views/DesktopVoteTable.tsx b/components/Votes/VoteTable/Views/DesktopVoteTable.tsx
new file mode 100644
index 00000000..9c7e10ec
--- /dev/null
+++ b/components/Votes/VoteTable/Views/DesktopVoteTable.tsx
@@ -0,0 +1,228 @@
+import DataTable from "@components/Table";
+import { formatTransactionHash } from "@lib/utils";
+import { Badge, Box, Link, Text, Tooltip } from "@livepeer/design-system";
+import {
+  ArrowTopRightIcon,
+  CounterClockwiseClockIcon,
+} from "@radix-ui/react-icons";
+import React, { useMemo } from "react";
+import { Column } from "react-table";
+
+import { Vote, VOTING_SUPPORT } from "../../../../lib/api/types/votes";
+
+export interface VoteTableProps {
+  votes: Vote[];
+  formatWeight: (weight: string) => string;
+  onSelect: (voter: { address: string; ensName?: string }) => void;
+  pageSize?: number;
+  totalPages?: number;
+  currentPage?: number;
+  onPageChange?: (page: number) => void;
+}
+
+export const DesktopVoteTable: React.FC<VoteTableProps> = ({
+  votes,
+  formatWeight,
+  onSelect,
+  pageSize = 10,
+}) => {
+  const columns = useMemo<Column<Vote>[]>(
+    () => [
+      {
+        Header: "Voter",
+        accessor: "ensName",
+        id: "voter",
+        Cell: ({ row }) => (
+          <Box css={{ minWidth: 120 }}>
+            <Link
+              href={`https://explorer.livepeer.org/accounts/${row.original.voter}/delegating`}
+              target="_blank"
+              css={{
+                color: "$primary11",
+                textDecoration: "none",
+                "&:hover": { textDecoration: "underline" },
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Text
+                css={{
+                  fontWeight: 600,
+                  color: "$primary11",
+                  whiteSpace: "nowrap",
+                }}
+                size="2"
+              >
+                {row.original.ensName}
+              </Text>
+            </Link>
+          </Box>
+        ),
+      },
+      {
+        Header: "Support",
+        accessor: "choiceID",
+        id: "support",
+        Cell: ({ row }) => {
+          const support =
+            VOTING_SUPPORT[
+              row.original.choiceID as keyof typeof VOTING_SUPPORT
+            ] || VOTING_SUPPORT["2"];
+          return (
+            <Box css={{ minWidth: 80 }}>
+              <Text
+                css={{
+                  whiteSpace: "nowrap",
+                  ...support.style,
+                }}
+                size="2"
+              >
+                {support.text}
+              </Text>
+            </Box>
+          );
+        },
+      },
+      {
+        Header: "Weight",
+        accessor: "weight",
+        id: "weight",
+        Cell: ({ row }) => (
+          <Box css={{ minWidth: 140 }}>
+            <Text
+              css={{
+                fontWeight: 600,
+                color: "$hiContrast",
+                whiteSpace: "nowrap",
+              }}
+              size="2"
+            >
+              {formatWeight(row.original.weight)}
+            </Text>
+          </Box>
+        ),
+        sortType: (rowA, rowB) => {
+          return (
+            parseFloat(rowA.original.weight) - parseFloat(rowB.original.weight)
+          );
+        },
+      },
+      {
+        Header: "Reason",
+        accessor: "reason",
+        id: "reason",
+        Cell: ({ row }) => (
+          <Box css={{ minWidth: 100 }}>
+            <Text
+              size="1"
+              css={{
+                color:
+                  row.original.reason &&
+                  row.original.reason.toLowerCase() === "no reason provided"
+                    ? "$neutral9"
+                    : "$hiContrast",
+              }}
+            >
+              {row.original.reason}
+            </Text>
+          </Box>
+        ),
+      },
+      {
+        Header: "Vote Txn",
+        accessor: "transactionHash",
+        id: "transaction",
+        Cell: ({ row }) => (
+          <Box css={{ minWidth: 130 }}>
+            {row.original.transactionHash ? (
+              <Link
+                href={`https://arbiscan.io/tx/${row.original.transactionHash}#eventlog`}
+                target="_blank"
+                onClickCapture={(e) => e.stopPropagation()}
+                css={{
+                  display: "inline-block",
+                  transition: "transform 0.2s ease",
+                  "&:hover": { transform: "scale(1.1)" },
+                }}
+              >
+                <Badge css={{ cursor: "pointer" }} variant="primary" size="1">
+                  {formatTransactionHash(row.original.transactionHash)}
+                  <Box
+                    css={{ marginLeft: "$1", width: 14, height: 14 }}
+                    as={ArrowTopRightIcon}
+                  />
+                </Badge>
+              </Link>
+            ) : (
+              <Text css={{ color: "$neutral9" }} size="2">
+                N/A
+              </Text>
+            )}
+          </Box>
+        ),
+      },
+      {
+        Header: "",
+        id: "history",
+        Cell: ({ row }) => (
+          <Box css={{ minWidth: 40, textAlign: "right", color: "$primary11" }}>
+            <Tooltip content="See their voting history">
+              <Box
+                as="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelect({
+                    address: row.original.voter,
+                    ensName: row.original.ensName,
+                  });
+                }}
+                css={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  cursor: "pointer",
+                  border: "none",
+                  backgroundColor: "transparent",
+                  color: "$neutral10",
+                  "&:hover": {
+                    color: "$primary11",
+                    backgroundColor: "$primary3",
+                    transform: "rotate(-15deg)",
+                  },
+                  transition: "color .2s, background-color .2s, transform .2s",
+                }}
+              >
+                <Box
+                  as={CounterClockwiseClockIcon}
+                  css={{ width: 16, height: 16 }}
+                />
+              </Box>
+            </Tooltip>
+          </Box>
+        ),
+        disableSortBy: true,
+      },
+    ],
+    [formatWeight, onSelect]
+  );
+
+  return (
+    <Box css={{ display: "none", "@bp2": { display: "block" } }}>
+      <DataTable
+        data={votes}
+        columns={columns}
+        initialState={{
+          pageSize,
+          sortBy: [
+            {
+              id: "weight",
+              desc: true,
+            },
+          ],
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/components/Votes/VoteTable/Views/MobileVoteTable.tsx b/components/Votes/VoteTable/Views/MobileVoteTable.tsx
new file mode 100644
index 00000000..1e185735
--- /dev/null
+++ b/components/Votes/VoteTable/Views/MobileVoteTable.tsx
@@ -0,0 +1,87 @@
+import { Box, Button, Flex, Text } from "@livepeer/design-system";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import React from "react";
+
+import { VoteTableProps } from "./DesktopVoteTable";
+import { VoteView } from "./VoteItem";
+
+export const MobileVoteCards: React.FC<VoteTableProps> = (props) => {
+  const {
+    votes,
+    formatWeight,
+    onSelect,
+    totalPages = 0,
+    currentPage = 1,
+    onPageChange,
+  } = props;
+
+  return (
+    <Box css={{ display: "block", "@bp2": { display: "none" } }}>
+      <Text
+        css={{
+          textAlign: "center",
+          fontSize: "$2",
+          color: "$neutral11",
+          marginTop: "$2",
+          marginBottom: "$3",
+        }}
+      >
+        Click on a vote to view a voter&apos;s proposal voting history.
+      </Text>
+
+      {votes.map((vote) => {
+        return (
+          <VoteView
+            key={vote.transactionHash || vote.voter}
+            vote={vote}
+            onSelect={onSelect}
+            formatWeight={formatWeight}
+            isMobile={true}
+          />
+        );
+      })}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <Flex
+          css={{
+            marginTop: "$4",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: "$4",
+          }}
+        >
+          <Button
+            size="1"
+            disabled={currentPage === 1}
+            onClick={() => onPageChange?.(currentPage - 1)}
+            css={{
+              display: "flex",
+              alignItems: "center",
+              gap: "$1",
+              color: currentPage === 1 ? "$neutral8" : "$white",
+            }}
+          >
+            <ArrowLeftIcon /> Previous
+          </Button>
+          <Text css={{ fontSize: "$1", color: "$neutral11" }}>
+            Page {currentPage} of {totalPages}
+          </Text>
+          <Button
+            size="1"
+            disabled={currentPage === totalPages}
+            onClick={() => onPageChange?.(currentPage + 1)}
+            css={{
+              display: "flex",
+              alignItems: "center",
+              gap: "$1",
+              color: currentPage === totalPages ? "$neutral8" : "$white",
+            }}
+          >
+            Next <ArrowRightIcon />
+          </Button>
+        </Flex>
+      )}
+    </Box>
+  );
+};
diff --git a/components/Votes/VoteTable/Views/VoteItem.tsx b/components/Votes/VoteTable/Views/VoteItem.tsx
new file mode 100644
index 00000000..0419e528
--- /dev/null
+++ b/components/Votes/VoteTable/Views/VoteItem.tsx
@@ -0,0 +1,383 @@
+import { formatTransactionHash } from "@lib/utils";
+import {
+  Badge,
+  Box,
+  Card,
+  Flex,
+  Heading,
+  Link,
+  Text,
+  Tooltip,
+} from "@livepeer/design-system";
+import {
+  ArrowTopRightIcon,
+  CounterClockwiseClockIcon,
+} from "@radix-ui/react-icons";
+
+import { Vote, VOTING_SUPPORT } from "../../../../lib/api/types/votes";
+
+interface VoteViewProps {
+  vote: Vote;
+  onSelect: (voter: { address: string; ensName?: string }) => void;
+  formatWeight: (weight: string) => string;
+  isMobile?: boolean;
+}
+
+export function VoteView({
+  vote,
+  onSelect,
+  formatWeight,
+  isMobile,
+}: VoteViewProps) {
+  return isMobile ? (
+    <MobileVoteView
+      vote={vote}
+      onSelect={onSelect}
+      formatWeight={formatWeight}
+    />
+  ) : (
+    <DesktopVoteView
+      vote={vote}
+      onSelect={onSelect}
+      formatWeight={formatWeight}
+    />
+  );
+}
+
+function MobileVoteView({ vote, onSelect, formatWeight }: VoteViewProps) {
+  const support = VOTING_SUPPORT[vote.choiceID] || VOTING_SUPPORT["2"];
+  const hasReason =
+    vote.reason && vote.reason.toLowerCase() !== "no reason provided";
+
+  return (
+    <Card
+      css={{
+        padding: "$4",
+        marginBottom: "$3",
+        position: "relative",
+        zIndex: 2,
+        backgroundColor: "$neutral3",
+        borderLeft: `4px solid ${support.style.color}`,
+        transition: "all 0.2s ease",
+        "&:hover, &:focus-within": {
+          backgroundColor: "$neutral4",
+        },
+      }}
+    >
+      <Flex css={{ justifyContent: "space-between", alignItems: "flex-start" }}>
+        <Box>
+          <Heading
+            as="h4"
+            css={{ fontSize: "$2", marginBottom: "$1", color: "$primary11" }}
+          >
+            <Link
+              href={`https://explorer.livepeer.org/accounts/${vote.voter}/delegating`}
+              target="_blank"
+              css={{
+                color: "$primary11",
+                textDecoration: "none",
+                "&:hover": { textDecoration: "underline" },
+                "&:focus-visible": {
+                  outline: "2px solid $primary11",
+                  outlineOffset: "2px",
+                  borderRadius: "2px",
+                },
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {vote.ensName}
+            </Link>
+          </Heading>
+          <Text
+            size="1"
+            css={{ color: "$neutral11", marginBottom: "$3", display: "block" }}
+          >
+            {formatWeight(vote.weight)}
+          </Text>
+        </Box>
+        <Badge
+          size="1"
+          css={{
+            color: support.style.color,
+            fontWeight: support.style.fontWeight,
+          }}
+        >
+          {support.text}
+        </Badge>
+      </Flex>
+
+      {hasReason && (
+        <Box
+          css={{
+            marginBottom: "$3",
+            padding: "$2",
+            backgroundColor: "$neutral2",
+            borderRadius: "$1",
+            fontSize: "$1",
+          }}
+        >
+          <Text css={{ color: "$neutral12", fontStyle: "italic" }}>
+            &ldquo;{vote.reason}&rdquo;
+          </Text>
+        </Box>
+      )}
+
+      <Flex css={{ justifyContent: "space-between", alignItems: "center" }}>
+        <Box>
+          {vote.transactionHash ? (
+            <Link
+              href={`https://arbiscan.io/tx/${vote.transactionHash}#eventlog`}
+              target="_blank"
+              onClickCapture={(e) => e.stopPropagation()}
+              css={{
+                display: "inline-block",
+                transition: "transform 0.2s ease",
+                "&:hover": { transform: "scale(1.1)" },
+                "&:focus-visible": {
+                  outline: "2px solid $primary11",
+                  outlineOffset: "2px",
+                  borderRadius: "2px",
+                },
+              }}
+            >
+              <Badge css={{ cursor: "pointer" }} variant="primary" size="1">
+                {formatTransactionHash(vote.transactionHash)}
+                <Box
+                  css={{ marginLeft: "$1", width: 14, height: 14 }}
+                  as={ArrowTopRightIcon}
+                />
+              </Badge>
+            </Link>
+          ) : (
+            <Text css={{ color: "$neutral9" }} size="1">
+              N/A
+            </Text>
+          )}
+        </Box>
+        <Box
+          as="button"
+          css={{
+            display: "flex",
+            alignItems: "center",
+            gap: "$1",
+            color: "$neutral10",
+            cursor: "pointer",
+            border: "none",
+            backgroundColor: "transparent",
+            "&:hover": { color: "$primary11" },
+            "&:focus-visible": {
+              outline: "2px solid $primary11",
+              outlineOffset: "2px",
+              borderRadius: "4px",
+              color: "$primary11",
+            },
+            padding: "$1",
+            transition: "all 0.2s",
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onSelect({ address: vote.voter, ensName: vote.ensName });
+          }}
+        >
+          <Text size="1" css={{ fontWeight: 600, color: "inherit" }}>
+            History
+          </Text>
+          <Box as={CounterClockwiseClockIcon} css={{ width: 14, height: 14 }} />
+        </Box>
+      </Flex>
+    </Card>
+  );
+}
+
+function DesktopVoteView({ vote, onSelect, formatWeight }: VoteViewProps) {
+  const support = VOTING_SUPPORT[vote.choiceID] || VOTING_SUPPORT["2"];
+  return (
+    <Box
+      key={vote.transactionHash || vote.voter}
+      as="tr"
+      css={{
+        backgroundColor: "$neutral3",
+        position: "relative",
+        zIndex: 2,
+        "& > td": { padding: "$2 $3" },
+      }}
+    >
+      <Box
+        as="td"
+        css={{
+          textAlign: "left",
+          color: "$primary11",
+          borderBottom: "1px solid $neutral5",
+        }}
+      >
+        <Link
+          href={`https://explorer.livepeer.org/accounts/${vote.voter}/delegating`}
+          target="_blank"
+          css={{
+            color: "$primary11",
+            textDecoration: "none",
+            "&:hover": { textDecoration: "underline" },
+            "&:focus-visible": {
+              outline: "2px solid $primary11",
+              outlineOffset: "2px",
+              borderRadius: "2px",
+            },
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Text
+            css={{
+              fontWeight: 600,
+              color: "$primary11",
+              whiteSpace: "nowrap",
+            }}
+            size="2"
+          >
+            {vote.ensName}
+          </Text>
+        </Link>
+      </Box>
+      <Box
+        as="td"
+        css={{
+          textAlign: "left",
+          borderBottom: "1px solid $neutral5",
+        }}
+      >
+        <Text
+          css={{
+            fontWeight: 600,
+            whiteSpace: "nowrap",
+            ...support.style,
+          }}
+          size="2"
+        >
+          {support.text}
+        </Text>
+      </Box>
+      <Box
+        as="td"
+        css={{
+          textAlign: "left",
+          color: "$hiContrast",
+          borderBottom: "1px solid $neutral5",
+        }}
+      >
+        <Text
+          css={{
+            fontWeight: 600,
+            color: "$hiContrast",
+            whiteSpace: "nowrap",
+          }}
+          size="2"
+        >
+          {formatWeight(vote.weight)}
+        </Text>
+      </Box>
+      <Box
+        as="td"
+        css={{
+          textAlign: "left",
+          color: "$neutral11",
+          borderBottom: "1px solid $neutral5",
+        }}
+      >
+        <Text
+          size="1"
+          css={{
+            color:
+              vote.reason && vote.reason.toLowerCase() === "no reason provided"
+                ? "$neutral9"
+                : "$hiContrast",
+          }}
+        >
+          {vote.reason}
+        </Text>
+      </Box>
+      <Box
+        as="td"
+        css={{
+          textAlign: "left",
+          borderBottom: "1px solid $neutral5",
+          position: "relative",
+          zIndex: 5,
+        }}
+      >
+        {vote.transactionHash ? (
+          <Link
+            href={`https://arbiscan.io/tx/${vote.transactionHash}#eventlog`}
+            target="_blank"
+            onClickCapture={(e) => e.stopPropagation()}
+            css={{
+              display: "inline-block",
+              transition: "transform 0.2s ease",
+              "&:hover": { transform: "scale(1.1)" },
+              "&:focus-visible": {
+                outline: "2px solid $primary11",
+                outlineOffset: "2px",
+                borderRadius: "2px",
+              },
+            }}
+          >
+            <Badge css={{ cursor: "pointer" }} variant="primary" size="1">
+              {formatTransactionHash(vote.transactionHash)}
+              <Box
+                css={{ marginLeft: "$1", width: 14, height: 14 }}
+                as={ArrowTopRightIcon}
+              />
+            </Badge>
+          </Link>
+        ) : (
+          <Text css={{ color: "$neutral9" }}>N/A</Text>
+        )}
+      </Box>
+      <Box
+        as="td"
+        css={{
+          textAlign: "right",
+          borderBottom: "1px solid $neutral5",
+          color: "$primary11",
+        }}
+      >
+        <Tooltip content="See their voting history">
+          <Box
+            as="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onSelect({ address: vote.voter, ensName: vote.ensName });
+            }}
+            css={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 32,
+              height: 32,
+              borderRadius: "50%",
+              cursor: "pointer",
+              border: "none",
+              backgroundColor: "transparent",
+              color: "$neutral10",
+              "&:hover": {
+                color: "$primary11",
+                backgroundColor: "$primary3",
+                transform: "rotate(-15deg)",
+              },
+              "&:focus-visible": {
+                outline: "2px solid $primary11",
+                outlineOffset: "2px",
+                color: "$primary11",
+                backgroundColor: "$primary3",
+              },
+              transition: "all 0.2s",
+            }}
+          >
+            <Box
+              as={CounterClockwiseClockIcon}
+              css={{ width: 16, height: 16 }}
+            />
+          </Box>
+        </Tooltip>
+      </Box>
+    </Box>
+  );
+}
diff --git a/components/Votes/VoteTable/index.tsx b/components/Votes/VoteTable/index.tsx
new file mode 100644
index 00000000..823bc571
--- /dev/null
+++ b/components/Votes/VoteTable/index.tsx
@@ -0,0 +1,108 @@
+import Spinner from "@components/Spinner";
+import { lptFormatter } from "@lib/utils";
+import { Flex, Text } from "@livepeer/design-system";
+import React, { useMemo, useState } from "react";
+import { useWindowSize } from "react-use";
+
+import { useFetchVotes } from "../../../hooks/TreasuryVotes/useFetchVotes";
+import VoterPopover from "../VotePopover";
+import { DesktopVoteTable } from "./Views/DesktopVoteTable";
+import { MobileVoteCards } from "./Views/MobileVoteTable";
+
+interface VoteTableProps {
+  proposalId: string;
+}
+
+const Index: React.FC<VoteTableProps> = ({ proposalId }) => {
+  const { votes, loading, error } = useFetchVotes(proposalId);
+  const { width } = useWindowSize();
+  const isDesktop = width >= 768;
+
+  const [selectedVoter, setSelectedVoter] = useState<{
+    address: string;
+    ensName?: string;
+  } | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 10;
+
+  const totalWeight = useMemo(
+    () => votes.reduce((sum, v) => sum + parseFloat(v.weight), 0),
+    [votes]
+  );
+
+  const formatWeight = useMemo(
+    () => (w: string) =>
+      `${lptFormatter.format(parseFloat(w) / 1e18)} LPT (${
+        totalWeight > 0 ? ((parseFloat(w) / totalWeight) * 100).toFixed(2) : "0"
+      }%)`,
+    [totalWeight]
+  );
+
+  const paginatedVotesForMobile = useMemo(() => {
+    const sorted = [...votes].sort(
+      (a, b) => parseFloat(b.weight) - parseFloat(a.weight)
+    );
+    const startIndex = (currentPage - 1) * pageSize;
+    return sorted.slice(startIndex, startIndex + pageSize);
+  }, [votes, currentPage, pageSize]);
+
+  const totalPages = Math.ceil(votes.length / pageSize);
+
+  if (loading) {
+    return (
+      <Flex
+        css={{
+          justifyContent: "center",
+          alignItems: "center",
+          height: "150px",
+        }}
+      >
+        <Spinner />
+      </Flex>
+    );
+  }
+  if (error)
+    return (
+      <Text css={{ textAlign: "center", color: "$red9", marginTop: "$4" }}>
+        Error loading votes: {error}
+      </Text>
+    );
+
+  if (!votes.length)
+    return (
+      <Text css={{ textAlign: "center", color: "$neutral11", marginTop: "$4" }}>
+        No votes found for this proposal.
+      </Text>
+    );
+
+  return (
+    <>
+      {isDesktop ? (
+        <DesktopVoteTable
+          votes={votes}
+          formatWeight={formatWeight}
+          onSelect={setSelectedVoter}
+          pageSize={pageSize}
+        />
+      ) : (
+        <MobileVoteCards
+          votes={paginatedVotesForMobile}
+          formatWeight={formatWeight}
+          onSelect={setSelectedVoter}
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+        />
+      )}
+      {selectedVoter && (
+        <VoterPopover
+          voter={selectedVoter.address}
+          ensName={selectedVoter.ensName}
+          onClose={() => setSelectedVoter(null)}
+        />
+      )}
+    </>
+  );
+};
+
+export default Index;
diff --git a/components/VotingWidget/index.tsx b/components/Votes/VotingWidget/index.tsx
similarity index 97%
rename from components/VotingWidget/index.tsx
rename to components/Votes/VotingWidget/index.tsx
index bb02a577..70b40b22 100644
--- a/components/VotingWidget/index.tsx
+++ b/components/Votes/VotingWidget/index.tsx
@@ -1,5 +1,6 @@
 import { PollExtended } from "@lib/api/polls";
 import dayjs from "@lib/dayjs";
+import { abbreviateNumber, formatAddress, fromWei } from "@lib/utils";
 import {
   Box,
   Button,
@@ -19,9 +20,8 @@ import numbro from "numbro";
 import { useEffect, useMemo, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 
-import { abbreviateNumber, fromWei } from "../../lib/utils";
-import Check from "../../public/img/check.svg";
-import Copy from "../../public/img/copy.svg";
+import Check from "../../../public/img/check.svg";
+import Copy from "../../../public/img/copy.svg";
 import VoteButton from "../VoteButton";
 
 type Props = {
@@ -239,11 +239,7 @@ const Index = ({ data }: { data: Props }) => {
                 >
                   <Box as="span" css={{ color: "$neutral11" }}>
                     My Delegate Vote{" "}
-                    {delegate &&
-                      `(${delegate?.id?.replace(
-                        delegate?.id?.slice(5, 39),
-                        "…"
-                      )})`}
+                    {delegate && `(${formatAddress(delegate?.id)})`}
                   </Box>
                   <Box as="span" css={{ fontWeight: 500, color: "white" }}>
                     {data?.delegateVote?.choiceID
@@ -258,8 +254,7 @@ const Index = ({ data }: { data: Props }) => {
                   }}
                 >
                   <Box as="span" css={{ color: "$neutral11" }}>
-                    My Vote (
-                    {accountAddress.replace(accountAddress.slice(5, 39), "…")})
+                    My Vote ({formatAddress(accountAddress)})
                   </Box>
                   <Box
                     as="span"
diff --git a/components/VotingHistoryView/index.tsx b/components/VotingHistoryView/index.tsx
new file mode 100644
index 00000000..14da05ee
--- /dev/null
+++ b/components/VotingHistoryView/index.tsx
@@ -0,0 +1,354 @@
+import { ExplorerTooltip } from "@components/ExplorerTooltip";
+import Spinner from "@components/Spinner";
+import { Badge, Box, Flex, Link, Text } from "@livepeer/design-system";
+import {
+  ArrowTopRightIcon,
+  QuestionMarkCircledIcon,
+} from "@radix-ui/react-icons";
+import { CUBE_TYPE, getCubeData } from "cube/cube-client";
+import { getAccountVotingHistory } from "cube/query-generator";
+import { formatAddress } from "lib/utils";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+const Index = () => {
+  const router = useRouter();
+  const query = router.query;
+  const account = query.account as string;
+
+  const [proposalVotedOn, setProposalVotedOn] = useState();
+  const [votingTurnOut, setVotingTurnOut] = useState();
+  const [votingData, setVotingData] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const getBackgroundColorByStatus = (status: string) => {
+    let bgColor = "#212322";
+    switch (status) {
+      case "Active":
+        bgColor = "#16271F";
+        break;
+      case "Defeated":
+        bgColor = "#321C1D";
+        break;
+      case "Executed":
+        bgColor = "#212322";
+        break;
+      default:
+        break;
+    }
+    return bgColor;
+  };
+
+  const getTextStyleByStatus = (status: string) => {
+    const stylesMap: Record<string, React.CSSProperties> = {
+      Active: {
+        color: "#51A7FD",
+        backgroundColor: "#11233E",
+        maxWidth: 80,
+        justifyContent: "center",
+        display: "flex",
+        borderRadius: 8,
+      },
+      Defeated: {
+        color: "#FF6468",
+        backgroundColor: "#3C181A",
+        maxWidth: 80,
+        justifyContent: "center",
+        display: "flex",
+        borderRadius: 8,
+      },
+      Executed: {
+        color: "#4ABF87",
+        backgroundColor: "#10291E",
+        maxWidth: 80,
+        justifyContent: "center",
+        display: "flex",
+        borderRadius: 8,
+      },
+    };
+
+    return stylesMap[status] || {}; // Returns styles if status is found, otherwise returns an empty object
+  };
+
+  useEffect(() => {
+    const fetchingData = async () => {
+      setIsLoading(true);
+      try {
+        const query = getAccountVotingHistory(account);
+        const response = await getCubeData(query, { type: CUBE_TYPE.SERVER });
+        const data = response?.[0]?.data;
+        if (data.length > 0) {
+          setVotingTurnOut(data[0]["LivepeerProposalStatus.votingTurnout"]);
+          setProposalVotedOn(data[0]["LivepeerProposalStatus.proposalVotedOn"]);
+          setVotingData(data);
+        }
+        setIsLoading(false);
+      } catch (error) {
+        console.error(error);
+        setIsLoading(false);
+      }
+    };
+    fetchingData();
+  }, [account]);
+
+  const getDateTimeAndRound = (date: string, round: string): string => {
+    // Parse the date string to a Date object
+    const dateObj = new Date(date);
+
+    // Function to format the date to "MM/DD/YYYY h:mm:ss a"
+    const formatDate = (date: Date): string => {
+      const months = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ];
+      const hours = date.getHours();
+      const minutes = date.getMinutes();
+      const seconds = date.getSeconds();
+      const ampm = hours >= 12 ? "pm" : "am";
+
+      const day = date.getDate();
+      const month = months[date.getMonth()];
+      const year = date.getFullYear();
+      const formattedTime = `${month} ${day}, ${year} ${hours % 12 || 12}:${
+        minutes < 10 ? "0" + minutes : minutes
+      }:${seconds < 10 ? "0" + seconds : seconds} ${ampm}`;
+
+      return formattedTime;
+    };
+
+    // Round logic (In case the round value needs transformation, it's done here)
+    const roundNumber = round.split("-")[0]; // Assuming round is in the format "3466-01-01T00:00:00.000", just using the first part
+
+    // Format date
+    const formattedDate = formatDate(dateObj);
+
+    // Return the final output in the required format
+    return `${formattedDate} - Round #${roundNumber}`;
+  };
+
+  if (isLoading) {
+    return (
+      <Flex
+        css={{
+          paddingTop: "$5",
+          width: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Spinner />
+      </Flex>
+    );
+  }
+  return (
+    <div>
+      <div style={{ display: "flex", flexDirection: "row", marginTop: 20 }}>
+        <div
+          style={{
+            padding: 20,
+            backgroundColor: "#191D1B",
+            width: 300,
+            marginRight: 15,
+            borderRadius: 8,
+          }}
+        >
+          <div style={{ display: "flex", flexDirection: "row" }}>
+            <div style={{ color: "#66736D", fontSize: 13 }}>
+              PROPOSALS VOTED ON
+            </div>
+            <ExplorerTooltip
+              multiline
+              content={
+                <Box>
+                  The total number of governance proposals this orchestrator has
+                  participated in by casting a vote.
+                </Box>
+              }
+            >
+              <Flex css={{ marginLeft: "$1" }}>
+                <Box
+                  as={QuestionMarkCircledIcon}
+                  css={{ color: "$neutral11" }}
+                />
+              </Flex>
+            </ExplorerTooltip>
+          </div>
+          <div style={{ fontSize: 27, marginTop: 6 }}>{proposalVotedOn}</div>
+        </div>
+
+        <div
+          style={{
+            padding: 20,
+            backgroundColor: "#191D1B",
+            width: 300,
+            marginRight: 15,
+            borderRadius: 8,
+          }}
+        >
+          <div style={{ display: "flex", flexDirection: "row" }}>
+            <div style={{ color: "#66736D", fontSize: 13 }}>VOTING TURNOUT</div>
+            <ExplorerTooltip
+              multiline
+              content={
+                <Box>
+                  The percentage of total governance proposals this orchestrator
+                  voted on, showing how actively they participate in protocol
+                  decisions.
+                </Box>
+              }
+            >
+              <Flex css={{ marginLeft: "$1" }}>
+                <Box
+                  as={QuestionMarkCircledIcon}
+                  css={{ color: "$neutral11" }}
+                />
+              </Flex>
+            </ExplorerTooltip>
+          </div>
+          <div style={{ fontSize: 27, marginTop: 6 }}>{votingTurnOut}%</div>
+        </div>
+      </div>
+      <Box css={{ marginTop: "$4" }}>
+        {votingData &&
+          // @ts-expect-error - votingData is an array of objects
+          votingData.map((el, index) => {
+            const status = el["LivepeerProposalStatus.status"];
+            const statusStyle = getTextStyleByStatus(status);
+            return (
+              <Box
+                key={index}
+                css={{
+                  padding: "$4",
+                  backgroundColor: getBackgroundColorByStatus(status),
+                  marginTop: "$3",
+                  borderRadius: "$2",
+                  transition: "all 0.2s ease",
+                  "&:hover, &:focus-within": {
+                    transform: "translateY(-2px)",
+                    filter: "brightness(1.1)",
+                  },
+                }}
+              >
+                <Flex
+                  css={{
+                    justifyContent: "space-between",
+                    alignItems: "flex-start",
+                    flexDirection: "column",
+                    "@bp2": { flexDirection: "row" },
+                    gap: "$3",
+                  }}
+                >
+                  <Box css={{ flex: 1 }}>
+                    <Text
+                      css={{
+                        fontSize: "$3",
+                        marginBottom: "$2",
+                        fontWeight: 600,
+                        color: "$white",
+                        display: "block",
+                      }}
+                    >
+                      {el["LivepeerProposalStatus.nameOfProposal"] ||
+                        "Unknown Proposal"}
+                    </Text>
+                    <Flex
+                      css={{
+                        gap: "$3",
+                        alignItems: "center",
+                        marginBottom: "$2",
+                      }}
+                    >
+                      <Text size="1" css={{ color: "$neutral11" }}>
+                        {getDateTimeAndRound(
+                          el["LivepeerProposalStatus.date"],
+                          el["LivepeerProposalStatus.round"]
+                        )}
+                      </Text>
+                      <Text size="1" css={{ color: "$neutral11" }}>
+                        Proposed by{" "}
+                        <Link
+                          href={`https://explorer.livepeer.org/accounts/${el.orchestratorId}/delegating`}
+                          css={{
+                            color: "$primary11",
+                            textDecoration: "none",
+                            "&:hover": { textDecoration: "underline" },
+                            "&:focus-visible": {
+                              outline: "2px solid $primary11",
+                              outlineOffset: "2px",
+                              borderRadius: "2px",
+                            },
+                          }}
+                        >
+                          livepeer.eth
+                        </Link>
+                      </Text>
+                    </Flex>
+                  </Box>
+
+                  <Flex
+                    css={{
+                      flexDirection: "column",
+                      alignItems: "flex-start",
+                      "@bp2": { alignItems: "flex-end" },
+                      gap: "$2",
+                      minWidth: 120,
+                    }}
+                  >
+                    <Badge
+                      css={{
+                        color: statusStyle.color as string,
+                        backgroundColor: statusStyle.backgroundColor as string,
+                        fontWeight: 600,
+                        padding: "$1 $2",
+                        borderRadius: "$1",
+                        fontSize: "10px",
+                      }}
+                    >
+                      {status.toUpperCase()}
+                    </Badge>
+
+                    <Link
+                      href={`https://explorer.livepeer.org/accounts/${el["LivepeerProposalStatus.voter"]}/delegating`}
+                      css={{
+                        textDecoration: "none",
+                        fontSize: "$1",
+                        color: "$neutral11",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "$1",
+                        "&:hover": { color: "$primary11" },
+                        "&:focus-visible": {
+                          outline: "2px solid $primary11",
+                          outlineOffset: "2px",
+                          borderRadius: "2px",
+                          color: "$primary11",
+                        },
+                      }}
+                    >
+                      {formatAddress(el["LivepeerProposalStatus.voter"])}
+                      <Box
+                        as={ArrowTopRightIcon}
+                        css={{ width: 12, height: 12 }}
+                      />
+                    </Link>
+                  </Flex>
+                </Flex>
+              </Box>
+            );
+          })}
+      </Box>
+    </div>
+  );
+};
+
+export default Index;
diff --git a/cube/cube-client.ts b/cube/cube-client.ts
new file mode 100644
index 00000000..6bcc2026
--- /dev/null
+++ b/cube/cube-client.ts
@@ -0,0 +1,46 @@
+import cubejs, { Query } from "@cubejs-client/core";
+
+export enum CUBE_TYPE {
+  SERVER = "SERVER",
+  CLIENT = "CLIENT",
+  PUBLIC = "PUBLIC",
+}
+
+const CUBE_BASE_URL = "https://cube.dev.analytics.pyor.xyz";
+const cubePublicAuthToken = process.env.CUBE_PUBLIC_TOKEN || "";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const cubejsApiClient = cubejs("CUBEJS-API-TOKEN", {
+  apiUrl: `/api/services/cube/cubejs-api/v1`,
+});
+
+const cubejsApiPublic = cubejs(cubePublicAuthToken, {
+  apiUrl: `${CUBE_BASE_URL}/cubejs-api/v1`,
+});
+
+export async function getCubeData(
+  query: Query,
+  options: {
+    type: CUBE_TYPE;
+    headerData?: { token: string };
+  } = {
+    type: CUBE_TYPE.CLIENT,
+  }
+) {
+  const cubejsApi =
+    options.type === CUBE_TYPE.CLIENT
+      ? cubejsApiPublic
+      : options.type === CUBE_TYPE.SERVER
+      ? cubejs(options.headerData?.token || "", {
+          apiUrl: `${CUBE_BASE_URL}/cubejs-api/v1`,
+        })
+      : cubejsApiPublic;
+
+  try {
+    const resultSet = await cubejsApi.load(query);
+    const response = resultSet.rawData();
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+}
diff --git a/cube/query-generator.ts b/cube/query-generator.ts
new file mode 100644
index 00000000..6f819d9e
--- /dev/null
+++ b/cube/query-generator.ts
@@ -0,0 +1,76 @@
+import { Query } from "@cubejs-client/core";
+
+export const getAccountVotingHistory = (id: string): Query => {
+  // @ts-expect-error - this is a string query
+  return `{
+    "measures": [
+      "LivepeerProposalStatus.count",
+      "LivepeerProposalStatus.votingTurnout",
+      "LivepeerProposalStatus.proposalVotedOn"
+    ],
+    "order": {
+      "LivepeerProposalStatus.count": "desc"
+    },
+    "dimensions": [
+      "LivepeerProposalStatus.date",
+      "LivepeerProposalStatus.round",
+      "LivepeerProposalStatus.eventTxnHash",
+      "LivepeerProposalStatus.nameOfProposal",
+      "LivepeerProposalStatus.voteType",
+      "LivepeerProposalStatus.status",
+      "LivepeerProposalStatus.proposedBy",
+      "LivepeerProposalStatus.voter"
+    ],
+    "filters": [
+      {
+        "member": "LivepeerProposalStatus.voter",
+        "operator": "equals",
+        "values": [
+          "${id}"
+        ]
+      }
+    ]
+  }`;
+};
+
+export const getOrchestratorsVotingHistory = () => {
+  return `{
+    "measures": [
+      "LivepeerVoteProposals.count",
+      "LivepeerVoteProposals.numOfProposals",
+      "LivepeerVoteProposals.numOfVoteCasted"
+    ],
+    "order": {
+      "LivepeerVoteProposals.count": "desc"
+    },
+    "dimensions": [
+      "LivepeerVoteProposals.date",
+      "LivepeerVoteProposals.voter",
+      "LivepeerVoteProposals.eventTxnsHash",
+      "LivepeerVoteProposals.voteType"
+    ]
+  }`;
+};
+
+export const getAccountVoterSummary = (id: string): Query => {
+  // @ts-expect-error - this is a string query
+  return `{
+    "measures": [
+      "LivepeerVoteProposals.count",
+      "LivepeerVoteProposals.numOfProposals",
+      "LivepeerVoteProposals.numOfVoteCasted"
+    ],
+    "dimensions": [
+      "LivepeerVoteProposals.voter"
+    ],
+    "filters": [
+      {
+        "member": "LivepeerVoteProposals.voter",
+        "operator": "equals",
+        "values": [
+          "${id}"
+        ]
+      }
+    ]
+  }`;
+};
diff --git a/hooks/TreasuryVotes/useFetchVotes.ts b/hooks/TreasuryVotes/useFetchVotes.ts
new file mode 100644
index 00000000..ebed500d
--- /dev/null
+++ b/hooks/TreasuryVotes/useFetchVotes.ts
@@ -0,0 +1,95 @@
+import { getEnsForVotes } from "@lib/api/ens";
+import {
+  CONTRACT_ADDRESS,
+  contractInterface,
+  provider,
+  VOTECAST_TOPIC0,
+} from "@lib/chains";
+import { formatAddress } from "@lib/utils";
+import { useEffect, useState } from "react";
+
+import { Vote } from "../../lib/api/types/votes";
+
+export const useFetchVotes = (proposalId: string) => {
+  const [votes, setVotes] = useState<Vote[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!proposalId) {
+      setVotes([]);
+      setLoading(false);
+      return;
+    }
+
+    const fetchVotes = async () => {
+      try {
+        const logs = await provider.getLogs({
+          address: CONTRACT_ADDRESS,
+          fromBlock: "earliest",
+          toBlock: "latest",
+          topics: [VOTECAST_TOPIC0],
+        });
+
+        const decodedVotes = logs
+          .map((log) => {
+            const decoded = contractInterface.parseLog(log);
+            return {
+              transactionHash: log.transactionHash,
+              voter: decoded?.args.voter.toLowerCase() || "",
+              choiceID: decoded?.args.support.toString() || "",
+              proposalId: decoded?.args.proposalId.toString() || "",
+              weight: decoded?.args.weight.toString() || "0",
+              reason: decoded?.args.reason || "No reason provided",
+            };
+          })
+          .filter((vote) => vote.proposalId === proposalId)
+
+          .sort((a, b) => parseFloat(b.weight) - parseFloat(a.weight));
+
+        const uniqueVoters = Array.from(
+          new Set(decodedVotes.map((v) => v.voter))
+        );
+        const localEnsCache: { [address: string]: string } = {};
+
+        await Promise.all(
+          uniqueVoters.map(async (address) => {
+            try {
+              if (localEnsCache[address]) {
+                return;
+              }
+              const ensAddress = await getEnsForVotes(address);
+
+              if (ensAddress && ensAddress.name) {
+                localEnsCache[address] = ensAddress.name;
+              } else {
+                localEnsCache[address] = formatAddress(address);
+              }
+            } catch (e) {
+              console.warn(`Failed to fetch ENS for ${address}`, e);
+            }
+          })
+        );
+
+        setVotes(
+          decodedVotes.map((vote) => ({
+            ...vote,
+            ensName: localEnsCache[vote.voter],
+          }))
+        );
+      } catch (error) {
+        console.error("Error fetching logs from Infura:", error);
+        setError("Failed to fetch votes");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchVotes();
+  }, [proposalId]);
+
+  return {
+    votes,
+    loading,
+    error,
+  };
+};
diff --git a/hooks/TreasuryVotes/useInfuraVoterVotes.ts b/hooks/TreasuryVotes/useInfuraVoterVotes.ts
new file mode 100644
index 00000000..87283a28
--- /dev/null
+++ b/hooks/TreasuryVotes/useInfuraVoterVotes.ts
@@ -0,0 +1,96 @@
+import { getProposalsByIds } from "@lib/api";
+import {
+  CONTRACT_ADDRESS,
+  contractInterface,
+  provider,
+  VOTECAST_TOPIC0,
+} from "@lib/chains";
+import { GetProposalsByIdsQueryResult } from "apollo";
+import { ethers } from "ethers";
+import { useEffect, useMemo, useState } from "react";
+import useSWR from "swr";
+
+import { Vote } from "../../lib/api/types/votes";
+
+export function useInfuraVoterVotes(voter: string) {
+  const [logsLoading, setLogsLoading] = useState(true);
+  const [rawVotes, setRawVotes] = useState<Vote[]>([]);
+  const proposalIds = useMemo(
+    () => Array.from(new Set(rawVotes.map((v) => v.proposalId))),
+    [rawVotes]
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    async function fetch() {
+      setLogsLoading(true);
+      try {
+        const topic = ethers.utils.zeroPad(voter, 32);
+        const logs = await provider.getLogs({
+          address: CONTRACT_ADDRESS,
+          fromBlock: "earliest",
+          toBlock: "latest",
+          topics: [VOTECAST_TOPIC0, ethers.utils.hexlify(topic)],
+        });
+        if (cancelled) return;
+        const transactions = logs.map((log) => {
+          const args = contractInterface.parseLog(log).args;
+          return {
+            transactionHash: log.transactionHash,
+            voter: args.voter,
+            choiceID: args.support.toString(),
+            proposalId: args.proposalId.toString(),
+            weight: args.weight.toString(),
+            reason: args.reason ?? "",
+          };
+        });
+        setRawVotes(transactions);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        if (!cancelled) setLogsLoading(false);
+      }
+    }
+    fetch();
+    return () => {
+      cancelled = true;
+    };
+  }, [voter]);
+
+  const { data, isLoading: proposalsLoading } = useSWR<
+    GetProposalsByIdsQueryResult["data"]
+  >(
+    proposalIds.length > 0 ? [`/api/treasury/proposals`, proposalIds] : null,
+    async () => {
+      const { proposals } = await getProposalsByIds(proposalIds);
+      return proposals.data as GetProposalsByIdsQueryResult["data"];
+    }
+  );
+
+  const votes: Vote[] = useMemo(() => {
+    if (logsLoading || proposalsLoading) return [];
+    const map = new Map<string, { description: string; voteEnd: number }>();
+    data?.treasuryProposals?.forEach((p) => {
+      map.set(p.id, {
+        description: p.description || "",
+        voteEnd: Number(p.voteEnd) || 0,
+      });
+    });
+    return rawVotes
+      .map((r) => {
+        const meta = map.get(r.proposalId) ?? { description: "", voteEnd: 0 };
+        const title =
+          (meta.description.split("\n")[0] || "").replace(/^#\s*/, "") ||
+          "Unknown Proposal";
+        return {
+          ...r,
+          endVote: meta.voteEnd,
+          description: meta.description,
+          proposalTitle: title,
+        };
+      })
+      .sort((a, b) => b.endVote - a.endVote);
+  }, [rawVotes, data, logsLoading, proposalsLoading]);
+
+  return { votes, isLoading: logsLoading || proposalsLoading };
+}
diff --git a/hooks/useSwr.tsx b/hooks/useSwr.tsx
index 6da995cc..57492d30 100644
--- a/hooks/useSwr.tsx
+++ b/hooks/useSwr.tsx
@@ -21,6 +21,7 @@ import {
   RegisteredToVote,
   VotingPower,
 } from "@lib/api/types/get-treasury-proposal";
+import { formatAddress } from "@lib/utils";
 import useSWR from "swr";
 import { Address } from "viem";
 
@@ -39,7 +40,7 @@ export const useEnsData = (address: string | undefined | null): EnsIdentity => {
 
   const fallbackIdentity: EnsIdentity = {
     id: address ?? "",
-    idShort: address?.replace(address?.slice(6, 38), "…") ?? "",
+    idShort: formatAddress(address),
     name: null,
   };
 
diff --git a/layouts/account.tsx b/layouts/account.tsx
index 508b8f29..15c7127e 100644
--- a/layouts/account.tsx
+++ b/layouts/account.tsx
@@ -5,6 +5,7 @@ import HistoryView from "@components/HistoryView";
 import OrchestratingView from "@components/OrchestratingView";
 import Profile from "@components/Profile";
 import Spinner from "@components/Spinner";
+import VotingHistoryView from "@components/VotingHistoryView";
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { getLayout } from "@layouts/main";
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
@@ -43,9 +44,18 @@ export interface TabType {
   isActive?: boolean;
 }
 
-type TabTypeEnum = "delegating" | "orchestrating" | "history";
+type TabTypeEnum =
+  | "delegating"
+  | "orchestrating"
+  | "history"
+  | "voting-history";
 
-const ACCOUNT_VIEWS: TabTypeEnum[] = ["delegating", "orchestrating", "history"];
+const ACCOUNT_VIEWS: TabTypeEnum[] = [
+  "delegating",
+  "orchestrating",
+  "history",
+  "voting-history",
+];
 
 const AccountLayout = () => {
   /* PART OF https://github.com/livepeer/explorer/pull/427 - TODO: REMOVE ONCE SERVER-SIDE ISSUE IS FIXED */
@@ -374,6 +384,7 @@ const AccountLayout = () => {
             />
           )}
           {view === "history" && <HistoryView />}
+          {view === "voting-history" && <VotingHistoryView />}
         </Flex>
         {(isOrchestrator || isMyDelegate || isDelegatingAndIsMyAccountView) &&
           (width > 1020 ? (
@@ -447,6 +458,11 @@ function getTabs(
       href: `/accounts/${account}/history`,
       isActive: view === "history",
     },
+    {
+      name: "Voting History",
+      href: `/accounts/${account}/voting_history`,
+      isActive: view === "voting-history",
+    },
   ];
   if (isOrchestrator || isMyDelegate) {
     tabs.unshift({
diff --git a/layouts/main.tsx b/layouts/main.tsx
index 24ed02b0..094c73cf 100644
--- a/layouts/main.tsx
+++ b/layouts/main.tsx
@@ -15,7 +15,7 @@ import TxSummaryDialog from "@components/TxSummaryDialog";
 import URLVerificationBanner from "@components/URLVerificationBanner";
 import { IS_L2 } from "@lib/chains";
 import { globalStyles } from "@lib/globalStyles";
-import { EMPTY_ADDRESS } from "@lib/utils";
+import { EMPTY_ADDRESS, formatAddress } from "@lib/utils";
 import {
   Badge,
   Box,
@@ -856,13 +856,10 @@ const ContractAddressesPopover = ({ activeChain }: { activeChain?: Chain }) => {
                           }}
                           size="2"
                         >
-                          {contractAddresses?.[
-                            key as keyof typeof contractAddresses
-                          ]?.address?.replace(
+                          {formatAddress(
                             contractAddresses?.[
                               key as keyof typeof contractAddresses
-                            ]?.address?.slice(7, 37) ?? "",
-                            "…"
+                            ]?.address
                           )}
                         </Text>
                       </A>
diff --git a/lib/api/ens.ts b/lib/api/ens.ts
index 293a4e1d..777fd7a8 100644
--- a/lib/api/ens.ts
+++ b/lib/api/ens.ts
@@ -1,4 +1,5 @@
 import { l1Provider } from "@lib/chains";
+import { formatAddress } from "@lib/utils";
 import sanitizeHtml from "sanitize-html";
 
 import { EnsIdentity } from "./types/get-ens";
@@ -100,3 +101,15 @@ export const nl2br = (str, is_xhtml = true) => {
     "$1" + breakTag + "$2"
   );
 };
+
+export const getEnsForVotes = async (address: string | null | undefined) => {
+  const idShort = formatAddress(address);
+
+  const name = address ? await l1Provider.lookupAddress(address) : null;
+
+  return {
+    id: address ?? "",
+    idShort: idShort ?? "",
+    name,
+  };
+};
diff --git a/lib/api/ssr.ts b/lib/api/ssr.ts
index 1ee96be2..7b5c43e5 100644
--- a/lib/api/ssr.ts
+++ b/lib/api/ssr.ts
@@ -9,6 +9,9 @@ import {
   EventsQuery,
   EventsQueryVariables,
   getApollo,
+  GetProposalsByIdsDocument,
+  GetProposalsByIdsQuery,
+  GetProposalsByIdsQueryVariables,
   OrchestratorsDocument,
   OrchestratorsQuery,
   OrchestratorsQueryVariables,
@@ -103,6 +106,20 @@ export async function getEvents(client = getApollo(), first = 100) {
   };
 }
 
+export async function getProposalsByIds(ids: string[], client = getApollo()) {
+  const proposals = await client.query<
+    GetProposalsByIdsQuery,
+    GetProposalsByIdsQueryVariables
+  >({
+    query: GetProposalsByIdsDocument,
+    variables: { ids },
+  });
+  return {
+    fallback: {},
+    proposals,
+  };
+}
+
 export const server =
   process.env.NODE_ENV !== "production"
     ? "http://localhost:3000"
diff --git a/lib/api/types/votes.ts b/lib/api/types/votes.ts
new file mode 100644
index 00000000..8260d5aa
--- /dev/null
+++ b/lib/api/types/votes.ts
@@ -0,0 +1,20 @@
+export interface Vote {
+  transactionHash: string;
+  voter: string;
+  choiceID: string;
+  proposalId: string;
+  weight: string;
+  reason?: string;
+  ensName?: string;
+  endVote?: number;
+  description?: string;
+  proposalTitle?: string;
+}
+
+export const VOTING_SUPPORT = {
+  "0": { text: "Against", style: { color: "$tomato11", fontWeight: 600 } },
+  "1": { text: "For", style: { color: "$sky11", fontWeight: 600 } },
+  "2": { text: "Abstain", style: { color: "$neutral11", fontWeight: 600 } },
+} as const;
+
+export type SupportKey = keyof typeof VOTING_SUPPORT;
diff --git a/lib/chains.ts b/lib/chains.ts
index 91918167..85d87078 100644
--- a/lib/chains.ts
+++ b/lib/chains.ts
@@ -246,3 +246,17 @@ export const l2Provider = new ethers.providers.JsonRpcProvider(
 export function isL2ChainId(chainId: number | undefined): boolean {
   return L2_CHAIN_IDS.some((e) => e.id === chainId);
 }
+
+// Votecast Constants
+export const INFURA_RPC_URL = `https://arbitrum-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`;
+export const CONTRACT_ADDRESS = "0xcfe4e2879b786c3aa075813f0e364bb5accb6aa0";
+
+export const VOTECAST_TOPIC0 = ethers.utils.id(
+  "VoteCast(address,uint256,uint8,uint256,string)"
+);
+
+export const provider = new ethers.providers.JsonRpcProvider(INFURA_RPC_URL);
+
+export const contractInterface = new ethers.utils.Interface([
+  "event VoteCast(address indexed voter, uint256 proposalId, uint8 support, uint256 weight, string reason)",
+]);
diff --git a/lib/orchestrator.ts b/lib/orchestrator.ts
new file mode 100644
index 00000000..5ad32d8e
--- /dev/null
+++ b/lib/orchestrator.ts
@@ -0,0 +1,4 @@
+export enum OrchestratorTabs {
+  YIELD_OVERVIEW = "Yield Overview",
+  VOTING_HISTORY = "Voting History",
+}
diff --git a/lib/utils.test.ts b/lib/utils.test.ts
index e125fbbd..02312d45 100644
--- a/lib/utils.test.ts
+++ b/lib/utils.test.ts
@@ -6,12 +6,12 @@ import {
   avg,
   checkAddressEquality,
   EMPTY_ADDRESS,
+  formatAddress,
   fromWei,
   getDelegatorStatus,
   getHint,
   getPercentChange,
   isImageUrl,
-  shortenAddress,
   simulateNewActiveSetOrder,
   textTruncate,
   toWei,
@@ -336,19 +336,18 @@ describe("isImageUrl", () => {
   });
 });
 
-describe("shortenAddress", () => {
+describe("formatAddress", () => {
   it("shortens a normal ethereum address", () => {
     const addr = "0x1234567890abcdef1234567890abcdef12345678";
-    const shortened = shortenAddress(addr);
+    const shortened = formatAddress(addr);
 
     // Implementation: replace address.slice(5, 39) with "…"
-    const expected = addr.slice(0, 5) + "…" + addr.slice(39);
+    const expected = addr.slice(0, 6) + "…" + addr.slice(-4);
 
     expect(shortened).toBe(expected);
   });
 
   it("returns empty string for falsy address", () => {
-    // @ts-expect-error testing runtime behavior
-    expect(shortenAddress(null)).toBe("");
+    expect(formatAddress(null)).toBe("");
   });
 });
diff --git a/lib/utils.tsx b/lib/utils.tsx
index 97bdbbf4..ab154555 100644
--- a/lib/utils.tsx
+++ b/lib/utils.tsx
@@ -272,10 +272,33 @@ export const isImageUrl = (url: string): boolean => {
   return /\.(jpg|jpeg|png|gif|webp)$/i.test(url);
 };
 
-/**
- * Shorten an Ethereum address for display.
- * @param address - The address to shorten.
- * @returns The shortened address.
- */
-export const shortenAddress = (address: string) =>
-  address?.replace(address.slice(5, 39), "…") ?? "";
+export const lptFormatter = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+export const formatLpt = (w: string) => {
+  return `${lptFormatter.format(parseFloat(w) / 1e18)} LPT`;
+};
+
+export const formatAddress = (
+  addr: string | null | undefined,
+  startLength = 6,
+  endLength = 4
+): string => {
+  if (!addr) return "";
+  if (addr.endsWith(".xyz")) {
+    return addr.length > 21 ? `${addr.slice(0, 6)}...${addr.slice(-6)}` : addr;
+  }
+  if (addr.endsWith(".eth") && addr.length < 21) {
+    return addr;
+  }
+  return addr.length > 21
+    ? `${addr.slice(0, startLength)}…${addr.slice(-endLength)}`
+    : addr;
+};
+
+export const formatTransactionHash = (id: string | null | undefined) => {
+  if (!id) return "";
+  return id.replace(id.slice(6, 62), "…");
+};
diff --git a/package.json b/package.json
index ca5e0867..aa5b75b7 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.13.1",
+    "@cubejs-client/core": "^1.6.1",
+    "@cubejs-client/react": "^1.6.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@graphql-tools/delegate": "8.8.0",
diff --git a/pages/accounts/[account]/voting_history.tsx b/pages/accounts/[account]/voting_history.tsx
new file mode 100644
index 00000000..b12a0a47
--- /dev/null
+++ b/pages/accounts/[account]/voting_history.tsx
@@ -0,0 +1,68 @@
+import AccountLayout from "@layouts/account";
+import { getLayout } from "@layouts/main";
+import { getAccount, getSortedOrchestrators } from "@lib/api/ssr";
+import { EnsIdentity } from "@lib/api/types/get-ens";
+import {
+  AccountQueryResult,
+  getApollo,
+  OrchestratorsSortedQueryResult,
+} from "apollo";
+
+type PageProps = {
+  account: AccountQueryResult["data"];
+  sortedOrchestrators: OrchestratorsSortedQueryResult["data"];
+  fallback: { [key: string]: EnsIdentity };
+};
+
+const VotingHistory = () => <AccountLayout />;
+
+VotingHistory.getLayout = getLayout;
+
+export const getStaticPaths = async () => {
+  const { sortedOrchestrators } = await getSortedOrchestrators();
+
+  return {
+    paths:
+      sortedOrchestrators?.data?.transcoders?.map((t) => ({
+        params: { account: t.id },
+      })) ?? [],
+    fallback: "blocking",
+  };
+};
+
+export const getStaticProps = async (context) => {
+  try {
+    const client = getApollo();
+    const { account, fallback } = await getAccount(
+      client,
+      context.params?.account?.toString().toLowerCase()
+    );
+
+    const { sortedOrchestrators, fallback: sortedOrchestratorsFallback } =
+      await getSortedOrchestrators(client);
+
+    if (!account.data || !sortedOrchestrators.data) {
+      return null;
+    }
+
+    const props: PageProps = {
+      account: account.data,
+      sortedOrchestrators: sortedOrchestrators.data,
+      fallback: {
+        ...sortedOrchestratorsFallback,
+        ...fallback,
+      },
+    };
+
+    return {
+      props,
+      revalidate: 600,
+    };
+  } catch (e) {
+    console.error(e);
+  }
+
+  return null;
+};
+
+export default VotingHistory;
diff --git a/pages/index.tsx b/pages/index.tsx
index d5a52dc3..e927d6d1 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,14 +4,19 @@ import ErrorComponent from "@components/Error";
 import type { Group } from "@components/ExplorerChart";
 import ExplorerChart from "@components/ExplorerChart";
 import OrchestratorList from "@components/OrchestratorList";
+import OrchestratorVotingList, {
+  VoterSummary,
+} from "@components/OrchestratorVotingList";
 import RoundStatus from "@components/RoundStatus";
 import Spinner from "@components/Spinner";
 import TransactionsList, {
   FILTERED_EVENT_TYPENAMES,
 } from "@components/TransactionsList";
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
+import { getLayout } from "@layouts/main";
 import { HomeChartData } from "@lib/api/types/get-chart-data";
 import { EnsIdentity } from "@lib/api/types/get-ens";
+import { OrchestratorTabs } from "@lib/orchestrator";
 import {
   Box,
   Button,
@@ -21,6 +26,9 @@ import {
   Link as A,
 } from "@livepeer/design-system";
 import { ArrowRightIcon } from "@modulz/radix-icons";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@reach/tabs";
+import { CUBE_TYPE, getCubeData } from "cube/cube-client";
+import { getOrchestratorsVotingHistory } from "cube/query-generator";
 import { useChartData } from "hooks";
 import Link from "next/link";
 import { useMemo, useState } from "react";
@@ -268,9 +276,16 @@ type PageProps = {
   events: EventsQueryResult["data"] | null;
   protocol: ProtocolQueryResult["data"] | null;
   fallback: { [key: string]: EnsIdentity };
+  initialVoterData?: VoterSummary[];
 };
 
-const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
+const Home = ({
+  hadError,
+  orchestrators,
+  events,
+  protocol,
+  initialVoterData,
+}: PageProps) => {
   const allEvents = useMemo(
     () =>
       events?.transactions
@@ -413,6 +428,95 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
               </Flex>
             </Flex>
 
+            <Tabs defaultValue={OrchestratorTabs["Yield Overview"]}>
+              {({ selectedIndex, focusedIndex }) => {
+                const getTabStyle = (index) => ({
+                  borderBottom: `4px solid ${
+                    selectedIndex === index
+                      ? "#6ec08d"
+                      : focusedIndex === index
+                      ? "#141716"
+                      : "#141716"
+                  }`,
+                  backgroundColor: "#141716",
+                  borderWidth: 0,
+                  borderBottomWidth: 1,
+                  paddingBottom: 12,
+                });
+                return (
+                  <>
+                    <TabList>
+                      <Tab style={getTabStyle(0)}>Yield Overview</Tab>
+                      <Tab style={getTabStyle(1)}>Voting History</Tab>
+                    </TabList>
+                    <TabPanels>
+                      <TabPanel>
+                        <Box>
+                          <OrchestratorList
+                            data={orchestrators?.transcoders}
+                            pageSize={20}
+                            protocolData={protocol?.protocol}
+                          />
+                        </Box>
+                      </TabPanel>
+                      <TabPanel>
+                        <Box>
+                          <OrchestratorVotingList
+                            initialVoterData={initialVoterData}
+                            pageSize={20}
+                          />
+                        </Box>
+                      </TabPanel>
+                    </TabPanels>
+                  </>
+                );
+              }}
+            </Tabs>
+
+            {/* <Tabs
+              defaultValue={OrchestratorTabs["Yield Overview"]}
+              css={{ mb: "$5" }}
+            >
+              <TabsList>
+                <TabsTrigger
+                  css={{
+                    height: 40,
+                  }}
+                  value={OrchestratorTabs["Yield Overview"]}
+                >
+                  <Text size="3">Yield Overview</Text>
+                </TabsTrigger>
+                <TabsTrigger
+                  css={{
+                    height: 40,
+                  }}
+                  value={OrchestratorTabs["Voting History"]}
+                >
+                  <Text size="3">Voting History</Text>
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value={OrchestratorTabs["Yield Overview"]}>
+                {!orchestrators?.transcoders || !protocol?.protocol ? (
+                  <Flex align="center" justify="center">
+                    <Spinner />
+                  </Flex>
+                ) : (
+                  <Box>
+                    <OrchestratorList
+                      data={orchestrators?.transcoders}
+                      pageSize={10}
+                      protocolData={protocol?.protocol}
+                    />
+                  </Box>
+                )}
+              </TabsContent>
+              <TabsContent value={OrchestratorTabs["Voting History"]}>
+                <Box>
+                  <OrchestratorVotingList initialVoterData={initialVoterData} pageSize={10}/>
+                </Box>
+              </TabsContent>
+            </Tabs> */}
+
             {!orchestrators?.transcoders || !protocol?.protocol ? (
               <Flex align="center" justify="center">
                 <Spinner />
@@ -494,6 +598,21 @@ export const getStaticProps = async () => {
     const { events } = await getEvents(client);
     const protocol = await getProtocol(client);
 
+    const query = getOrchestratorsVotingHistory();
+    // @ts-expect-error - query is a string
+    const response = await getCubeData(query, { type: CUBE_TYPE.SERVER });
+
+    // Log the response to check the structure of the data
+    if (!response) {
+      return {
+        props: {
+          initialVoterData: [],
+        },
+      };
+    }
+
+    const voterSummaries = getVoterSummaries(response);
+
     if (!orchestrators.data || !events.data || !protocol.data) {
       return {
         props: errorProps,
@@ -506,6 +625,7 @@ export const getStaticProps = async () => {
       orchestrators: orchestrators.data,
       events: events.data,
       protocol: protocol.data,
+      initialVoterData: voterSummaries,
       fallback: {},
     };
 
@@ -522,4 +642,75 @@ export const getStaticProps = async () => {
   }
 };
 
+type VoteProposal = {
+  "LivepeerVoteProposals.date": string;
+  "LivepeerVoteProposals.voter": string;
+  "LivepeerVoteProposals.eventTxnsHash": string;
+  "LivepeerVoteProposals.voteType": string;
+  "LivepeerVoteProposals.count": string;
+  "LivepeerVoteProposals.numOfProposals": string;
+  "LivepeerVoteProposals.numOfVoteCasted": string;
+};
+
+// Function to get unique voter IDs
+const getUniqueVoters = (data: VoteProposal[]): string[] => {
+  const voterSet = new Set(
+    data.map((proposal) => proposal["LivepeerVoteProposals.voter"])
+  );
+  return Array.from(voterSet);
+};
+
+// Function to group data by voter
+const groupByVoter = (
+  data: VoteProposal[],
+  voterId: string
+): VoteProposal[] => {
+  return data.filter(
+    (proposal) => proposal["LivepeerVoteProposals.voter"] === voterId
+  );
+};
+
+// Function to process vote proposals and generate voter summary
+const processVoteProposals = (proposals: VoteProposal[]): VoterSummary => {
+  const sortedVotes = proposals.sort(
+    (a, b) =>
+      new Date(b["LivepeerVoteProposals.date"]).getTime() -
+      new Date(a["LivepeerVoteProposals.date"]).getTime()
+  );
+
+  const mostRecentVotes = sortedVotes
+    .slice(0, 5)
+    .map((vote) => vote["LivepeerVoteProposals.voteType"] || null);
+
+  const noOfProposalsVotedOn = Number(
+    proposals[0]["LivepeerVoteProposals.numOfProposals"] || 0
+  );
+  const noOfVotesCasted = Number(
+    proposals[0]["LivepeerVoteProposals.numOfVoteCasted"] || 0
+  );
+
+  const votingTurnout = noOfProposalsVotedOn
+    ? noOfVotesCasted / noOfProposalsVotedOn
+    : 0;
+
+  return {
+    id: proposals[0]["LivepeerVoteProposals.voter"],
+    noOfProposalsVotedOn,
+    noOfVotesCasted,
+    mostRecentVotes,
+    votingTurnout,
+  };
+};
+
+// Function to get voter summaries for all unique voters
+const getVoterSummaries = (data: VoteProposal[]): VoterSummary[] => {
+  const uniqueVoters = getUniqueVoters(data);
+  return uniqueVoters.map((voterId) => {
+    const groupedProposals = groupByVoter(data, voterId);
+    return processVoteProposals(groupedProposals);
+  });
+};
+
+Home.getLayout = getLayout;
+
 export default Home;
diff --git a/pages/migrate/broadcaster.tsx b/pages/migrate/broadcaster.tsx
index 906ae453..73b829f5 100644
--- a/pages/migrate/broadcaster.tsx
+++ b/pages/migrate/broadcaster.tsx
@@ -12,6 +12,7 @@ import {
   l2Provider,
   l2PublicClient,
 } from "@lib/chains";
+import { formatAddress, formatTransactionHash } from "@lib/utils";
 import {
   Box,
   Button,
@@ -874,12 +875,7 @@ function MigrationFields({ migrationParams, css = {} }) {
     <Box css={{ ...css }}>
       <ReadOnlyCard css={{ marginBottom: "$2" }}>
         <Box css={{ fontWeight: 500, color: "$neutral10" }}>Address</Box>
-        <Box>
-          {migrationParams.l1Addr.replace(
-            migrationParams.l1Addr.slice(6, 38),
-            "…"
-          )}
-        </Box>
+        <Box>{formatAddress(migrationParams.l1Addr)}</Box>
       </ReadOnlyCard>
       <ReadOnlyCard css={{ marginBottom: "$2" }}>
         <Box css={{ fontWeight: 500, color: "$neutral10" }}>Deposit</Box>
@@ -914,7 +910,7 @@ function ReceiptLink({ label, hash, chainId }) {
         rel="noopener noreferrer"
         href={`${CHAIN_INFO[chainId].explorer}tx/${hash}`}
       >
-        {hash.replace(hash.slice(6, 62), "…")}
+        {formatTransactionHash(hash)}
         <Box as={ArrowTopRightIcon} />
       </A>
     </Box>
diff --git a/pages/migrate/delegator/index.tsx b/pages/migrate/delegator/index.tsx
index 29f10669..5e52513a 100644
--- a/pages/migrate/delegator/index.tsx
+++ b/pages/migrate/delegator/index.tsx
@@ -11,6 +11,7 @@ import {
   l2Provider,
   l2PublicClient,
 } from "@lib/chains";
+import { formatAddress, formatTransactionHash } from "@lib/utils";
 import {
   Box,
   Button,
@@ -877,12 +878,7 @@ function MigrationFields({ migrationParams, css = {} }) {
     <Box css={{ ...css }}>
       <ReadOnlyCard css={{ mb: "$2" }}>
         <Box css={{ fontWeight: 500, color: "$neutral10" }}>Address</Box>
-        <Box>
-          {migrationParams.l1Addr.replace(
-            migrationParams.l1Addr.slice(6, 38),
-            "…"
-          )}
-        </Box>
+        <Box>{formatAddress(migrationParams.l1Addr)}</Box>
       </ReadOnlyCard>
       <ReadOnlyCard>
         <Box css={{ fontWeight: 500, color: "$neutral10" }}>
@@ -915,7 +911,7 @@ function ReceiptLink({ label, hash, chainId }) {
         rel="noopener noreferrer"
         href={`${CHAIN_INFO[chainId].explorer}tx/${hash}`}
       >
-        {hash.replace(hash.slice(6, 62), "…")}
+        {formatTransactionHash(hash)}
         <Box as={ArrowTopRightIcon} />
       </A>
     </Box>
diff --git a/pages/migrate/orchestrator.tsx b/pages/migrate/orchestrator.tsx
index 41610969..2ae59910 100644
--- a/pages/migrate/orchestrator.tsx
+++ b/pages/migrate/orchestrator.tsx
@@ -6,6 +6,7 @@ import { l1Migrator } from "@lib/api/abis/bridge/L1Migrator";
 import { nodeInterface } from "@lib/api/abis/bridge/NodeInterface";
 import { getL1MigratorAddress } from "@lib/api/contracts";
 import { isL2ChainId, l1PublicClient, l2PublicClient } from "@lib/chains";
+import { formatAddress, formatTransactionHash } from "@lib/utils";
 import {
   Box,
   Button,
@@ -866,12 +867,7 @@ function MigrationFields({ migrationParams, css = {} }) {
     <Box css={{ ...css }}>
       <ReadOnlyCard css={{ mb: "$2" }}>
         <Box css={{ fontWeight: 500, color: "$neutral10" }}>Address</Box>
-        <Box>
-          {migrationParams.delegate.replace(
-            migrationParams.delegate.slice(6, 38),
-            "…"
-          )}
-        </Box>
+        <Box>{formatAddress(migrationParams.delegate)}</Box>
       </ReadOnlyCard>
       <ReadOnlyCard css={{ mb: "$2" }}>
         <Box css={{ fontWeight: 500, color: "$neutral10" }}>Self stake</Box>
@@ -914,7 +910,7 @@ function ReceiptLink({ label, hash, chainId }) {
         rel="noopener noreferrer"
         href={`${CHAIN_INFO[chainId].explorer}tx/${hash}`}
       >
-        {hash.replace(hash.slice(6, 62), "…")}
+        {formatTransactionHash(hash)}
         <Box as={ArrowTopRightIcon} />
       </A>
     </Box>
diff --git a/pages/orchestrators.tsx b/pages/orchestrators.tsx
index 187087d4..68e3e252 100644
--- a/pages/orchestrators.tsx
+++ b/pages/orchestrators.tsx
@@ -1,9 +1,12 @@
 import ErrorComponent from "@components/Error";
 import OrchestratorList from "@components/OrchestratorList";
+import OrchestratorVotingList from "@components/OrchestratorVotingList";
+import { VoterSummary } from "@components/OrchestratorVotingList";
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { getLayout } from "@layouts/main";
 import { getOrchestrators, getProtocol } from "@lib/api/ssr";
 import { EnsIdentity } from "@lib/api/types/get-ens";
+import { OrchestratorTabs } from "@lib/orchestrator";
 import {
   Box,
   Button,
@@ -13,6 +16,9 @@ import {
   Link as A,
 } from "@livepeer/design-system";
 import { ArrowRightIcon } from "@modulz/radix-icons";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@reach/tabs";
+import { CUBE_TYPE, getCubeData } from "cube/cube-client";
+import { getOrchestratorsVotingHistory } from "cube/query-generator";
 import Head from "next/head";
 import Link from "next/link";
 
@@ -27,12 +33,14 @@ type PageProps = {
   orchestrators: OrchestratorsQueryResult["data"] | null;
   protocol: ProtocolQueryResult["data"] | null;
   fallback: { [key: string]: EnsIdentity };
+  initialVoterData?: VoterSummary[];
 };
 
 const OrchestratorsPage = ({
   hadError,
   orchestrators,
   protocol,
+  initialVoterData,
 }: PageProps) => {
   if (hadError) {
     return <ErrorComponent statusCode={500} />;
@@ -75,19 +83,124 @@ const OrchestratorsPage = ({
               </A>
             )}
           </Flex>
-          <Box css={{ marginBottom: "$5" }}>
-            <OrchestratorList
-              data={orchestrators?.transcoders}
-              pageSize={20}
-              protocolData={protocol?.protocol}
-            />
-          </Box>
+          <Tabs defaultValue={OrchestratorTabs["Yield Overview"]}>
+            {({ selectedIndex, focusedIndex }) => {
+              const getTabStyle = (index) => ({
+                borderBottom: `4px solid ${
+                  selectedIndex === index
+                    ? "#6ec08d"
+                    : focusedIndex === index
+                    ? "#141716"
+                    : "#141716"
+                }`,
+                backgroundColor: "#141716",
+                borderWidth: 0,
+                borderBottomWidth: 1,
+                paddingBottom: 12,
+              });
+              return (
+                <>
+                  <TabList>
+                    <Tab style={getTabStyle(0)}>Yield Overview</Tab>
+                    <Tab style={getTabStyle(1)}>Voting History</Tab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel>
+                      <Box>
+                        <OrchestratorList
+                          data={orchestrators?.transcoders}
+                          pageSize={20}
+                          protocolData={protocol?.protocol}
+                        />
+                      </Box>
+                    </TabPanel>
+                    <TabPanel>
+                      <Box>
+                        <OrchestratorVotingList
+                          initialVoterData={initialVoterData}
+                          pageSize={20}
+                        />
+                      </Box>
+                    </TabPanel>
+                  </TabPanels>
+                </>
+              );
+            }}
+          </Tabs>
         </Flex>
       </Container>
     </>
   );
 };
 
+type VoteProposal = {
+  "LivepeerVoteProposals.date": string;
+  "LivepeerVoteProposals.voter": string;
+  "LivepeerVoteProposals.eventTxnsHash": string;
+  "LivepeerVoteProposals.voteType": string;
+  "LivepeerVoteProposals.count": string;
+  "LivepeerVoteProposals.numOfProposals": string;
+  "LivepeerVoteProposals.numOfVoteCasted": string;
+};
+
+// Function to get unique voter IDs
+const getUniqueVoters = (data: VoteProposal[]): string[] => {
+  const voterSet = new Set(
+    data.map((proposal) => proposal["LivepeerVoteProposals.voter"])
+  );
+  return Array.from(voterSet);
+};
+
+// Function to group data by voter
+const groupByVoter = (
+  data: VoteProposal[],
+  voterId: string
+): VoteProposal[] => {
+  return data.filter(
+    (proposal) => proposal["LivepeerVoteProposals.voter"] === voterId
+  );
+};
+
+// Function to process vote proposals and generate voter summary
+const processVoteProposals = (proposals: VoteProposal[]): VoterSummary => {
+  const sortedVotes = proposals.sort(
+    (a, b) =>
+      new Date(b["LivepeerVoteProposals.date"]).getTime() -
+      new Date(a["LivepeerVoteProposals.date"]).getTime()
+  );
+
+  const mostRecentVotes = sortedVotes
+    .slice(0, 5)
+    .map((vote) => vote["LivepeerVoteProposals.voteType"] || null);
+
+  const noOfProposalsVotedOn = Number(
+    proposals[0]["LivepeerVoteProposals.numOfProposals"] || 0
+  );
+  const noOfVotesCasted = Number(
+    proposals[0]["LivepeerVoteProposals.numOfVoteCasted"] || 0
+  );
+  const votingTurnout = noOfProposalsVotedOn
+    ? noOfVotesCasted / noOfProposalsVotedOn
+    : 0;
+
+  return {
+    id: proposals[0]["LivepeerVoteProposals.voter"],
+    noOfProposalsVotedOn,
+    noOfVotesCasted,
+    mostRecentVotes,
+    votingTurnout,
+  };
+};
+
+// Function to get voter summaries for all unique voters
+const getVoterSummaries = (data: VoteProposal[]): VoterSummary[] => {
+  const uniqueVoters = getUniqueVoters(data);
+  return uniqueVoters.map((voterId) => {
+    const groupedProposals = groupByVoter(data, voterId);
+    return processVoteProposals(groupedProposals);
+  });
+};
+
 export const getStaticProps = async () => {
   const errorProps: PageProps = {
     hadError: true,
@@ -101,6 +214,20 @@ export const getStaticProps = async () => {
     const { orchestrators, fallback } = await getOrchestrators(client);
     const protocol = await getProtocol(client);
 
+    const query = getOrchestratorsVotingHistory();
+    // @ts-expect-error - query is a string
+    const response = await getCubeData(query, { type: CUBE_TYPE.SERVER });
+
+    if (!response) {
+      return {
+        props: {
+          initialVoterData: [],
+        },
+      };
+    }
+
+    const voterSummaries = getVoterSummaries(response);
+
     if (!orchestrators.data || !protocol.data) {
       return {
         props: errorProps,
@@ -113,6 +240,7 @@ export const getStaticProps = async () => {
       orchestrators: orchestrators.data,
       protocol: protocol.data,
       fallback,
+      initialVoterData: voterSummaries,
     };
 
     return {
diff --git a/pages/treasury/[proposal].tsx b/pages/treasury/[proposal].tsx
index 412237b1..d3ce4c77 100644
--- a/pages/treasury/[proposal].tsx
+++ b/pages/treasury/[proposal].tsx
@@ -4,13 +4,14 @@ import Spinner from "@components/Spinner";
 import Stat from "@components/Stat";
 import { BadgeVariantByState } from "@components/TreasuryProposalRow";
 import TreasuryVotingWidget from "@components/TreasuryVotingWidget";
+import VoteTable from "@components/Votes/VoteTable";
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { getLayout } from "@layouts/main";
 import { livepeerToken } from "@lib/api/abis/main/LivepeerToken";
 import { getProposalExtended } from "@lib/api/treasury";
 import { CHAIN_INFO, DEFAULT_CHAIN, DEFAULT_CHAIN_ID } from "@lib/chains";
 import dayjs from "@lib/dayjs";
-import { abbreviateNumber, fromWei, shortenAddress } from "@lib/utils";
+import { abbreviateNumber, formatAddress, fromWei } from "@lib/utils";
 import {
   Badge,
   Box,
@@ -28,7 +29,7 @@ import { BigNumber } from "ethers";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import numbro from "numbro";
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useWindowSize } from "react-use";
 import { decodeFunctionData } from "viem";
 
@@ -41,6 +42,7 @@ import {
   useProposalVotingPowerData,
   useTreasuryProposalState,
 } from "../../hooks";
+import { useFetchVotes } from "../../hooks/TreasuryVotes/useFetchVotes";
 import FourZeroFour from "../404";
 
 const formatPercent = (percent: number) =>
@@ -61,6 +63,7 @@ const formatDateTime = (date: dayjs.Dayjs) => {
 const Proposal = () => {
   const router = useRouter();
   const { width } = useWindowSize();
+  const [isDesktop, setIsDesktop] = useState(false);
   const { setBottomDrawerOpen } = useExplorerStore();
 
   const { query } = router;
@@ -80,6 +83,12 @@ const Proposal = () => {
   const { data: protocolQuery } = useProtocolQuery();
   const currentRound = useCurrentRoundData();
 
+  const { votes, loading: votesLoading } = useFetchVotes(proposalId ?? "");
+
+  useEffect(() => {
+    setIsDesktop(width >= 768);
+  }, [width]);
+
   const proposal = useMemo(() => {
     if (!proposalQuery || !state || !protocolQuery || !currentRound) {
       return null;
@@ -94,6 +103,25 @@ const Proposal = () => {
 
   const proposerId = useEnsData(proposal?.proposer.id);
 
+  const votesContent = useCallback(() => {
+    if (votesLoading) {
+      return (
+        <Flex
+          css={{
+            width: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "$4",
+          }}
+        >
+          <Spinner />
+        </Flex>
+      );
+    }
+    if (votes.length === 0) return <Text>No votes yet.</Text>;
+    return <VoteTable proposalId={proposal!.id} />;
+  }, [votesLoading, votes.length, proposal]);
+
   const actions = useMemo(() => {
     if (!proposal || !contractAddresses) {
       return null;
@@ -155,7 +183,9 @@ const Proposal = () => {
   return (
     <>
       <Head>
-        <title>Livepeer Explorer - Treasury</title>
+        <title>
+          {proposal.attributes.title} | Proposal | Livepeer Explorer
+        </title>
       </Head>
       <Container
         css={{ maxWidth: LAYOUT_MAX_WIDTH, marginTop: "$4", width: "100%" }}
@@ -198,7 +228,7 @@ const Proposal = () => {
               <Text css={{ fontSize: "$1", color: "$neutral11" }}>
                 Proposed by{" "}
                 <Link href={`/accounts/${proposal.proposer.id}`}>
-                  {proposerId?.name ?? shortenAddress(proposal.proposer.id)}
+                  {proposerId?.name ?? formatAddress(proposal.proposer.id)}
                 </Link>
               </Text>
               <Text css={{ fontSize: "$1", color: "$neutral11" }}>
@@ -280,7 +310,7 @@ const Proposal = () => {
                         }}
                       >
                         <Flex css={{ alignItems: "center" }}>
-                          <Box>
+                          <Box css={{ color: "$sky11" }}>
                             For ({formatPercent(proposal.votes.percent.for)})
                           </Box>
                         </Flex>
@@ -297,7 +327,7 @@ const Proposal = () => {
                         }}
                       >
                         <Flex css={{ alignItems: "center" }}>
-                          <Box>
+                          <Box css={{ color: "$tomato11" }}>
                             Against (
                             {formatPercent(proposal.votes.percent.against)})
                           </Box>
@@ -315,7 +345,7 @@ const Proposal = () => {
                         }}
                       >
                         <Flex css={{ alignItems: "center" }}>
-                          <Box>
+                          <Box css={{ color: "$neutral11" }}>
                             Abstain (
                             {formatPercent(proposal.votes.percent.abstain)})
                           </Box>
@@ -458,7 +488,7 @@ const Proposal = () => {
                               size="2"
                             >
                               {width <= 640
-                                ? shortenAddress(action.lptTransfer.receiver)
+                                ? formatAddress(action.lptTransfer.receiver)
                                 : action.lptTransfer.receiver}
                             </Text>
                           </Link>
@@ -516,7 +546,7 @@ const Proposal = () => {
                               size="2"
                             >
                               {action.contract
-                                ? `${action.contract?.name} (${shortenAddress(
+                                ? `${action.contract?.name} (${formatAddress(
                                     action.target
                                   )})`
                                 : action.target}
@@ -614,10 +644,31 @@ const Proposal = () => {
                 </Heading>
                 <MarkdownRenderer>{proposal.description}</MarkdownRenderer>
               </Card>
+
+              <Card
+                id="votes-section"
+                css={{
+                  padding: "$4",
+                  border: "1px solid $neutral4",
+                }}
+              >
+                <Heading
+                  as="h3"
+                  css={{
+                    fontWeight: 700,
+                    fontSize: "$5",
+                    color: "$white",
+                    marginBottom: "$2",
+                  }}
+                >
+                  {votesLoading ? "Loading votes…" : `Votes (${votes.length})`}
+                </Heading>
+                {votesContent()}
+              </Card>
             </Box>
           </Flex>
 
-          {width > 1200 ? (
+          {isDesktop ? (
             <Flex
               css={{
                 display: "none",
diff --git a/pages/treasury/create-proposal.tsx b/pages/treasury/create-proposal.tsx
index b24a7983..d24fb2ba 100644
--- a/pages/treasury/create-proposal.tsx
+++ b/pages/treasury/create-proposal.tsx
@@ -301,9 +301,9 @@ const CreateProposal = () => {
                 },
               }}
             >
-                <Text variant="neutral" size="3" css={{ flexShrink: 0 }}>
+              <Text variant="neutral" size="3" css={{ flexShrink: 0 }}>
                 LPT receiver:
-                </Text>
+              </Text>
               <TextField
                 css={{
                   width: "100%",
diff --git a/pages/voting/[poll].tsx b/pages/voting/[poll].tsx
index 5a2e5197..9196ed0c 100644
--- a/pages/voting/[poll].tsx
+++ b/pages/voting/[poll].tsx
@@ -2,7 +2,7 @@ import BottomDrawer from "@components/BottomDrawer";
 import MarkdownRenderer from "@components/MarkdownRenderer";
 import Spinner from "@components/Spinner";
 import Stat from "@components/Stat";
-import VotingWidget from "@components/VotingWidget";
+import VotingWidget from "@components/Votes/VotingWidget";
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { getLayout } from "@layouts/main";
 import { getPollExtended, PollExtended } from "@lib/api/polls";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3aeb095f..40194ca8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,12 @@ importers:
       '@apollo/client':
         specifier: ^3.13.1
         version: 3.14.0(@types/react@19.2.2)(graphql-ws@5.12.1(graphql@16.12.0))(graphql@16.12.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@cubejs-client/core':
+        specifier: ^1.6.1
+        version: 1.6.1(encoding@0.1.13)
+      '@cubejs-client/react':
+        specifier: ^1.6.1
+        version: 1.6.1(encoding@0.1.13)(react@19.2.1)
       '@emotion/react':
         specifier: ^11.14.0
         version: 11.14.0(@types/react@19.2.2)(react@19.2.1)
@@ -1167,6 +1173,14 @@ packages:
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
     engines: {node: '>=18'}
 
+  '@cubejs-client/core@1.6.1':
+    resolution: {integrity: sha512-OcVpJ7vLyKB6sGuHAcZgJRih5EP2GU+hBbbuSUzW2zvPAvrhmswdNFef/DjFJAlHeiNXoSeX5dXxvITiZbJOdg==}
+
+  '@cubejs-client/react@1.6.1':
+    resolution: {integrity: sha512-MfIWcCACjgVescy44t/FpXjo6+oP9TKGr6dtszDR3OvAk9EBWYvZfRm1NO54HaUnZRop7OFWO1Ywf6Vtod/F8g==}
+    peerDependencies:
+      react: '>=16.10.2'
+
   '@ecies/ciphers@0.2.5':
     resolution: {integrity: sha512-GalEZH4JgOMHYYcYmVqnFirFsjZHeoGMDt9IxEnM9F7GRUUyUksJ7Ou53L83WHJq3RWKD3AcBpo0iQh0oMpf8A==}
     engines: {bun: '>=1', deno: '>=2', node: '>=16'}
@@ -8419,6 +8433,9 @@ packages:
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
+  ramda@0.27.2:
+    resolution: {integrity: sha512-SbiLPU40JuJniHexQSAgad32hfwd+DRUdwF2PlVuI5RZD0/vahUco7R8vD86J/tcEKKF9vZrUVwgtmGCqlCKyA==}
+
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
@@ -9672,6 +9689,9 @@ packages:
   url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
 
+  url-search-params-polyfill@7.0.1:
+    resolution: {integrity: sha512-bAw7L2E+jn9XHG5P9zrPnHdO0yJub4U+yXJOdpcpkr7OBd9T8oll4lUos0iSGRcDvfZoLUKfx9a6aNmIhJ4+mQ==}
+
   urlpattern-polyfill@6.0.2:
     resolution: {integrity: sha512-5vZjFlH9ofROmuWmXM9yj2wljYKgWstGwe8YTyiqM7hVum/g9LyCizPZtb3UqsuppVwety9QJmfc42VggLpTgg==}
 
@@ -9723,6 +9743,10 @@ packages:
   util@0.12.5:
     resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
 
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
   uuid@7.0.3:
     resolution: {integrity: sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==}
     hasBin: true
@@ -11272,6 +11296,27 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.4': {}
 
+  '@cubejs-client/core@1.6.1(encoding@0.1.13)':
+    dependencies:
+      core-js: 3.46.0
+      cross-fetch: 3.2.0(encoding@0.1.13)
+      dayjs: 1.11.19
+      ramda: 0.27.2
+      url-search-params-polyfill: 7.0.1
+      uuid: 11.1.0
+    transitivePeerDependencies:
+      - encoding
+
+  '@cubejs-client/react@1.6.1(encoding@0.1.13)(react@19.2.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@cubejs-client/core': 1.6.1(encoding@0.1.13)
+      core-js: 3.46.0
+      ramda: 0.27.2
+      react: 19.2.1
+    transitivePeerDependencies:
+      - encoding
+
   '@ecies/ciphers@0.2.5(@noble/ciphers@1.3.0)':
     dependencies:
       '@noble/ciphers': 1.3.0
@@ -21464,6 +21509,8 @@ snapshots:
 
   radix3@1.1.2: {}
 
+  ramda@0.27.2: {}
+
   randombytes@2.1.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -22878,6 +22925,8 @@ snapshots:
       querystringify: 2.2.0
       requires-port: 1.0.0
 
+  url-search-params-polyfill@7.0.1: {}
+
   urlpattern-polyfill@6.0.2:
     dependencies:
       braces: 3.0.3
@@ -22925,6 +22974,8 @@ snapshots:
       is-typed-array: 1.1.15
       which-typed-array: 1.1.19
 
+  uuid@11.1.0: {}
+
   uuid@7.0.3: {}
 
   uuid@8.3.2: {}
diff --git a/public/img/Vector.png b/public/img/Vector.png
new file mode 100644
index 00000000..639d88d5
Binary files /dev/null and b/public/img/Vector.png differ
diff --git a/queries/treasuryProposalsByIds.graphql b/queries/treasuryProposalsByIds.graphql
new file mode 100644
index 00000000..a9e93a43
--- /dev/null
+++ b/queries/treasuryProposalsByIds.graphql
@@ -0,0 +1,8 @@
+query getProposalsByIds($ids: [ID!]!) {
+  treasuryProposals(where: { id_in: $ids }) {
+    id
+    description
+    voteStart
+    voteEnd
+  }
+}
diff --git a/utils/voting.ts b/utils/voting.ts
new file mode 100644
index 00000000..f7db15e9
--- /dev/null
+++ b/utils/voting.ts
@@ -0,0 +1,49 @@
+import { PollExtended } from "@lib/api/polls";
+import { fromWei } from "@lib/utils";
+import { AccountQuery, PollChoice } from "apollo";
+import numbro from "numbro";
+export type VotingResponse = {
+  poll: PollExtended;
+  delegateVote:
+    | {
+        __typename: "Vote";
+        choiceID?: PollChoice;
+        voteStake: string;
+        nonVoteStake: string;
+      }
+    | undefined
+    | null;
+  vote:
+    | {
+        __typename: "Vote";
+        choiceID?: PollChoice;
+        voteStake: string;
+        nonVoteStake: string;
+      }
+    | undefined
+    | null;
+  myAccount: AccountQuery;
+};
+
+export const formatPercent = (percent: number) =>
+  numbro(percent).format({ output: "percent", mantissa: 4 });
+
+export function getVotingPower(
+  accountAddress: string,
+  myAccount: VotingResponse["myAccount"],
+  vote: VotingResponse["vote"],
+  pendingStake?: string
+) {
+  // if account is a delegate its voting power is its total stake minus its delegators' vote stake (nonVoteStake)
+  if (accountAddress === myAccount?.delegator?.delegate?.id) {
+    if (vote?.voteStake) {
+      return +vote.voteStake - +vote?.nonVoteStake;
+    }
+    return (
+      +myAccount?.delegator?.delegate?.totalStake -
+      (vote?.nonVoteStake ? +vote?.nonVoteStake : 0)
+    );
+  }
+
+  return fromWei(pendingStake ? pendingStake : "0");
+}