diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index 1c1f7341..5b174118 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -16,6 +16,7 @@ import {
   currentValue,
   resolvedPayout,
 } from '../lib/calculation/contract'
+import clsx from 'clsx'
 
 export function BetsList(props: { user: User }) {
   const { user } = props
@@ -85,19 +86,6 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
   const { bets, contract } = props
   const { resolution } = contract
 
-  const betsTotal = _.sumBy(bets, (bet) => bet.amount)
-
-  const betsPayout = resolution
-    ? _.sumBy(bets, (bet) => resolvedPayout(contract, bet))
-    : 0
-
-  const yesWinnings = _.sumBy(bets, (bet) =>
-    calculatePayout(contract, bet, 'YES')
-  )
-  const noWinnings = _.sumBy(bets, (bet) =>
-    calculatePayout(contract, bet, 'NO')
-  )
-
   return (
     <div className="px-4">
       <Link href={path(contract)}>
@@ -126,35 +114,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
 
       <Spacer h={6} />
 
-      <Row className="gap-8">
-        <Col>
-          <div className="text-sm text-gray-500">Total bet</div>
-          <div>{formatMoney(betsTotal)}</div>
-        </Col>
-        {resolution ? (
-          <>
-            <Col>
-              <div className="text-sm text-gray-500">Winnings</div>
-              <div>{formatMoney(betsPayout)}</div>
-            </Col>
-          </>
-        ) : (
-          <>
-            <Col>
-              <div className="text-sm text-gray-500">
-                If <YesLabel />
-              </div>
-              <div>{formatMoney(yesWinnings)}</div>
-            </Col>
-            <Col>
-              <div className="text-sm text-gray-500">
-                If <NoLabel />
-              </div>
-              <div>{formatMoney(noWinnings)}</div>
-            </Col>
-          </>
-        )}
-      </Row>
+      <MyBetsSummary contract={contract} bets={bets} />
 
       <Spacer h={6} />
 
@@ -163,7 +123,61 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
   )
 }
 
-function ContractBetsTable(props: { contract: Contract; bets: Bet[] }) {
+export function MyBetsSummary(props: {
+  contract: Contract
+  bets: Bet[]
+  className?: string
+}) {
+  const { bets, contract, className } = props
+  const { resolution } = contract
+
+  const betsTotal = _.sumBy(bets, (bet) => bet.amount)
+
+  const betsPayout = resolution
+    ? _.sumBy(bets, (bet) => resolvedPayout(contract, bet))
+    : 0
+
+  const yesWinnings = _.sumBy(bets, (bet) =>
+    calculatePayout(contract, bet, 'YES')
+  )
+  const noWinnings = _.sumBy(bets, (bet) =>
+    calculatePayout(contract, bet, 'NO')
+  )
+
+  return (
+    <Row className={clsx('gap-8', className)}>
+      <Col>
+        <div className="text-sm text-gray-500">Total bet</div>
+        <div>{formatMoney(betsTotal)}</div>
+      </Col>
+      {resolution ? (
+        <>
+          <Col>
+            <div className="text-sm text-gray-500">Winnings</div>
+            <div>{formatMoney(betsPayout)}</div>
+          </Col>
+        </>
+      ) : (
+        <>
+          <Col>
+            <div className="text-sm text-gray-500">
+              If <YesLabel />
+            </div>
+            <div>{formatMoney(yesWinnings)}</div>
+          </Col>
+          <Col>
+            <div className="text-sm text-gray-500">
+              If <NoLabel />
+            </div>
+            <div>{formatMoney(noWinnings)}</div>
+          </Col>
+        </>
+      )}
+    </Row>
+  )
+}
+
+export function ContractBetsTable(props: { contract: Contract; bets: Bet[] }) {
   const { contract, bets } = props
 
   const { isResolved } = contract
diff --git a/web/pages/[username]/[contractId].tsx b/web/pages/[username]/[contractId].tsx
index 0619ae54..fc780ff5 100644
--- a/web/pages/[username]/[contractId].tsx
+++ b/web/pages/[username]/[contractId].tsx
@@ -8,6 +8,12 @@ import { Col } from '../../components/layout/col'
 import { useUser } from '../../hooks/use-user'
 import { ResolutionPanel } from '../../components/resolution-panel'
 import clsx from 'clsx'
+import { ContractBetsTable, MyBetsSummary } from '../../components/bets-list'
+import { useBets } from '../../hooks/use-bets'
+import { Title } from '../../components/title'
+import { Spacer } from '../../components/layout/spacer'
+import { Contract } from '../../lib/firebase/contracts'
+import { User } from '../../lib/firebase/users'
 
 export default function ContractPage() {
   const user = useUser()
@@ -47,7 +53,7 @@ export default function ContractPage() {
           <>
             <div className="mt-12 md:mt-0 md:ml-8" />
 
-            <Col className="w-full sm:w-auto sm:self-center">
+            <Col className="w-full sm:w-auto">
               <BetPanel contract={contract} />
 
               {isCreator && (
@@ -57,6 +63,34 @@ export default function ContractPage() {
           </>
         )}
       </Col>
+
+      <BetsSection contract={contract} user={user} />
     </Col>
   )
 }
+
+function BetsSection(props: { contract: Contract; user: User | null }) {
+  const { contract, user } = props
+  const bets = useBets(contract.id)
+
+  if (bets === 'loading' || bets.length === 0) return <></>
+
+  const userBets = user && bets.filter((bet) => bet.userId === user.id)
+
+  return (
+    <div className="p-4">
+      {userBets && userBets.length > 0 && (
+        <>
+          <Title text="My bets" />
+          <MyBetsSummary className="ml-1" contract={contract} bets={userBets} />
+          <Spacer h={6} />
+          <ContractBetsTable contract={contract} bets={userBets} />
+          <Spacer h={6} />
+        </>
+      )}
+
+      <Title text="All bets" />
+      <ContractBetsTable contract={contract} bets={bets} />
+    </div>
+  )
+}