diff --git a/apps/web/src/modules/dao/components/SectionHandler.tsx b/apps/web/src/modules/dao/components/SectionHandler.tsx
index 3c688133..1dc12f21 100644
--- a/apps/web/src/modules/dao/components/SectionHandler.tsx
+++ b/apps/web/src/modules/dao/components/SectionHandler.tsx
@@ -1,7 +1,6 @@
 import { Box, Flex, Text } from '@zoralabs/zord'
 import { AnimatePresence, motion } from 'framer-motion'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import React, { ReactElement } from 'react'
 
 import {
@@ -18,10 +17,8 @@ interface SectionHandlerProps {
     title: string
     component: ReactElement[]
   }[]
-  collectionAddress: string
-  tokenId?: string
-  activeTab?: string
-  preAuction?: boolean
+  activeTab: string
+  basePath: string
 }
 
 interface activeSectionProps {
@@ -31,18 +28,12 @@ interface activeSectionProps {
 
 export const SectionHandler: React.FC<SectionHandlerProps> = ({
   sections,
-  collectionAddress,
-  tokenId,
   activeTab,
-  preAuction = false,
+  basePath,
 }) => {
-  const router = useRouter()
-
   /*
 
     handle active session if:
-    - no tab query param is defined (pre auction start)
-    - no tab query param defined (post auction start)
     - query tab is defined
     - unknown query tab is set
 
@@ -55,15 +46,8 @@ export const SectionHandler: React.FC<SectionHandlerProps> = ({
   )
 
   const activeSection: activeSectionProps | undefined = React.useMemo(() => {
-    const activity = tab('Activity')
-    const about = tab('About')
-
-    if (!activeTab) {
-      return preAuction ? activity : about
-    }
-
-    return tab(unslugify(activeTab)) ?? activity
-  }, [preAuction, activeTab, tab])
+    return tab(unslugify(activeTab))
+  }, [activeTab, tab])
 
   return (
     <>
@@ -80,9 +64,7 @@ export const SectionHandler: React.FC<SectionHandlerProps> = ({
               return (
                 <Link
                   href={{
-                    pathname: tokenId
-                      ? `/dao/${collectionAddress}/${tokenId}`
-                      : `/dao/${collectionAddress}`,
+                    pathname: basePath,
                     query: {
                       tab: slugify(section.title),
                     },
diff --git a/apps/web/src/modules/proposal/components/ProposalDescription/ProposalDescription.tsx b/apps/web/src/modules/proposal/components/ProposalDescription/ProposalDescription.tsx
index dd45827d..c188570f 100644
--- a/apps/web/src/modules/proposal/components/ProposalDescription/ProposalDescription.tsx
+++ b/apps/web/src/modules/proposal/components/ProposalDescription/ProposalDescription.tsx
@@ -13,6 +13,7 @@ import { sdk } from 'src/data/graphql/client'
 import { Proposal } from 'src/data/graphql/requests/proposalQuery'
 import { SortDirection, TokenSortKey } from 'src/data/graphql/sdk.generated'
 import { useEnsData } from 'src/hooks/useEnsData'
+import { propPageWrapper } from 'src/styles/Proposals.css'
 
 import { DecodedTransactions } from './DecodedTransactions'
 import { proposalDescription } from './ProposalDescription.css'
@@ -53,48 +54,50 @@ export const ProposalDescription: React.FC<ProposalDescriptionProps> = ({
   )
 
   return (
-    <Flex direction={'column'} mt={{ '@initial': 'x6', '@768': 'x13' }}>
-      <Section title="Description">
-        <Paragraph overflow={'auto'}>
-          <ReactMarkdown
-            className={proposalDescription}
-            rehypePlugins={[rehypeRaw, rehypeSanitize]}
-            remarkPlugins={[remarkGfm]}
-          >
-            {description}
-          </ReactMarkdown>
-        </Paragraph>
-      </Section>
+    <Flex className={propPageWrapper}>
+      <Flex direction={'column'} mt={{ '@initial': 'x6', '@768': 'x13' }}>
+        <Section title="Description">
+          <Paragraph overflow={'auto'}>
+            <ReactMarkdown
+              className={proposalDescription}
+              rehypePlugins={[rehypeRaw, rehypeSanitize]}
+              remarkPlugins={[remarkGfm]}
+            >
+              {description}
+            </ReactMarkdown>
+          </Paragraph>
+        </Section>
 
-      <Section title="Proposer">
-        <Flex direction={'row'} placeItems={'center'}>
-          <Box
-            backgroundColor="background2"
-            width={'x8'}
-            height={'x8'}
-            mr={'x2'}
-            borderRadius={'small'}
-            position="relative"
-          >
-            {!!tokenImage && !error && (
-              <Image
-                alt="proposer"
-                src={tokenImage}
-                quality={50}
-                width={128}
-                height={128}
-                className={atoms({ borderRadius: 'small' })}
-              />
-            )}
-          </Box>
+        <Section title="Proposer">
+          <Flex direction={'row'} placeItems={'center'}>
+            <Box
+              backgroundColor="background2"
+              width={'x8'}
+              height={'x8'}
+              mr={'x2'}
+              borderRadius={'small'}
+              position="relative"
+            >
+              {!!tokenImage && !error && (
+                <Image
+                  alt="proposer"
+                  src={tokenImage}
+                  quality={50}
+                  width={128}
+                  height={128}
+                  className={atoms({ borderRadius: 'small' })}
+                />
+              )}
+            </Box>
 
-          <Box>{displayName}</Box>
-        </Flex>
-      </Section>
+            <Box>{displayName}</Box>
+          </Flex>
+        </Section>
 
-      <Section title="Proposed Transactions">
-        <DecodedTransactions targets={targets} calldatas={calldatas} values={values} />
-      </Section>
+        <Section title="Proposed Transactions">
+          <DecodedTransactions targets={targets} calldatas={calldatas} values={values} />
+        </Section>
+      </Flex>
     </Flex>
   )
 }
diff --git a/apps/web/src/modules/proposal/components/ProposalVotes/ProposalVotes.tsx b/apps/web/src/modules/proposal/components/ProposalVotes/ProposalVotes.tsx
new file mode 100644
index 00000000..f15b4490
--- /dev/null
+++ b/apps/web/src/modules/proposal/components/ProposalVotes/ProposalVotes.tsx
@@ -0,0 +1,32 @@
+import { Flex, Text } from '@zoralabs/zord'
+import { useMemo } from 'react'
+
+import { Proposal } from 'src/data/graphql/requests/proposalQuery'
+import { propPageWrapper } from 'src/styles/Proposals.css'
+
+import { VotePlacard } from './VotePlacard'
+
+export type ProposalVotesProps = {
+  proposal: Proposal
+}
+
+export const ProposalVotes: React.FC<ProposalVotesProps> = ({ proposal }) => {
+  const totalVotes = useMemo(() => {
+    if (!proposal.votes) return 0
+    return proposal.votes.reduce((acc, vote) => acc + vote.weight, 0)
+  }, [proposal.votes])
+
+  const hasVotes = proposal.votes?.length || 0 > 0
+
+  return (
+    <Flex className={propPageWrapper}>
+      {hasVotes ? (
+        proposal.votes?.map((vote) => <VotePlacard vote={vote} totalVotes={totalVotes} />)
+      ) : (
+        <Text textAlign={'center'} color="text3" mt="x4">
+          No votes yet for this proposal.
+        </Text>
+      )}
+    </Flex>
+  )
+}
diff --git a/apps/web/src/modules/proposal/components/ProposalVotes/VotePlacard.tsx b/apps/web/src/modules/proposal/components/ProposalVotes/VotePlacard.tsx
new file mode 100644
index 00000000..4dd5f6f8
--- /dev/null
+++ b/apps/web/src/modules/proposal/components/ProposalVotes/VotePlacard.tsx
@@ -0,0 +1,146 @@
+import { Flex, Grid, Text, atoms } from '@zoralabs/zord'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useMemo, useState } from 'react'
+
+import { Avatar } from 'src/components/Avatar'
+import { ProposalVoteFragment, Support } from 'src/data/graphql/sdk.generated'
+import { useEnsData } from 'src/hooks'
+import { useLayoutStore } from 'src/stores'
+import { walletSnippet } from 'src/utils/helpers'
+
+const variants = {
+  inital: {
+    height: 0,
+    overflow: 'hidden',
+    transition: {
+      animate: 'easeInOut',
+    },
+  },
+  animate: {
+    height: 'auto',
+    transition: {
+      animate: 'easeInOut',
+    },
+  },
+}
+
+export interface VotePlacardProps {
+  vote: ProposalVoteFragment
+  totalVotes: number
+}
+
+export const VotePlacard: React.FC<VotePlacardProps> = ({ vote, totalVotes }) => {
+  const { ensName, ensAvatar } = useEnsData(vote.voter)
+  const [open, setOpen] = useState(true)
+  const { isMobile } = useLayoutStore()
+
+  const supportStyle = useMemo(() => {
+    const base = atoms({
+      borderStyle: 'solid',
+      borderRadius: 'phat',
+      borderWidth: 'thin',
+      py: 'x1',
+      px: 'x3',
+      mr: 'x2',
+    })
+
+    switch (vote.support) {
+      case Support.For:
+        return [base, atoms({ color: 'positive', borderColor: 'positiveDisabled' })]
+      case Support.Against:
+        return [base, atoms({ color: 'negative', borderColor: 'negativeDisabled' })]
+      case Support.Abstain:
+        return [base, atoms({ color: 'text3', borderColor: 'border' })]
+    }
+  }, [vote.support])
+
+  const votePercentage = ((100 * vote.weight) / totalVotes).toFixed(2)
+
+  return (
+    <Grid
+      as="button"
+      onClick={() => (vote.reason ? setOpen((x) => !x) : null)}
+      columns={7}
+      gap={isMobile ? 'x1' : 'x0'}
+      backgroundColor="background1"
+      cursor={vote.reason ? 'pointer' : 'auto'}
+      align={'center'}
+      mb="x2"
+      px={isMobile ? 'x2' : 'x6'}
+      py="x6"
+      color="text1"
+      borderStyle="solid"
+      borderColor="border"
+      borderRadius="curved"
+      w="100%"
+    >
+      <Text
+        fontSize={isMobile ? 12 : 14}
+        style={{ width: 'max-content' }}
+        className={supportStyle}
+      >
+        {vote.support}
+      </Text>
+      <Flex align={'center'} style={{ gridColumn: 'span 4 / span 4' }}>
+        <Avatar address={vote.voter} src={ensAvatar} size={isMobile ? '24' : '32'} />
+        <Text variant={isMobile ? 'label-sm' : 'label-md'} ml="x2">
+          {ensName || walletSnippet(vote.voter)}
+        </Text>
+      </Flex>
+
+      <Flex
+        align={'center'}
+        style={{ gridColumn: 'span 2 / span 2', justifyContent: 'end' }}
+      >
+        <Text variant={isMobile ? 'label-sm' : 'label-md'} mr={isMobile ? 'x2' : 'x6'}>
+          {vote.weight} {vote.weight === 1 ? 'Vote' : 'Votes'}
+        </Text>
+        {!isMobile && (
+          <Text
+            style={{ fontWeight: 500 }}
+            fontSize={12}
+            borderStyle="solid"
+            borderColor="border"
+            color="text4"
+            borderRadius="phat"
+            py="x1"
+            px="x2"
+          >
+            {votePercentage}%
+          </Text>
+        )}
+      </Flex>
+
+      <AnimatePresence initial={false}>
+        {open && vote.reason && (
+          <motion.div
+            variants={variants}
+            initial={'inital'}
+            animate={'animate'}
+            exit={'inital'}
+            style={{
+              gridColumn: isMobile ? 'span 7 / span 7' : '2 / span 6',
+            }}
+          >
+            <Text
+              variant={isMobile ? 'paragraph-sm' : 'paragraph-md'}
+              borderRadius="curved"
+              mt="x4"
+              p="x6"
+              textAlign={'left'}
+              style={{
+                fontWeight: 400,
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+                minWidth: '80%',
+                backgroundColor: '#F9F9F9',
+              }}
+            >
+              {vote.reason}
+            </Text>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Grid>
+  )
+}
diff --git a/apps/web/src/modules/proposal/components/ProposalVotes/index.ts b/apps/web/src/modules/proposal/components/ProposalVotes/index.ts
new file mode 100644
index 00000000..0f798e5a
--- /dev/null
+++ b/apps/web/src/modules/proposal/components/ProposalVotes/index.ts
@@ -0,0 +1 @@
+export * from './ProposalVotes'
diff --git a/apps/web/src/pages/dao/[token]/[tokenId].tsx b/apps/web/src/pages/dao/[token]/[tokenId].tsx
index e635f069..4eb0130c 100644
--- a/apps/web/src/pages/dao/[token]/[tokenId].tsx
+++ b/apps/web/src/pages/dao/[token]/[tokenId].tsx
@@ -97,6 +97,8 @@ const TokenPage: NextPageWithLayout<TokenPageProps> = ({
   const ogDescription =
     description.length > 111 ? `${description.slice(0, 111)}...` : description
 
+  const activeTab = query?.tab ? (query.tab as string) : 'About'
+
   return (
     <Flex direction="column" pb="x30">
       <Meta
@@ -109,9 +111,8 @@ const TokenPage: NextPageWithLayout<TokenPageProps> = ({
       <Auction auctionAddress={addresses.auction} collection={collection} token={token} />
       <SectionHandler
         sections={sections}
-        activeTab={query?.tab ? (query.tab as string) : undefined}
-        collectionAddress={collection}
-        tokenId={tokenId}
+        activeTab={activeTab}
+        basePath={`/dao/${collection}/${tokenId}`}
       />
 
       <AnimatedModal
diff --git a/apps/web/src/pages/dao/[token]/index.tsx b/apps/web/src/pages/dao/[token]/index.tsx
index 7372b794..2e7ce400 100644
--- a/apps/web/src/pages/dao/[token]/index.tsx
+++ b/apps/web/src/pages/dao/[token]/index.tsx
@@ -76,6 +76,8 @@ const DaoPage: NextPageWithLayout<DaoPageProps> = ({ collectionAddress }) => {
     )
   }
 
+  const activeTab = query?.tab ? (query.tab as string) : 'Activity'
+
   return (
     <Flex direction="column" pb="x30">
       <Meta title={'dao page'} slug={'/'} />
@@ -84,9 +86,8 @@ const DaoPage: NextPageWithLayout<DaoPageProps> = ({ collectionAddress }) => {
 
       <SectionHandler
         sections={sections}
-        collectionAddress={collectionAddress}
-        activeTab={query?.tab ? (query.tab as string) : undefined}
-        preAuction={true}
+        activeTab={activeTab}
+        basePath={`/dao/${collectionAddress}`}
       />
     </Flex>
   )
diff --git a/apps/web/src/pages/dao/[token]/vote/[id].tsx b/apps/web/src/pages/dao/[token]/vote/[id].tsx
index 72e4a2c4..eb5291d8 100644
--- a/apps/web/src/pages/dao/[token]/vote/[id].tsx
+++ b/apps/web/src/pages/dao/[token]/vote/[id].tsx
@@ -1,5 +1,5 @@
 import { readContracts } from '@wagmi/core'
-import { Flex } from '@zoralabs/zord'
+import { Box, Flex } from '@zoralabs/zord'
 import { ethers } from 'ethers'
 import { isAddress } from 'ethers/lib/utils.js'
 import { GetServerSideProps } from 'next'
@@ -15,6 +15,7 @@ import getDAOAddresses from 'src/data/contract/requests/getDAOAddresses'
 import getToken, { TokenWithWinner } from 'src/data/contract/requests/getToken'
 import { getProposal } from 'src/data/graphql/requests/proposalQuery'
 import { getDaoLayout } from 'src/layouts/DaoLayout'
+import { SectionHandler } from 'src/modules/dao'
 import {
   ProposalActions,
   ProposalDescription,
@@ -22,6 +23,7 @@ import {
   ProposalHeader,
   isProposalOpen,
 } from 'src/modules/proposal'
+import { ProposalVotes } from 'src/modules/proposal/components/ProposalVotes'
 import { NextPageWithLayout } from 'src/pages/_app'
 import { ProposalOgMetadata } from 'src/pages/api/og/proposal'
 import { propPageWrapper } from 'src/styles/Proposals.css'
@@ -45,6 +47,22 @@ const VotePage: NextPageWithLayout<VotePageProps> = ({
     getProposal(id)
   )
 
+  const sections = React.useMemo(() => {
+    if (!proposal) return []
+    return [
+      {
+        title: 'Details',
+        component: [
+          <ProposalDescription proposal={proposal} collection={query?.token as string} />,
+        ],
+      },
+      {
+        title: 'Votes',
+        component: [<ProposalVotes proposal={proposal} />],
+      },
+    ]
+  }, [proposal])
+
   if (!proposal) {
     return null
   }
@@ -60,17 +78,23 @@ const VotePage: NextPageWithLayout<VotePageProps> = ({
         description={`View this proposal from ${daoName}`}
       />
 
-      <Flex position="relative" direction="column" pb="x30">
+      <Flex position="relative" direction="column">
         <Flex className={propPageWrapper} gap={{ '@initial': 'x2', '@768': 'x4' }}>
           <ProposalHeader proposal={proposal} />
 
           {displayActions && <ProposalActions daoName={daoName} proposal={proposal} />}
 
           <ProposalDetailsGrid proposal={proposal} />
-
-          <ProposalDescription proposal={proposal} collection={query?.token as string} />
         </Flex>
       </Flex>
+
+      <Box mt="x12" pb="x30">
+        <SectionHandler
+          sections={sections}
+          activeTab={query?.tab ? (query.tab as string) : 'Details'}
+          basePath={`/dao/${query?.token}/vote/${query?.id}`}
+        />
+      </Box>
     </Fragment>
   )
 }