diff --git a/apps/dapp/components/CopyToClipboard.tsx b/apps/dapp/components/CopyToClipboard.tsx
index b2e461b70..7a1bca5f8 100644
--- a/apps/dapp/components/CopyToClipboard.tsx
+++ b/apps/dapp/components/CopyToClipboard.tsx
@@ -17,19 +17,20 @@ function concatAddressImpl(
   return first + '...' + last
 }
 
-function concatAddress(address: string) {
-  const takeN = 7
+function concatAddress(address: string, takeN = 7): string {
   return concatAddressImpl(address, takeN, takeN)
 }
 
 interface CopyToClipboardProps {
   value: string
   success?: string
+  takeN?: number
 }
 
 export function CopyToClipboard({
   value,
   success = 'Copied to clipboard!',
+  takeN,
 }: CopyToClipboardProps) {
   const [copied, setCopied] = useState(false)
   return (
@@ -47,7 +48,7 @@ export function CopyToClipboard({
       ) : (
         <SvgCopy color="currentColor" height="18px" width="18px" />
       )}
-      {concatAddress(value)}
+      {concatAddress(value, takeN)}
     </button>
   )
 }
diff --git a/apps/dapp/components/ProposalDetailsSidebar.tsx b/apps/dapp/components/ProposalDetailsSidebar.tsx
index 9b3fc851c..4b76e9229 100644
--- a/apps/dapp/components/ProposalDetailsSidebar.tsx
+++ b/apps/dapp/components/ProposalDetailsSidebar.tsx
@@ -30,26 +30,33 @@ import { TriangleUp } from './icons/TriangleUp'
 import { Progress } from './Progress'
 import { ProposalStatus } from './ProposalStatus'
 
+const YouTooltip = ({ label }: { label: string }) => (
+  <Tooltip label={label}>
+    <p className="flex justify-center items-center p-1 w-4 h-4 font-mono text-xs text-tertiary rounded-full border cursor-pointer border-tertiary">
+      ?
+    </p>
+  </Tooltip>
+)
+
 const PASSING_THRESHOLD_TOOLTIP =
   "A proposal must attain this proportion of 'Yes' votes to pass."
 const QUORUM_TOOLTIP =
   'This proportion of voting weight must vote for a proposal to pass.'
 
-export function ProposalDetailsSidebar({
-  contractAddress,
-  proposalId,
-  multisig,
-}: {
+interface ProposalDetailsProps {
   contractAddress: string
+  multisig: boolean
   proposalId: number
-  multisig?: boolean
-}) {
+}
+
+export const ProposalDetailsCard = ({
+  contractAddress,
+  multisig,
+  proposalId,
+}: ProposalDetailsProps) => {
   const proposal = useRecoilValue(
     proposalSelector({ contractAddress, proposalId })
   )
-  const proposalTally = useRecoilValue(
-    proposalTallySelector({ contractAddress, proposalId })
-  )
   const { state: proposalExecutionTXHashState, contents: txHashContents } =
     useRecoilValueLoadable(
       proposalExecutionTXHashSelector({ contractAddress, proposalId })
@@ -57,9 +64,6 @@ export function ProposalDetailsSidebar({
   const proposalExecutionTXHash: string | null =
     proposalExecutionTXHashState === 'hasValue' ? txHashContents : null
 
-  const sigConfig = useRecoilValue(
-    contractConfigSelector({ contractAddress, multisig: !!multisig })
-  )
   const walletVote = useRecoilValue(
     walletVoteSelector({ contractAddress, proposalId })
   )
@@ -70,19 +74,140 @@ export function ProposalDetailsSidebar({
   const votingPower = useRecoilValue(
     votingPowerAtHeightSelector({
       contractAddress,
-      multisig: !!multisig,
+      multisig,
       height,
     })
   )
   const memberWhenProposalCreated = votingPower > 0
 
+  if (!proposal) {
+    return null
+  }
+
+  return (
+    <div className="rounded-md border border-light">
+      <div className="flex flex-row justify-evenly items-stretch py-5">
+        <div className="flex flex-col gap-2 items-center">
+          <p className="overflow-hidden font-mono text-sm text-tertiary text-ellipsis">
+            Proposal
+          </p>
+
+          <p className="font-mono text-sm">
+            # {proposal.id.toString().padStart(6, '0')}
+          </p>
+        </div>
+
+        <div className="w-[1px] bg-light"></div>
+
+        <div className="flex flex-col gap-2 items-center">
+          <p className="overflow-hidden font-mono text-sm text-tertiary text-ellipsis">
+            Status
+          </p>
+
+          <p className="font-mono text-sm">
+            <ProposalStatus status={proposal.status} />
+          </p>
+        </div>
+
+        <div className="w-[1px] bg-light"></div>
+
+        <div className="flex flex-col gap-2 items-center">
+          <p className="overflow-hidden font-mono text-sm text-tertiary text-ellipsis">
+            You
+          </p>
+
+          {!memberWhenProposalCreated ? (
+            <YouTooltip
+              label={`You ${
+                proposal.status === 'open' ? 'are' : 'were'
+              } unable to vote on this proposal because you didn't have any voting power at the time of proposal creation.`}
+            />
+          ) : walletVote === WalletVote.Yes ? (
+            <p className="flex gap-1 items-center font-mono text-sm text-valid">
+              <CheckIcon className="inline w-4" /> Yes
+            </p>
+          ) : walletVote === WalletVote.No ? (
+            <p className="flex gap-1 items-center font-mono text-sm text-error">
+              <XIcon className="inline w-4" /> No
+            </p>
+          ) : walletVote === WalletVote.Abstain ? (
+            <p className="flex gap-1 items-center font-mono text-sm text-secondary">
+              <SvgAbstain fill="currentColor" /> Abstain
+            </p>
+          ) : walletVote === WalletVote.Veto ? (
+            <p className="flex gap-1 items-center font-mono text-sm text-error">
+              <XIcon className="inline w-4" /> Veto
+            </p>
+          ) : walletVote ? (
+            <p className="font-mono text-sm text-secondary break-all">
+              Unknown: {walletVote}
+            </p>
+          ) : proposal.status === 'open' ? (
+            <YouTooltip label="You have not yet cast a vote." />
+          ) : (
+            <YouTooltip label="You didn't cast a vote when this proposal was open." />
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3 p-7 border-t border-light">
+        <p className="font-mono text-sm text-tertiary">Proposer</p>
+
+        <CopyToClipboard takeN={9} value={proposal.proposer} />
+
+        {proposal.status === 'executed' &&
+        proposalExecutionTXHashState === 'loading' ? (
+          <>
+            <p className="mt-4 font-mono text-sm text-tertiary">TX</p>
+            <p>Loading...</p>
+          </>
+        ) : !!proposalExecutionTXHash ? (
+          <>
+            {CHAIN_TXN_URL_PREFIX ? (
+              <a
+                className="flex flex-row gap-1 items-center mt-4 font-mono text-sm text-tertiary"
+                href={CHAIN_TXN_URL_PREFIX + proposalExecutionTXHash}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                TX
+                <ExternalLinkIcon width={16} />
+              </a>
+            ) : (
+              <p className="mt-4 font-mono text-sm text-tertiary">TX</p>
+            )}
+
+            <CopyToClipboard takeN={9} value={proposalExecutionTXHash} />
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export const ProposalDetailsVoteStatus = ({
+  contractAddress,
+  multisig,
+  proposalId,
+}: ProposalDetailsProps) => {
+  const proposal = useRecoilValue(
+    proposalSelector({ contractAddress, proposalId })
+  )
+  const proposalTally = useRecoilValue(
+    proposalTallySelector({ contractAddress, proposalId })
+  )
+
+  const config = useRecoilValue(
+    contractConfigSelector({ contractAddress, multisig })
+  )
+
   const { threshold, quorum } = useThresholdQuorum(
     contractAddress,
     proposalId,
-    !!multisig
+    multisig
   )
 
-  const configWrapper = new ContractConfigWrapper(sigConfig)
+  const configWrapper = new ContractConfigWrapper(config)
   const tokenDecimals = configWrapper.gov_token_decimals
 
   const localeOptions = { maximumSignificantDigits: 3 }
@@ -134,12 +259,12 @@ export function ProposalDetailsSidebar({
   const totalAbstainPercent = (abstainVotes / totalWeight) * 100
 
   if (!proposal) {
-    return <div>Error, no proposal</div>
+    return null
   }
 
   const maxVotingSeconds =
-    'time' in sigConfig.config.max_voting_period
-      ? sigConfig.config.max_voting_period.time
+    'time' in config.config.max_voting_period
+      ? config.config.max_voting_period.time
       : undefined
   const expiresInSeconds =
     proposal.expires && 'at_time' in proposal.expires
@@ -147,464 +272,382 @@ export function ProposalDetailsSidebar({
       : undefined
 
   return (
-    <div>
-      <h2 className="mb-6 text-base font-medium">Details</h2>
-      <div className="grid grid-cols-3 gap-x-4 gap-y-2 items-center">
-        <p className="overflow-hidden font-mono text-sm text-right text-tertiary text-ellipsis">
-          Proposal
-        </p>
-        <p className="col-span-2 font-mono text-sm">
-          # {proposal.id.toString().padStart(6, '0')}
-        </p>
-        <p className="overflow-hidden font-mono text-sm text-right text-tertiary text-ellipsis">
-          Status
-        </p>
-        <div className="col-span-2 text-sm">
-          <ProposalStatus status={proposal.status} />
-        </div>
-        <p className="overflow-hidden font-mono text-sm text-right text-tertiary text-ellipsis">
-          Proposer
-        </p>
-        <p className="col-span-2">
-          <CopyToClipboard value={proposal.proposer} />
-        </p>
-        {proposal.status === 'executed' &&
-        proposalExecutionTXHashState === 'loading' ? (
-          <>
-            <p className="font-mono text-sm text-right text-tertiary">TX</p>
-            <p className="col-span-2">Loading...</p>
-          </>
-        ) : !!proposalExecutionTXHash ? (
-          <>
-            {CHAIN_TXN_URL_PREFIX ? (
-              <a
-                className="flex flex-row gap-1 items-center font-mono text-sm text-right text-tertiary"
-                href={CHAIN_TXN_URL_PREFIX + proposalExecutionTXHash}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                TX
-                <ExternalLinkIcon width={16} />
-              </a>
-            ) : (
-              <p className="font-mono text-sm text-right text-tertiary">TX</p>
-            )}
-            <p className="col-span-2">
-              <CopyToClipboard value={proposalExecutionTXHash} />
-            </p>
-          </>
-        ) : null}
-        {memberWhenProposalCreated && (
+    <div className="grid grid-cols-3 gap-2">
+      {threshold ? (
+        quorum ? (
           <>
-            <p className="overflow-hidden font-mono text-sm text-right text-tertiary text-ellipsis">
-              Your vote
+            <p className="overflow-hidden col-span-3 mb-3 text-sm text-ellipsis body-text">
+              Ratio of votes
             </p>
 
-            {walletVote === WalletVote.Yes ? (
-              <p className="flex col-span-2 gap-1 items-center font-mono text-sm text-valid">
-                <CheckIcon className="inline w-4" /> Yes
-              </p>
-            ) : walletVote === WalletVote.No ? (
-              <p className="flex col-span-2 gap-1 items-center font-mono text-sm text-error">
-                <XIcon className="inline w-4" /> No
-              </p>
-            ) : walletVote === WalletVote.Abstain ? (
-              <p className="flex col-span-2 gap-1 items-center font-mono text-sm text-secondary">
-                <SvgAbstain fill="currentColor" /> Abstain
-              </p>
-            ) : walletVote === WalletVote.Veto ? (
-              <p className="flex col-span-2 gap-1 items-center font-mono text-sm text-error">
-                <XIcon className="inline w-4" /> Veto
-              </p>
-            ) : walletVote ? (
-              <p className="col-span-2 font-mono text-sm text-secondary break-all">
-                Unknown: {walletVote}
-              </p>
-            ) : (
-              <p className="col-span-2 font-mono text-sm text-tertiary">
-                {proposal.status === 'open' ? 'Pending...' : 'None'}
-              </p>
-            )}
-          </>
-        )}
-      </div>
-
-      <h3 className="mt-8 mb-6 text-base font-medium">Referendum status</h3>
-
-      <div className="grid grid-cols-3 gap-2">
-        {threshold ? (
-          quorum ? (
-            <>
-              <p className="overflow-hidden col-span-3 mb-3 text-sm text-ellipsis body-text">
-                Ratio of votes
-              </p>
-
-              <div className="flex flex-row col-span-3 gap-4 items-center font-mono text-xs">
-                {[
-                  <p key="yes" className="text-valid">
-                    Yes{' '}
-                    {turnoutYesPercent.toLocaleString(undefined, localeOptions)}
-                    %
-                  </p>,
-                  <p key="no" className="text-error">
-                    No{' '}
-                    {turnoutNoPercent.toLocaleString(undefined, localeOptions)}%
-                  </p>,
-                ]
-                  .sort(() => yesVotes - noVotes)
-                  .map((elem, idx) => (
-                    <div
-                      key={idx}
-                      className={
-                        idx === 0 && yesVotes !== noVotes ? 'flex-1' : ''
-                      }
-                    >
-                      {elem}
-                    </div>
-                  ))}
-                <p
-                  className={`text-secondary ${
-                    yesVotes === noVotes ? 'flex-1 text-right' : ''
-                  }`}
-                >
-                  Abstain{' '}
-                  {turnoutAbstainPercent.toLocaleString(
-                    undefined,
-                    localeOptions
-                  )}
+            <div className="flex flex-row col-span-3 gap-4 items-center font-mono text-xs">
+              {[
+                <p key="yes" className="text-valid">
+                  Yes{' '}
+                  {turnoutYesPercent.toLocaleString(undefined, localeOptions)}%
+                </p>,
+                <p key="no" className="text-error">
+                  No {turnoutNoPercent.toLocaleString(undefined, localeOptions)}
                   %
-                </p>
-              </div>
-
-              <div className="col-span-3 my-2">
-                <Progress
-                  rows={[
-                    {
-                      thickness: 3,
-                      data: [
-                        ...[
-                          {
-                            value: Number(turnoutYesPercent),
-                            color: 'rgb(var(--valid))',
-                          },
-                          {
-                            value: Number(turnoutNoPercent),
-                            color: 'rgb(var(--error))',
-                          },
-                        ].sort((a, b) => b.value - a.value),
-                        {
-                          value: Number(turnoutAbstainPercent),
-                          // Secondary is dark with 80% opacity.
-                          color: 'rgba(var(--dark), 0.8)',
-                        },
-                      ],
-                    },
-                  ]}
-                  verticalBars={
-                    threshold && [
-                      {
-                        value: threshold.percent,
-                        color: 'rgba(var(--dark), 0.5)',
-                      },
-                    ]
-                  }
-                />
-              </div>
-
-              <div className="relative col-span-3">
-                <TriangleUp
-                  className="absolute -top-[22px]"
-                  color="rgb(var(--light))"
-                  height="36px"
-                  style={{
-                    left:
-                      threshold.percent < 10
-                        ? '0'
-                        : threshold.percent > 90
-                        ? 'calc(100% - 32px)'
-                        : `calc(${threshold.percent}% - 17px)`,
-                  }}
-                  width="36px"
-                />
-
-                <Tooltip label={PASSING_THRESHOLD_TOOLTIP}>
-                  <div className="flex flex-row gap-2 justify-between items-center py-3 px-4 w-full bg-light rounded-md">
-                    <p className="text-sm text-tertiary">
-                      Passing threshold:{' '}
-                      <span className="font-mono">{threshold.display}</span>
-                    </p>
-
-                    <p className="flex flex-row gap-2 items-center font-mono text-xs text-tertiary">
-                      {turnoutYesPercent >= threshold.percent ? (
-                        <>
-                          Reached{' '}
-                          <CheckIcon
-                            className="inline w-4"
-                            color="rgb(var(--valid))"
-                          />
-                        </>
-                      ) : (
-                        <>
-                          Not met{' '}
-                          <XIcon
-                            className="inline w-4"
-                            color="rgb(var(--error))"
-                          />
-                        </>
-                      )}
-                    </p>
+                </p>,
+              ]
+                .sort(() => yesVotes - noVotes)
+                .map((elem, idx) => (
+                  <div
+                    key={idx}
+                    className={
+                      idx === 0 && yesVotes !== noVotes ? 'flex-1' : ''
+                    }
+                  >
+                    {elem}
                   </div>
-                </Tooltip>
-              </div>
-
-              <div className="flex flex-row col-span-3 justify-between mt-4 mb-1">
-                <p className="overflow-hidden text-sm text-ellipsis body-text">
-                  Turnout
-                </p>
-
-                <p className="font-mono text-xs text-tertiary">
-                  {turnoutPercent.toLocaleString(undefined, localeOptions)}%
-                </p>
-              </div>
-
-              <div className="col-span-3 my-2">
-                <Progress
-                  rows={[
-                    {
-                      thickness: 3,
-                      data: [
+                ))}
+              <p
+                className={`text-secondary ${
+                  yesVotes === noVotes ? 'flex-1 text-right' : ''
+                }`}
+              >
+                Abstain{' '}
+                {turnoutAbstainPercent.toLocaleString(undefined, localeOptions)}
+                %
+              </p>
+            </div>
+
+            <div className="col-span-3 my-2">
+              <Progress
+                rows={[
+                  {
+                    thickness: 3,
+                    data: [
+                      ...[
                         {
-                          value: turnoutPercent,
-                          color: 'rgb(var(--dark))',
+                          value: Number(turnoutYesPercent),
+                          color: 'rgb(var(--valid))',
                         },
-                      ],
-                    },
-                  ]}
-                  verticalBars={[
-                    {
-                      value: quorum.percent,
-                      color: 'rgba(var(--dark), 0.5)',
-                    },
-                  ]}
-                />
-              </div>
-
-              <div className="relative col-span-3">
-                <TriangleUp
-                  className="absolute -top-[22px]"
-                  color="rgb(var(--light))"
-                  height="36px"
-                  style={{
-                    left:
-                      quorum.percent < 10
-                        ? '0'
-                        : quorum.percent > 90
-                        ? 'calc(100% - 32px)'
-                        : `calc(${quorum.percent}% - 17px)`,
-                  }}
-                  width="36px"
-                />
-
-                <Tooltip label={QUORUM_TOOLTIP}>
-                  <div className="flex flex-row gap-2 justify-between items-center py-3 px-4 w-full bg-light rounded-md">
-                    <p className="text-sm text-tertiary">
-                      Quorum:{' '}
-                      <span className="font-mono">{quorum.display}</span>
-                    </p>
-
-                    <p className="flex flex-row gap-2 items-center font-mono text-xs text-tertiary">
-                      {turnoutPercent >= quorum.percent ? (
-                        <>
-                          Reached{' '}
-                          <CheckIcon
-                            className="inline w-4"
-                            color="rgb(var(--valid))"
-                          />
-                        </>
-                      ) : (
-                        <>
-                          Not met{' '}
-                          <XIcon
-                            className="inline w-4"
-                            color="rgb(var(--error))"
-                          />
-                        </>
-                      )}
-                    </p>
-                  </div>
-                </Tooltip>
-              </div>
-            </>
-          ) : (
-            <>
-              <p className="overflow-hidden col-span-3 mb-3 text-sm text-ellipsis body-text">
-                Turnout
-              </p>
-
-              <div className="flex flex-row col-span-3 gap-4 items-center font-mono text-xs">
-                {[
-                  <p key="yes" className="text-valid">
-                    Yes{' '}
-                    {totalYesPercent.toLocaleString(undefined, localeOptions)}%
-                  </p>,
-                  <p key="no" className="text-error">
-                    No {totalNoPercent.toLocaleString(undefined, localeOptions)}
-                    %
-                  </p>,
-                ]
-                  .sort(() => yesVotes - noVotes)
-                  .map((elem, idx) => (
-                    <div
-                      key={idx}
-                      className={
-                        idx === 0 && yesVotes !== noVotes ? 'flex-1' : ''
-                      }
-                    >
-                      {elem}
-                    </div>
-                  ))}
-                <p
-                  className={`text-secondary ${
-                    yesVotes === noVotes ? 'flex-1 text-right' : ''
-                  }`}
-                >
-                  Abstain{' '}
-                  {totalAbstainPercent.toLocaleString(undefined, localeOptions)}
-                  %
-                </p>
-              </div>
-
-              <div className="col-span-3 my-2">
-                <Progress
-                  rows={[
-                    {
-                      thickness: 3,
-                      data: [
-                        ...[
-                          {
-                            value: Number(totalYesPercent),
-                            color: 'rgb(var(--valid))',
-                          },
-                          {
-                            value: Number(totalNoPercent),
-                            color: 'rgb(var(--error))',
-                          },
-                        ].sort((a, b) => b.value - a.value),
                         {
-                          value: Number(totalAbstainPercent),
-                          // Secondary is dark with 80% opacity.
-                          color: 'rgba(var(--dark), 0.8)',
+                          value: Number(turnoutNoPercent),
+                          color: 'rgb(var(--error))',
                         },
-                      ],
-                    },
-                  ]}
-                  verticalBars={[
+                      ].sort((a, b) => b.value - a.value),
+                      {
+                        value: Number(turnoutAbstainPercent),
+                        // Secondary is dark with 80% opacity.
+                        color: 'rgba(var(--dark), 0.8)',
+                      },
+                    ],
+                  },
+                ]}
+                verticalBars={
+                  threshold && [
                     {
                       value: threshold.percent,
                       color: 'rgba(var(--dark), 0.5)',
                     },
-                  ]}
-                />
-              </div>
-
-              <div className="relative col-span-3">
-                <TriangleUp
-                  className="absolute -top-[22px]"
-                  color="rgb(var(--light))"
-                  height="36px"
-                  style={{
-                    left:
-                      threshold.percent < 10
-                        ? '0'
-                        : threshold.percent > 90
-                        ? 'calc(100% - 32px)'
-                        : `calc(${threshold.percent}% - 17px)`,
-                  }}
-                  width="36px"
-                />
-
-                <Tooltip label={PASSING_THRESHOLD_TOOLTIP}>
-                  <div className="flex flex-row gap-2 justify-between items-center py-3 px-4 w-full bg-light rounded-md">
-                    <p className="text-sm text-tertiary">
-                      Passing threshold:{' '}
-                      <span className="font-mono">{threshold.display}</span>
-                    </p>
-
-                    <p className="flex flex-row gap-2 items-center font-mono text-xs text-tertiary">
-                      {totalYesPercent >= threshold.percent ? (
-                        <>
-                          Reached{' '}
-                          <CheckIcon
-                            className="inline w-4"
-                            color="rgb(var(--valid))"
-                          />
-                        </>
-                      ) : (
-                        <>
-                          Not met{' '}
-                          <XIcon
-                            className="inline w-4"
-                            color="rgb(var(--error))"
-                          />
-                        </>
-                      )}
-                    </p>
-                  </div>
-                </Tooltip>
-              </div>
-            </>
-          )
-        ) : null}
+                  ]
+                }
+              />
+            </div>
+
+            <div className="relative col-span-3">
+              <TriangleUp
+                className="absolute -top-[22px]"
+                color="rgb(var(--light))"
+                height="36px"
+                style={{
+                  left:
+                    threshold.percent < 10
+                      ? '0'
+                      : threshold.percent > 90
+                      ? 'calc(100% - 32px)'
+                      : `calc(${threshold.percent}% - 17px)`,
+                }}
+                width="36px"
+              />
+
+              <Tooltip label={PASSING_THRESHOLD_TOOLTIP}>
+                <div className="flex flex-row gap-2 justify-between items-center py-3 px-4 w-full bg-light rounded-md">
+                  <p className="text-sm text-tertiary">
+                    Passing threshold:{' '}
+                    <span className="font-mono">{threshold.display}</span>
+                  </p>
+
+                  <p className="flex flex-row gap-2 items-center font-mono text-xs text-tertiary">
+                    {turnoutYesPercent >= threshold.percent ? (
+                      <>
+                        Reached{' '}
+                        <CheckIcon
+                          className="inline w-4"
+                          color="rgb(var(--valid))"
+                        />
+                      </>
+                    ) : (
+                      <>
+                        Not met{' '}
+                        <XIcon
+                          className="inline w-4"
+                          color="rgb(var(--error))"
+                        />
+                      </>
+                    )}
+                  </p>
+                </div>
+              </Tooltip>
+            </div>
+
+            <div className="flex flex-row col-span-3 justify-between mt-4 mb-1">
+              <p className="overflow-hidden text-sm text-ellipsis body-text">
+                Turnout
+              </p>
 
-        {expiresInSeconds !== undefined && expiresInSeconds > 0 && (
+              <p className="font-mono text-xs text-tertiary">
+                {turnoutPercent.toLocaleString(undefined, localeOptions)}%
+              </p>
+            </div>
+
+            <div className="col-span-3 my-2">
+              <Progress
+                rows={[
+                  {
+                    thickness: 3,
+                    data: [
+                      {
+                        value: turnoutPercent,
+                        color: 'rgb(var(--dark))',
+                      },
+                    ],
+                  },
+                ]}
+                verticalBars={[
+                  {
+                    value: quorum.percent,
+                    color: 'rgba(var(--dark), 0.5)',
+                  },
+                ]}
+              />
+            </div>
+
+            <div className="relative col-span-3">
+              <TriangleUp
+                className="absolute -top-[22px]"
+                color="rgb(var(--light))"
+                height="36px"
+                style={{
+                  left:
+                    quorum.percent < 10
+                      ? '0'
+                      : quorum.percent > 90
+                      ? 'calc(100% - 32px)'
+                      : `calc(${quorum.percent}% - 17px)`,
+                }}
+                width="36px"
+              />
+
+              <Tooltip label={QUORUM_TOOLTIP}>
+                <div className="flex flex-row gap-2 justify-between items-center py-3 px-4 w-full bg-light rounded-md">
+                  <p className="text-sm text-tertiary">
+                    Quorum: <span className="font-mono">{quorum.display}</span>
+                  </p>
+
+                  <p className="flex flex-row gap-2 items-center font-mono text-xs text-tertiary">
+                    {turnoutPercent >= quorum.percent ? (
+                      <>
+                        Reached{' '}
+                        <CheckIcon
+                          className="inline w-4"
+                          color="rgb(var(--valid))"
+                        />
+                      </>
+                    ) : (
+                      <>
+                        Not met{' '}
+                        <XIcon
+                          className="inline w-4"
+                          color="rgb(var(--error))"
+                        />
+                      </>
+                    )}
+                  </p>
+                </div>
+              </Tooltip>
+            </div>
+          </>
+        ) : (
           <>
-            <p className="overflow-hidden col-span-3 mt-4 font-mono text-sm text-tertiary text-ellipsis">
-              Time left
-            </p>
-
-            <p className="col-span-3 font-mono text-xs text-right text-dark">
-              {secondsToWdhms(expiresInSeconds, 2)}
+            <p className="overflow-hidden col-span-3 mb-3 text-sm text-ellipsis body-text">
+              Turnout
             </p>
 
-            {maxVotingSeconds !== undefined && (
-              <div className="col-span-3 mt-1">
-                <Progress
-                  alignEnd
-                  rows={[
-                    {
-                      thickness: 3,
-                      data: [
+            <div className="flex flex-row col-span-3 gap-4 items-center font-mono text-xs">
+              {[
+                <p key="yes" className="text-valid">
+                  Yes {totalYesPercent.toLocaleString(undefined, localeOptions)}
+                  %
+                </p>,
+                <p key="no" className="text-error">
+                  No {totalNoPercent.toLocaleString(undefined, localeOptions)}%
+                </p>,
+              ]
+                .sort(() => yesVotes - noVotes)
+                .map((elem, idx) => (
+                  <div
+                    key={idx}
+                    className={
+                      idx === 0 && yesVotes !== noVotes ? 'flex-1' : ''
+                    }
+                  >
+                    {elem}
+                  </div>
+                ))}
+              <p
+                className={`text-secondary ${
+                  yesVotes === noVotes ? 'flex-1 text-right' : ''
+                }`}
+              >
+                Abstain{' '}
+                {totalAbstainPercent.toLocaleString(undefined, localeOptions)}%
+              </p>
+            </div>
+
+            <div className="col-span-3 my-2">
+              <Progress
+                rows={[
+                  {
+                    thickness: 3,
+                    data: [
+                      ...[
                         {
-                          value: (expiresInSeconds / maxVotingSeconds) * 100,
-                          color: 'rgb(var(--dark))',
+                          value: Number(totalYesPercent),
+                          color: 'rgb(var(--valid))',
                         },
-                      ],
-                    },
-                  ]}
-                />
-              </div>
-            )}
+                        {
+                          value: Number(totalNoPercent),
+                          color: 'rgb(var(--error))',
+                        },
+                      ].sort((a, b) => b.value - a.value),
+                      {
+                        value: Number(totalAbstainPercent),
+                        // Secondary is dark with 80% opacity.
+                        color: 'rgba(var(--dark), 0.8)',
+                      },
+                    ],
+                  },
+                ]}
+                verticalBars={[
+                  {
+                    value: threshold.percent,
+                    color: 'rgba(var(--dark), 0.5)',
+                  },
+                ]}
+              />
+            </div>
+
+            <div className="relative col-span-3">
+              <TriangleUp
+                className="absolute -top-[22px]"
+                color="rgb(var(--light))"
+                height="36px"
+                style={{
+                  left:
+                    threshold.percent < 10
+                      ? '0'
+                      : threshold.percent > 90
+                      ? 'calc(100% - 32px)'
+                      : `calc(${threshold.percent}% - 17px)`,
+                }}
+                width="36px"
+              />
+
+              <Tooltip label={PASSING_THRESHOLD_TOOLTIP}>
+                <div className="flex flex-row gap-2 justify-between items-center py-3 px-4 w-full bg-light rounded-md">
+                  <p className="text-sm text-tertiary">
+                    Passing threshold:{' '}
+                    <span className="font-mono">{threshold.display}</span>
+                  </p>
+
+                  <p className="flex flex-row gap-2 items-center font-mono text-xs text-tertiary">
+                    {totalYesPercent >= threshold.percent ? (
+                      <>
+                        Reached{' '}
+                        <CheckIcon
+                          className="inline w-4"
+                          color="rgb(var(--valid))"
+                        />
+                      </>
+                    ) : (
+                      <>
+                        Not met{' '}
+                        <XIcon
+                          className="inline w-4"
+                          color="rgb(var(--error))"
+                        />
+                      </>
+                    )}
+                  </p>
+                </div>
+              </Tooltip>
+            </div>
           </>
-        )}
-
-        {threshold?.percent === 50 && yesVotes === noVotes && (
-          <div className="col-span-3 mt-4 text-sm">
-            <p className="font-mono text-tertiary">Tie clarification</p>
-
-            <p className="mt-2 body-text">{"'Yes' will win a tie vote."}</p>
-          </div>
-        )}
+        )
+      ) : null}
+
+      {expiresInSeconds !== undefined && expiresInSeconds > 0 && (
+        <>
+          <p className="overflow-hidden col-span-3 mt-4 font-mono text-sm text-tertiary text-ellipsis">
+            Time left
+          </p>
+
+          <p className="col-span-3 font-mono text-xs text-right text-dark">
+            {secondsToWdhms(expiresInSeconds, 2)}
+          </p>
+
+          {maxVotingSeconds !== undefined && (
+            <div className="col-span-3 mt-1">
+              <Progress
+                alignEnd
+                rows={[
+                  {
+                    thickness: 3,
+                    data: [
+                      {
+                        value: (expiresInSeconds / maxVotingSeconds) * 100,
+                        color: 'rgb(var(--dark))',
+                      },
+                    ],
+                  },
+                ]}
+              />
+            </div>
+          )}
+        </>
+      )}
+
+      {threshold?.percent === 50 && yesVotes === noVotes && (
+        <div className="col-span-3 mt-4 text-sm">
+          <p className="font-mono text-tertiary">Tie clarification</p>
+
+          <p className="mt-2 body-text">{"'Yes' will win a tie vote."}</p>
+        </div>
+      )}
 
-        {abstainVotes === turnoutTotal && (
-          <div className="col-span-3 mt-4 text-sm">
-            <p className="font-mono text-tertiary">All abstain clarification</p>
+      {abstainVotes === turnoutTotal && (
+        <div className="col-span-3 mt-4 text-sm">
+          <p className="font-mono text-tertiary">All abstain clarification</p>
 
-            <p className="mt-2 body-text">
-              When all abstain, a proposal will fail.
-            </p>
-          </div>
-        )}
-      </div>
+          <p className="mt-2 body-text">
+            When all abstain, a proposal will fail.
+          </p>
+        </div>
+      )}
     </div>
   )
 }
+
+export const ProposalDetailsSidebar = (props: ProposalDetailsProps) => (
+  <div>
+    <h2 className="mb-6 text-base font-medium">Details</h2>
+    <ProposalDetailsCard {...props} />
+
+    <h3 className="mt-8 mb-6 text-base font-medium">Referendum status</h3>
+    <ProposalDetailsVoteStatus {...props} />
+  </div>
+)
diff --git a/apps/dapp/pages/dao/[contractAddress]/proposals/[proposalId].tsx b/apps/dapp/pages/dao/[contractAddress]/proposals/[proposalId].tsx
index 06c3f6173..9105722a6 100644
--- a/apps/dapp/pages/dao/[contractAddress]/proposals/[proposalId].tsx
+++ b/apps/dapp/pages/dao/[contractAddress]/proposals/[proposalId].tsx
@@ -5,7 +5,11 @@ import { useRecoilValue } from 'recoil'
 
 import { Breadcrumbs } from 'components/Breadcrumbs'
 import { ProposalDetails } from 'components/ProposalDetails'
-import { ProposalDetailsSidebar } from 'components/ProposalDetailsSidebar'
+import {
+  ProposalDetailsSidebar,
+  ProposalDetailsCard,
+  ProposalDetailsVoteStatus,
+} from 'components/ProposalDetailsSidebar'
 import { daoSelector } from 'selectors/daos'
 import { cw20TokenInfo } from 'selectors/treasury'
 
@@ -16,8 +20,14 @@ const Proposal: NextPage = () => {
   const daoInfo = useRecoilValue(daoSelector(contractAddress))
   const govTokenInfo = useRecoilValue(cw20TokenInfo(daoInfo.gov_token))
 
+  const proposalDetailsProps = {
+    contractAddress,
+    multisig: false,
+    proposalId: Number(proposalKey),
+  }
+
   return (
-    <div className="grid grid-cols-6">
+    <div className="grid grid-cols-4 lg:grid-cols-6">
       <div className="col-span-4 p-6 w-full">
         <Breadcrumbs
           crumbs={[
@@ -26,6 +36,11 @@ const Proposal: NextPage = () => {
             [router.asPath, `Proposal ${proposalKey}`],
           ]}
         />
+
+        <div className="px-6 mt-6 lg:hidden">
+          <ProposalDetailsCard {...proposalDetailsProps} />
+        </div>
+
         <ProposalDetails
           contractAddress={contractAddress}
           fromCosmosMsgProps={{
@@ -33,12 +48,15 @@ const Proposal: NextPage = () => {
           }}
           proposalId={Number(proposalKey)}
         />
+
+        <div className="px-6 pb-6 mt-6 lg:hidden">
+          <h3 className="mb-6 text-base font-medium">Referendum status</h3>
+
+          <ProposalDetailsVoteStatus {...proposalDetailsProps} />
+        </div>
       </div>
-      <div className="col-span-2 p-6 min-h-screen bg-base-200">
-        <ProposalDetailsSidebar
-          contractAddress={contractAddress}
-          proposalId={Number(proposalKey)}
-        />
+      <div className="hidden col-span-2 p-6 min-h-screen lg:block bg-base-200">
+        <ProposalDetailsSidebar {...proposalDetailsProps} />
       </div>
     </div>
   )
diff --git a/apps/dapp/pages/multisig/[contractAddress]/proposals/[proposalId].tsx b/apps/dapp/pages/multisig/[contractAddress]/proposals/[proposalId].tsx
index 9e23e5bec..ace15b90e 100644
--- a/apps/dapp/pages/multisig/[contractAddress]/proposals/[proposalId].tsx
+++ b/apps/dapp/pages/multisig/[contractAddress]/proposals/[proposalId].tsx
@@ -5,7 +5,11 @@ import { useRecoilValue } from 'recoil'
 
 import { Breadcrumbs } from 'components/Breadcrumbs'
 import { ProposalDetails } from 'components/ProposalDetails'
-import { ProposalDetailsSidebar } from 'components/ProposalDetailsSidebar'
+import {
+  ProposalDetailsSidebar,
+  ProposalDetailsCard,
+  ProposalDetailsVoteStatus,
+} from 'components/ProposalDetailsSidebar'
 import { sigSelector } from 'selectors/multisigs'
 
 const MultisigProposal: NextPage = () => {
@@ -14,8 +18,14 @@ const MultisigProposal: NextPage = () => {
   const contractAddress = router.query.contractAddress as string
   const sigInfo = useRecoilValue(sigSelector(contractAddress))
 
+  const proposalDetailsProps = {
+    contractAddress,
+    multisig: true,
+    proposalId: Number(proposalKey),
+  }
+
   return (
-    <div className="grid grid-cols-6">
+    <div className="grid grid-cols-4 lg:grid-cols-6">
       <div className="col-span-4 p-6 w-full">
         <Breadcrumbs
           crumbs={[
@@ -24,6 +34,11 @@ const MultisigProposal: NextPage = () => {
             [router.asPath, `Proposal ${proposalKey}`],
           ]}
         />
+
+        <div className="px-6 mt-6 lg:hidden">
+          <ProposalDetailsCard {...proposalDetailsProps} />
+        </div>
+
         <ProposalDetails
           contractAddress={contractAddress}
           fromCosmosMsgProps={{
@@ -32,13 +47,15 @@ const MultisigProposal: NextPage = () => {
           multisig
           proposalId={Number(proposalKey)}
         />
+
+        <div className="px-6 pb-6 mt-6 lg:hidden">
+          <h3 className="mb-6 text-base font-medium">Referendum status</h3>
+
+          <ProposalDetailsVoteStatus {...proposalDetailsProps} />
+        </div>
       </div>
-      <div className="col-span-2 p-6 min-h-screen bg-base-200">
-        <ProposalDetailsSidebar
-          contractAddress={contractAddress}
-          multisig
-          proposalId={Number(proposalKey)}
-        />
+      <div className="hidden col-span-2 p-6 min-h-screen lg:block bg-base-200">
+        <ProposalDetailsSidebar {...proposalDetailsProps} />
       </div>
     </div>
   )