diff --git a/.github/workflows/merge-main-into-main2.yml b/.github/workflows/merge-main-into-main2.yml
new file mode 100644
index 00000000..0a8de56f
--- /dev/null
+++ b/.github/workflows/merge-main-into-main2.yml
@@ -0,0 +1,17 @@
+name: Merge main into main2 on every commit
+on:
+  push:
+    branches:
+      - 'main'
+jobs:
+  merge-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+
+      - name: Merge main -> main2
+        uses: devmasx/merge-branch@master
+        with:
+          type: now
+          target_branch: main2
+          github_token: ${{ github.token }}
diff --git a/common/add-liquidity.ts b/common/add-liquidity.ts
index 9271bbbf..47b3c1e9 100644
--- a/common/add-liquidity.ts
+++ b/common/add-liquidity.ts
@@ -1,4 +1,4 @@
-import { addCpmmLiquidity, getCpmmLiquidity } from './calculate-cpmm'
+import { getCpmmLiquidity } from './calculate-cpmm'
 import { CPMMContract } from './contract'
 import { LiquidityProvision } from './liquidity-provision'
 
@@ -8,25 +8,23 @@ export const getNewLiquidityProvision = (
   contract: CPMMContract,
   newLiquidityProvisionId: string
 ) => {
-  const { pool, p, totalLiquidity } = contract
+  const { pool, p, totalLiquidity, subsidyPool } = contract
 
-  const { newPool, newP } = addCpmmLiquidity(pool, p, amount)
-
-  const liquidity =
-    getCpmmLiquidity(newPool, newP) - getCpmmLiquidity(pool, newP)
+  const liquidity = getCpmmLiquidity(pool, p)
 
   const newLiquidityProvision: LiquidityProvision = {
     id: newLiquidityProvisionId,
     userId: userId,
     contractId: contract.id,
     amount,
-    pool: newPool,
-    p: newP,
+    pool,
+    p,
     liquidity,
     createdTime: Date.now(),
   }
 
   const newTotalLiquidity = (totalLiquidity ?? 0) + amount
+  const newSubsidyPool = (subsidyPool ?? 0) + amount
 
-  return { newLiquidityProvision, newPool, newP, newTotalLiquidity }
+  return { newLiquidityProvision, newTotalLiquidity, newSubsidyPool }
 }
diff --git a/common/badge.ts b/common/badge.ts
new file mode 100644
index 00000000..c20b1f03
--- /dev/null
+++ b/common/badge.ts
@@ -0,0 +1,123 @@
+import { User } from './user'
+
+export type Badge = {
+  type: BadgeTypes
+  createdTime: number
+  data: { [key: string]: any }
+  name: 'Proven Correct' | 'Streaker' | 'Market Creator'
+}
+
+export type BadgeTypes = 'PROVEN_CORRECT' | 'STREAKER' | 'MARKET_CREATOR'
+
+export type ProvenCorrectBadgeData = {
+  type: 'PROVEN_CORRECT'
+  data: {
+    contractSlug: string
+    contractCreatorUsername: string
+    contractTitle: string
+    commentId: string
+    betAmount: number
+  }
+}
+
+export type MarketCreatorBadgeData = {
+  type: 'MARKET_CREATOR'
+  data: {
+    totalContractsCreated: number
+  }
+}
+
+export type StreakerBadgeData = {
+  type: 'STREAKER'
+  data: {
+    totalBettingStreak: number
+  }
+}
+
+export type ProvenCorrectBadge = Badge & ProvenCorrectBadgeData
+export type StreakerBadge = Badge & StreakerBadgeData
+export type MarketCreatorBadge = Badge & MarketCreatorBadgeData
+
+export const MINIMUM_UNIQUE_BETTORS_FOR_PROVEN_CORRECT_BADGE = 5
+export const provenCorrectRarityThresholds = [1, 1000, 10000]
+const calculateProvenCorrectBadgeRarity = (badge: ProvenCorrectBadge) => {
+  const { betAmount } = badge.data
+  const thresholdArray = provenCorrectRarityThresholds
+  let i = thresholdArray.length - 1
+  while (i >= 0) {
+    if (betAmount >= thresholdArray[i]) {
+      return i + 1
+    }
+    i--
+  }
+  return 1
+}
+
+export const streakerBadgeRarityThresholds = [1, 50, 250]
+const calculateStreakerBadgeRarity = (badge: StreakerBadge) => {
+  const { totalBettingStreak } = badge.data
+  const thresholdArray = streakerBadgeRarityThresholds
+  let i = thresholdArray.length - 1
+  while (i >= 0) {
+    if (totalBettingStreak == thresholdArray[i]) {
+      return i + 1
+    }
+    i--
+  }
+  return 1
+}
+
+export const marketCreatorBadgeRarityThresholds = [1, 75, 300]
+const calculateMarketCreatorBadgeRarity = (badge: MarketCreatorBadge) => {
+  const { totalContractsCreated } = badge.data
+  const thresholdArray = marketCreatorBadgeRarityThresholds
+  let i = thresholdArray.length - 1
+  while (i >= 0) {
+    if (totalContractsCreated == thresholdArray[i]) {
+      return i + 1
+    }
+    i--
+  }
+  return 1
+}
+
+export type rarities = 'bronze' | 'silver' | 'gold'
+
+const rarityRanks: { [key: number]: rarities } = {
+  1: 'bronze',
+  2: 'silver',
+  3: 'gold',
+}
+
+export const calculateBadgeRarity = (badge: Badge) => {
+  switch (badge.type) {
+    case 'PROVEN_CORRECT':
+      return rarityRanks[
+        calculateProvenCorrectBadgeRarity(badge as ProvenCorrectBadge)
+      ]
+    case 'MARKET_CREATOR':
+      return rarityRanks[
+        calculateMarketCreatorBadgeRarity(badge as MarketCreatorBadge)
+      ]
+    case 'STREAKER':
+      return rarityRanks[calculateStreakerBadgeRarity(badge as StreakerBadge)]
+    default:
+      return rarityRanks[0]
+  }
+}
+
+export const getBadgesByRarity = (user: User | null | undefined) => {
+  const rarities: { [key in rarities]: number } = {
+    bronze: 0,
+    silver: 0,
+    gold: 0,
+  }
+  if (!user) return rarities
+  Object.values(user.achievements).map((value) => {
+    value.badges.map((badge) => {
+      rarities[calculateBadgeRarity(badge)] =
+        (rarities[calculateBadgeRarity(badge)] ?? 0) + 1
+    })
+  })
+  return rarities
+}
diff --git a/common/calculate-cpmm.ts b/common/calculate-cpmm.ts
index b5153355..ab8aabbe 100644
--- a/common/calculate-cpmm.ts
+++ b/common/calculate-cpmm.ts
@@ -1,11 +1,10 @@
-import { sum, groupBy, mapValues, sumBy } from 'lodash'
+import { groupBy, mapValues, sumBy } from 'lodash'
 import { LimitBet } from './bet'
 
 import { CREATOR_FEE, Fees, LIQUIDITY_FEE, PLATFORM_FEE } from './fees'
 import { LiquidityProvision } from './liquidity-provision'
 import { computeFills } from './new-bet'
 import { binarySearch } from './util/algos'
-import { addObjects } from './util/object'
 
 export type CpmmState = {
   pool: { [outcome: string]: number }
@@ -147,7 +146,8 @@ function calculateAmountToBuyShares(
   state: CpmmState,
   shares: number,
   outcome: 'YES' | 'NO',
-  unfilledBets: LimitBet[]
+  unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number }
 ) {
   // Search for amount between bounds (0, shares).
   // Min share price is M$0, and max is M$1 each.
@@ -157,7 +157,8 @@ function calculateAmountToBuyShares(
       amount,
       state,
       undefined,
-      unfilledBets
+      unfilledBets,
+      balanceByUserId
     )
 
     const totalShares = sumBy(takers, (taker) => taker.shares)
@@ -169,7 +170,8 @@ export function calculateCpmmSale(
   state: CpmmState,
   shares: number,
   outcome: 'YES' | 'NO',
-  unfilledBets: LimitBet[]
+  unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number }
 ) {
   if (Math.round(shares) < 0) {
     throw new Error('Cannot sell non-positive shares')
@@ -180,15 +182,17 @@ export function calculateCpmmSale(
     state,
     shares,
     oppositeOutcome,
-    unfilledBets
+    unfilledBets,
+    balanceByUserId
   )
 
-  const { cpmmState, makers, takers, totalFees } = computeFills(
+  const { cpmmState, makers, takers, totalFees, ordersToCancel } = computeFills(
     oppositeOutcome,
     buyAmount,
     state,
     undefined,
-    unfilledBets
+    unfilledBets,
+    balanceByUserId
   )
 
   // Transform buys of opposite outcome into sells.
@@ -211,6 +215,7 @@ export function calculateCpmmSale(
     fees: totalFees,
     makers,
     takers: saleTakers,
+    ordersToCancel,
   }
 }
 
@@ -218,9 +223,16 @@ export function getCpmmProbabilityAfterSale(
   state: CpmmState,
   shares: number,
   outcome: 'YES' | 'NO',
-  unfilledBets: LimitBet[]
+  unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number }
 ) {
-  const { cpmmState } = calculateCpmmSale(state, shares, outcome, unfilledBets)
+  const { cpmmState } = calculateCpmmSale(
+    state,
+    shares,
+    outcome,
+    unfilledBets,
+    balanceByUserId
+  )
   return getCpmmProbability(cpmmState.pool, cpmmState.p)
 }
 
@@ -254,48 +266,22 @@ export function addCpmmLiquidity(
   return { newPool, liquidity, newP }
 }
 
-const calculateLiquidityDelta = (p: number) => (l: LiquidityProvision) => {
-  const oldLiquidity = getCpmmLiquidity(l.pool, p)
+export function getCpmmLiquidityPoolWeights(liquidities: LiquidityProvision[]) {
+  const userAmounts = groupBy(liquidities, (w) => w.userId)
+  const totalAmount = sumBy(liquidities, (w) => w.amount)
 
-  const newPool = addObjects(l.pool, { YES: l.amount, NO: l.amount })
-  const newLiquidity = getCpmmLiquidity(newPool, p)
-
-  const liquidity = newLiquidity - oldLiquidity
-  return liquidity
-}
-
-export function getCpmmLiquidityPoolWeights(
-  state: CpmmState,
-  liquidities: LiquidityProvision[],
-  excludeAntes: boolean
-) {
-  const calcLiqudity = calculateLiquidityDelta(state.p)
-  const liquidityShares = liquidities.map(calcLiqudity)
-  const shareSum = sum(liquidityShares)
-
-  const weights = liquidityShares.map((shares, i) => ({
-    weight: shares / shareSum,
-    providerId: liquidities[i].userId,
-  }))
-
-  const includedWeights = excludeAntes
-    ? weights.filter((_, i) => !liquidities[i].isAnte)
-    : weights
-
-  const userWeights = groupBy(includedWeights, (w) => w.providerId)
-  const totalUserWeights = mapValues(userWeights, (userWeight) =>
-    sumBy(userWeight, (w) => w.weight)
+  return mapValues(
+    userAmounts,
+    (amounts) => sumBy(amounts, (w) => w.amount) / totalAmount
   )
-  return totalUserWeights
 }
 
 export function getUserLiquidityShares(
   userId: string,
   state: CpmmState,
-  liquidities: LiquidityProvision[],
-  excludeAntes: boolean
+  liquidities: LiquidityProvision[]
 ) {
-  const weights = getCpmmLiquidityPoolWeights(state, liquidities, excludeAntes)
+  const weights = getCpmmLiquidityPoolWeights(liquidities)
   const userWeight = weights[userId] ?? 0
 
   return mapValues(state.pool, (shares) => userWeight * shares)
diff --git a/common/calculate-metrics.ts b/common/calculate-metrics.ts
index 7c2153c1..2c544217 100644
--- a/common/calculate-metrics.ts
+++ b/common/calculate-metrics.ts
@@ -1,9 +1,17 @@
-import { last, sortBy, sum, sumBy } from 'lodash'
-import { calculatePayout } from './calculate'
-import { Bet } from './bet'
-import { Contract } from './contract'
+import { Dictionary, groupBy, last, sum, sumBy, uniq } from 'lodash'
+import { calculatePayout, getContractBetMetrics } from './calculate'
+import { Bet, LimitBet } from './bet'
+import {
+  Contract,
+  CPMMBinaryContract,
+  CPMMContract,
+  DPMContract,
+} from './contract'
 import { PortfolioMetrics, User } from './user'
 import { DAY_MS } from './util/time'
+import { getBinaryCpmmBetInfo, getNewMultiBetInfo } from './new-bet'
+import { getCpmmProbability } from './calculate-cpmm'
+import { removeUndefinedProps } from './util/object'
 
 const computeInvestmentValue = (
   bets: Bet[],
@@ -33,13 +41,81 @@ export const computeInvestmentValueCustomProb = (
 
     const betP = outcome === 'YES' ? p : 1 - p
 
-    const payout = betP * shares
-    const value = payout - (bet.loanAmount ?? 0)
+    const value = betP * shares
     if (isNaN(value)) return 0
     return value
   })
 }
 
+export const computeElasticity = (
+  bets: Bet[],
+  contract: Contract,
+  betAmount = 50
+) => {
+  const { mechanism, outcomeType } = contract
+  return mechanism === 'cpmm-1' &&
+    (outcomeType === 'BINARY' || outcomeType === 'PSEUDO_NUMERIC')
+    ? computeBinaryCpmmElasticity(bets, contract, betAmount)
+    : computeDpmElasticity(contract, betAmount)
+}
+
+export const computeBinaryCpmmElasticity = (
+  bets: Bet[],
+  contract: CPMMContract,
+  betAmount: number
+) => {
+  const limitBets = bets
+    .filter(
+      (b) =>
+        !b.isFilled &&
+        !b.isSold &&
+        !b.isRedemption &&
+        !b.sale &&
+        !b.isCancelled &&
+        b.limitProb !== undefined
+    )
+    .sort((a, b) => a.createdTime - b.createdTime) as LimitBet[]
+
+  const userIds = uniq(limitBets.map((b) => b.userId))
+  // Assume all limit orders are good.
+  const userBalances = Object.fromEntries(
+    userIds.map((id) => [id, Number.MAX_SAFE_INTEGER])
+  )
+
+  const { newPool: poolY, newP: pY } = getBinaryCpmmBetInfo(
+    'YES',
+    betAmount,
+    contract,
+    undefined,
+    limitBets,
+    userBalances
+  )
+  const resultYes = getCpmmProbability(poolY, pY)
+
+  const { newPool: poolN, newP: pN } = getBinaryCpmmBetInfo(
+    'NO',
+    betAmount,
+    contract,
+    undefined,
+    limitBets,
+    userBalances
+  )
+  const resultNo = getCpmmProbability(poolN, pN)
+
+  // handle AMM overflow
+  const safeYes = Number.isFinite(resultYes) ? resultYes : 1
+  const safeNo = Number.isFinite(resultNo) ? resultNo : 0
+
+  return safeYes - safeNo
+}
+
+export const computeDpmElasticity = (
+  contract: DPMContract,
+  betAmount: number
+) => {
+  return getNewMultiBetInfo('', 2 * betAmount, contract).newBet.probAfter
+}
+
 const computeTotalPool = (userContracts: Contract[], startTime = 0) => {
   const periodFilteredContracts = userContracts.filter(
     (contract) => contract.createdTime >= startTime
@@ -123,14 +199,9 @@ export const calculateNewPortfolioMetrics = (
 }
 
 const calculateProfitForPeriod = (
-  startTime: number,
-  descendingPortfolio: PortfolioMetrics[],
+  startingPortfolio: PortfolioMetrics | undefined,
   currentProfit: number
 ) => {
-  const startingPortfolio = descendingPortfolio.find(
-    (p) => p.timestamp < startTime
-  )
-
   if (startingPortfolio === undefined) {
     return currentProfit
   }
@@ -145,33 +216,90 @@ export const calculatePortfolioProfit = (portfolio: PortfolioMetrics) => {
 }
 
 export const calculateNewProfit = (
-  portfolioHistory: PortfolioMetrics[],
+  portfolioHistory: Record<
+    'current' | 'day' | 'week' | 'month',
+    PortfolioMetrics | undefined
+  >,
   newPortfolio: PortfolioMetrics
 ) => {
   const allTimeProfit = calculatePortfolioProfit(newPortfolio)
-  const descendingPortfolio = sortBy(
-    portfolioHistory,
-    (p) => p.timestamp
-  ).reverse()
 
   const newProfit = {
-    daily: calculateProfitForPeriod(
-      Date.now() - 1 * DAY_MS,
-      descendingPortfolio,
-      allTimeProfit
-    ),
-    weekly: calculateProfitForPeriod(
-      Date.now() - 7 * DAY_MS,
-      descendingPortfolio,
-      allTimeProfit
-    ),
-    monthly: calculateProfitForPeriod(
-      Date.now() - 30 * DAY_MS,
-      descendingPortfolio,
-      allTimeProfit
-    ),
+    daily: calculateProfitForPeriod(portfolioHistory.day, allTimeProfit),
+    weekly: calculateProfitForPeriod(portfolioHistory.week, allTimeProfit),
+    monthly: calculateProfitForPeriod(portfolioHistory.month, allTimeProfit),
     allTime: allTimeProfit,
   }
 
   return newProfit
 }
+
+export const calculateMetricsByContract = (
+  bets: Bet[],
+  contractsById: Dictionary<Contract>
+) => {
+  const betsByContract = groupBy(bets, (bet) => bet.contractId)
+  const unresolvedContracts = Object.keys(betsByContract)
+    .map((cid) => contractsById[cid])
+    .filter((c) => c && !c.isResolved)
+
+  return unresolvedContracts.map((c) => {
+    const bets = betsByContract[c.id] ?? []
+    const current = getContractBetMetrics(c, bets)
+
+    let periodMetrics
+    if (c.mechanism === 'cpmm-1' && c.outcomeType === 'BINARY') {
+      const periods = ['day', 'week', 'month'] as const
+      periodMetrics = Object.fromEntries(
+        periods.map((period) => [
+          period,
+          calculatePeriodProfit(c, bets, period),
+        ])
+      )
+    }
+
+    return removeUndefinedProps({
+      contractId: c.id,
+      ...current,
+      from: periodMetrics,
+    })
+  })
+}
+
+export type ContractMetrics = ReturnType<typeof calculateMetricsByContract>[number]
+
+const calculatePeriodProfit = (
+  contract: CPMMBinaryContract,
+  bets: Bet[],
+  period: 'day' | 'week' | 'month'
+) => {
+  const days = period === 'day' ? 1 : period === 'week' ? 7 : 30
+  const fromTime = Date.now() - days * DAY_MS
+  const previousBets = bets.filter((b) => b.createdTime < fromTime)
+
+  const prevProb = contract.prob - contract.probChanges[period]
+  const prob = contract.resolutionProbability
+    ? contract.resolutionProbability
+    : contract.prob
+
+  const previousBetsValue = computeInvestmentValueCustomProb(
+    previousBets,
+    contract,
+    prevProb
+  )
+  const currentBetsValue = computeInvestmentValueCustomProb(
+    previousBets,
+    contract,
+    prob
+  )
+  const profit = currentBetsValue - previousBetsValue
+  const profitPercent =
+    previousBetsValue === 0 ? 0 : 100 * (profit / previousBetsValue)
+
+  return {
+    profit,
+    profitPercent,
+    prevValue: previousBetsValue,
+    value: currentBetsValue,
+  }
+}
diff --git a/common/calculate.ts b/common/calculate.ts
index 5edf1211..c3461cb6 100644
--- a/common/calculate.ts
+++ b/common/calculate.ts
@@ -78,7 +78,8 @@ export function calculateShares(
 export function calculateSaleAmount(
   contract: Contract,
   bet: Bet,
-  unfilledBets: LimitBet[]
+  unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number }
 ) {
   return contract.mechanism === 'cpmm-1' &&
     (contract.outcomeType === 'BINARY' ||
@@ -87,7 +88,8 @@ export function calculateSaleAmount(
         contract,
         Math.abs(bet.shares),
         bet.outcome as 'YES' | 'NO',
-        unfilledBets
+        unfilledBets,
+        balanceByUserId
       ).saleValue
     : calculateDpmSaleAmount(contract, bet)
 }
@@ -102,14 +104,16 @@ export function getProbabilityAfterSale(
   contract: Contract,
   outcome: string,
   shares: number,
-  unfilledBets: LimitBet[]
+  unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number }
 ) {
   return contract.mechanism === 'cpmm-1'
     ? getCpmmProbabilityAfterSale(
         contract,
         shares,
         outcome as 'YES' | 'NO',
-        unfilledBets
+        unfilledBets,
+        balanceByUserId
       )
     : getDpmProbabilityAfterSale(contract.totalShares, outcome, shares)
 }
@@ -174,6 +178,8 @@ function getDpmInvested(yourBets: Bet[]) {
   })
 }
 
+export type ContractBetMetrics = ReturnType<typeof getContractBetMetrics>
+
 export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
   const { resolution } = contract
   const isCpmm = contract.mechanism === 'cpmm-1'
@@ -210,9 +216,8 @@ export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
     }
   }
 
-  const netPayout = payout - loan
   const profit = payout + saleValue + redeemed - totalInvested
-  const profitPercent = (profit / totalInvested) * 100
+  const profitPercent = totalInvested === 0 ? 0 : (profit / totalInvested) * 100
 
   const invested = isCpmm ? getCpmmInvested(yourBets) : getDpmInvested(yourBets)
   const hasShares = Object.values(totalShares).some(
@@ -221,8 +226,8 @@ export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
 
   return {
     invested,
+    loan,
     payout,
-    netPayout,
     profit,
     profitPercent,
     totalShares,
@@ -233,8 +238,8 @@ export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
 export function getContractBetNullMetrics() {
   return {
     invested: 0,
+    loan: 0,
     payout: 0,
-    netPayout: 0,
     profit: 0,
     profitPercent: 0,
     totalShares: {} as { [outcome: string]: number },
diff --git a/common/charity.ts b/common/charity.ts
index fd5abc36..0ebeeec1 100644
--- a/common/charity.ts
+++ b/common/charity.ts
@@ -576,7 +576,7 @@ Work towards sustainable, systemic change.`,
 
 If you would like to support our work, you can do so by getting involved or by donating.`,
   },
-    {
+  {
     name: 'CaRLA',
     website: 'https://carlaef.org/',
     photo: 'https://i.imgur.com/IsNVTOY.png',
@@ -589,6 +589,14 @@ CaRLA uses legal advocacy and education to ensure all cities comply with their o
 
 In addition to housing impact litigation, we provide free legal aid, education and workshops, counseling and advocacy to advocates, homeowners, small developers, and city and state government officials.`,
   },
+  {
+    name: 'Mriya',
+    website: 'https://mriya-ua.org/',
+    photo:
+      'https://firebasestorage.googleapis.com/v0/b/mantic-markets.appspot.com/o/user-images%2Fdefault%2Fci2h3hStFM.47?alt=media&token=0d2cdc3d-e4d8-4f5e-8f23-4a586b6ff637',
+    preview: 'Donate supplies to soldiers in Ukraine',
+    description: 'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.',
+  },
 ].map((charity) => {
   const slug = charity.name.toLowerCase().replace(/\s/g, '-')
   return {
diff --git a/common/contract-details.ts b/common/contract-details.ts
index c231b1e4..53a3ed97 100644
--- a/common/contract-details.ts
+++ b/common/contract-details.ts
@@ -30,7 +30,7 @@ export function contractTextDetails(contract: Contract) {
   const { closeTime, groupLinks } = contract
   const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract)
 
-  const groupHashtags = groupLinks?.slice(0, 5).map((g) => `#${g.name}`)
+  const groupHashtags = groupLinks?.map((g) => `#${g.name.replace(/ /g, '')}`)
 
   return (
     `${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
diff --git a/common/contract.ts b/common/contract.ts
index 2e9d94c4..dd2aa70a 100644
--- a/common/contract.ts
+++ b/common/contract.ts
@@ -49,6 +49,7 @@ export type Contract<T extends AnyContractType = AnyContractType> = {
   volume: number
   volume24Hours: number
   volume7Days: number
+  elasticity: number
 
   collectedFees: Fees
 
@@ -62,7 +63,9 @@ export type Contract<T extends AnyContractType = AnyContractType> = {
   featuredOnHomeRank?: number
   likedByUserIds?: string[]
   likedByUserCount?: number
+  flaggedByUsernames?: string[]
   openCommentBounties?: number
+  unlistedById?: string
 } & T
 
 export type BinaryContract = Contract & Binary
@@ -88,7 +91,8 @@ export type CPMM = {
   mechanism: 'cpmm-1'
   pool: { [outcome: string]: number }
   p: number // probability constant in y^p * n^(1-p) = k
-  totalLiquidity: number // in M$
+  totalLiquidity: number // for historical reasons, this the total subsidy amount added in M$
+  subsidyPool: number // current value of subsidy pool in M$
   prob: number
   probChanges: {
     day: number
diff --git a/common/economy.ts b/common/economy.ts
index d25a0c71..c828b0d3 100644
--- a/common/economy.ts
+++ b/common/economy.ts
@@ -11,8 +11,10 @@ export const REFERRAL_AMOUNT = econ?.REFERRAL_AMOUNT ?? 250
 
 export const UNIQUE_BETTOR_BONUS_AMOUNT = econ?.UNIQUE_BETTOR_BONUS_AMOUNT ?? 10
 export const BETTING_STREAK_BONUS_AMOUNT =
-  econ?.BETTING_STREAK_BONUS_AMOUNT ?? 10
-export const BETTING_STREAK_BONUS_MAX = econ?.BETTING_STREAK_BONUS_MAX ?? 50
+  econ?.BETTING_STREAK_BONUS_AMOUNT ?? 5
+export const BETTING_STREAK_BONUS_MAX = econ?.BETTING_STREAK_BONUS_MAX ?? 25
 export const BETTING_STREAK_RESET_HOUR = econ?.BETTING_STREAK_RESET_HOUR ?? 7
 export const FREE_MARKETS_PER_USER_MAX = econ?.FREE_MARKETS_PER_USER_MAX ?? 5
 export const COMMENT_BOUNTY_AMOUNT = econ?.COMMENT_BOUNTY_AMOUNT ?? 250
+
+export const UNIQUE_BETTOR_LIQUIDITY = 20
diff --git a/common/fees.ts b/common/fees.ts
index f944933c..7421ef54 100644
--- a/common/fees.ts
+++ b/common/fees.ts
@@ -1,3 +1,5 @@
+export const FLAT_TRADE_FEE = 0.1 // M$0.1
+
 export const PLATFORM_FEE = 0
 export const CREATOR_FEE = 0
 export const LIQUIDITY_FEE = 0
diff --git a/common/group.ts b/common/group.ts
index 8f5728d3..cb6660e8 100644
--- a/common/group.ts
+++ b/common/group.ts
@@ -39,3 +39,4 @@ export type GroupLink = {
   createdTime: number
   userId?: string
 }
+export type GroupContractDoc = { contractId: string; createdTime: number }
diff --git a/common/new-bet.ts b/common/new-bet.ts
index 91faf640..8057cd5b 100644
--- a/common/new-bet.ts
+++ b/common/new-bet.ts
@@ -17,8 +17,7 @@ import {
 import {
   CPMMBinaryContract,
   DPMBinaryContract,
-  FreeResponseContract,
-  MultipleChoiceContract,
+  DPMContract,
   NumericContract,
   PseudoNumericContract,
 } from './contract'
@@ -144,7 +143,8 @@ export const computeFills = (
   betAmount: number,
   state: CpmmState,
   limitProb: number | undefined,
-  unfilledBets: LimitBet[]
+  unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number }
 ) => {
   if (isNaN(betAmount)) {
     throw new Error('Invalid bet amount: ${betAmount}')
@@ -166,10 +166,12 @@ export const computeFills = (
     shares: number
     timestamp: number
   }[] = []
+  const ordersToCancel: LimitBet[] = []
 
   let amount = betAmount
   let cpmmState = { pool: state.pool, p: state.p }
   let totalFees = noFees
+  const currentBalanceByUserId = { ...balanceByUserId }
 
   let i = 0
   while (true) {
@@ -186,9 +188,20 @@ export const computeFills = (
       takers.push(taker)
     } else {
       // Matched against bet.
+      i++
+      const { userId } = maker.bet
+      const makerBalance = currentBalanceByUserId[userId]
+
+      if (floatingGreaterEqual(makerBalance, maker.amount)) {
+        currentBalanceByUserId[userId] = makerBalance - maker.amount
+      } else {
+        // Insufficient balance. Cancel maker bet.
+        ordersToCancel.push(maker.bet)
+        continue
+      }
+
       takers.push(taker)
       makers.push(maker)
-      i++
     }
 
     amount -= taker.amount
@@ -196,7 +209,7 @@ export const computeFills = (
     if (floatingEqual(amount, 0)) break
   }
 
-  return { takers, makers, totalFees, cpmmState }
+  return { takers, makers, totalFees, cpmmState, ordersToCancel }
 }
 
 export const getBinaryCpmmBetInfo = (
@@ -204,15 +217,17 @@ export const getBinaryCpmmBetInfo = (
   betAmount: number,
   contract: CPMMBinaryContract | PseudoNumericContract,
   limitProb: number | undefined,
-  unfilledBets: LimitBet[]
+  unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number }
 ) => {
   const { pool, p } = contract
-  const { takers, makers, cpmmState, totalFees } = computeFills(
+  const { takers, makers, cpmmState, totalFees, ordersToCancel } = computeFills(
     outcome,
     betAmount,
     { pool, p },
     limitProb,
-    unfilledBets
+    unfilledBets,
+    balanceByUserId
   )
   const probBefore = getCpmmProbability(contract.pool, contract.p)
   const probAfter = getCpmmProbability(cpmmState.pool, cpmmState.p)
@@ -247,6 +262,7 @@ export const getBinaryCpmmBetInfo = (
     newP: cpmmState.p,
     newTotalLiquidity,
     makers,
+    ordersToCancel,
   }
 }
 
@@ -255,14 +271,16 @@ export const getBinaryBetStats = (
   betAmount: number,
   contract: CPMMBinaryContract | PseudoNumericContract,
   limitProb: number,
-  unfilledBets: LimitBet[]
+  unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number }
 ) => {
   const { newBet } = getBinaryCpmmBetInfo(
     outcome,
     betAmount ?? 0,
     contract,
     limitProb,
-    unfilledBets as LimitBet[]
+    unfilledBets,
+    balanceByUserId
   )
   const remainingMatched =
     ((newBet.orderAmount ?? 0) - newBet.amount) /
@@ -325,7 +343,7 @@ export const getNewBinaryDpmBetInfo = (
 export const getNewMultiBetInfo = (
   outcome: string,
   amount: number,
-  contract: FreeResponseContract | MultipleChoiceContract
+  contract: DPMContract
 ) => {
   const { pool, totalShares, totalBets } = contract
 
diff --git a/common/new-contract.ts b/common/new-contract.ts
index 431f435e..6a7f57da 100644
--- a/common/new-contract.ts
+++ b/common/new-contract.ts
@@ -12,7 +12,6 @@ import {
   visibility,
 } from './contract'
 import { User } from './user'
-import { parseTags, richTextToString } from './util/parse'
 import { removeUndefinedProps } from './util/object'
 import { JSONContent } from '@tiptap/core'
 
@@ -38,15 +37,6 @@ export function getNewContract(
   answers: string[],
   visibility: visibility
 ) {
-  const tags = parseTags(
-    [
-      question,
-      richTextToString(description),
-      ...extraTags.map((tag) => `#${tag}`),
-    ].join(' ')
-  )
-  const lowercaseTags = tags.map((tag) => tag.toLowerCase())
-
   const propsByOutcomeType =
     outcomeType === 'BINARY'
       ? getBinaryCpmmProps(initialProb, ante) // getBinaryDpmProps(initialProb, ante)
@@ -70,9 +60,10 @@ export function getNewContract(
 
     question: question.trim(),
     description,
-    tags,
-    lowercaseTags,
+    tags: [],
+    lowercaseTags: [],
     visibility,
+    unlistedById: visibility === 'unlisted' ? creator.id : undefined,
     isResolved: false,
     createdTime: Date.now(),
     closeTime,
@@ -80,6 +71,7 @@ export function getNewContract(
     volume: 0,
     volume24Hours: 0,
     volume7Days: 0,
+    elasticity: propsByOutcomeType.mechanism === 'cpmm-1' ? 0.38 : 0.75,
 
     collectedFees: {
       creatorFee: 0,
@@ -120,6 +112,7 @@ const getBinaryCpmmProps = (initialProb: number, ante: number) => {
     mechanism: 'cpmm-1',
     outcomeType: 'BINARY',
     totalLiquidity: ante,
+    subsidyPool: 0,
     initialProbability: p,
     p,
     pool: pool,
diff --git a/common/notification.ts b/common/notification.ts
index d91dc300..436393a5 100644
--- a/common/notification.ts
+++ b/common/notification.ts
@@ -4,7 +4,7 @@ export type Notification = {
   id: string
   userId: string
   reasonText?: string
-  reason?: notification_reason_types
+  reason?: notification_reason_types | notification_preference
   createdTime: number
   viewTime?: number
   isSeen: boolean
@@ -46,6 +46,7 @@ export type notification_source_types =
   | 'loan'
   | 'like'
   | 'tip_and_like'
+  | 'badge'
 
 export type notification_source_update_types =
   | 'created'
@@ -96,6 +97,7 @@ type notification_descriptions = {
   [key in notification_preference]: {
     simple: string
     detailed: string
+    necessary?: boolean
   }
 }
 export const NOTIFICATION_DESCRIPTIONS: notification_descriptions = {
@@ -208,8 +210,9 @@ export const NOTIFICATION_DESCRIPTIONS: notification_descriptions = {
     detailed: 'Bonuses for unique predictors on your markets',
   },
   your_contract_closed: {
-    simple: 'Your market has closed and you need to resolve it',
-    detailed: 'Your market has closed and you need to resolve it',
+    simple: 'Your market has closed and you need to resolve it (necessary)',
+    detailed: 'Your market has closed and you need to resolve it (necessary)',
+    necessary: true,
   },
   all_comments_on_watched_markets: {
     simple: 'All new comments',
@@ -235,6 +238,15 @@ export const NOTIFICATION_DESCRIPTIONS: notification_descriptions = {
     simple: `Only on markets you're invested in`,
     detailed: `Answers on markets that you're watching and that you're invested in`,
   },
+  badges_awarded: {
+    simple: 'New badges awarded',
+    detailed: 'New badges you have earned',
+  },
+  opt_out_all: {
+    simple: 'Opt out of all notifications (excludes when your markets close)',
+    detailed:
+      'Opt out of all notifications excluding your own market closure notifications',
+  },
 }
 
 export type BettingStreakData = {
diff --git a/common/payouts-fixed.ts b/common/payouts-fixed.ts
index 99e03fac..74e9fe16 100644
--- a/common/payouts-fixed.ts
+++ b/common/payouts-fixed.ts
@@ -1,4 +1,3 @@
-
 import { Bet } from './bet'
 import { getProbability } from './calculate'
 import { getCpmmLiquidityPoolWeights } from './calculate-cpmm'
@@ -56,10 +55,10 @@ export const getLiquidityPoolPayouts = (
   outcome: string,
   liquidities: LiquidityProvision[]
 ) => {
-  const { pool } = contract
-  const finalPool = pool[outcome]
+  const { pool, subsidyPool } = contract
+  const finalPool = pool[outcome] + subsidyPool
 
-  const weights = getCpmmLiquidityPoolWeights(contract, liquidities, false)
+  const weights = getCpmmLiquidityPoolWeights(liquidities)
 
   return Object.entries(weights).map(([providerId, weight]) => ({
     userId: providerId,
@@ -95,10 +94,10 @@ export const getLiquidityPoolProbPayouts = (
   p: number,
   liquidities: LiquidityProvision[]
 ) => {
-  const { pool } = contract
-  const finalPool = p * pool.YES + (1 - p) * pool.NO
+  const { pool, subsidyPool } = contract
+  const finalPool = p * pool.YES + (1 - p) * pool.NO + subsidyPool
 
-  const weights = getCpmmLiquidityPoolWeights(contract, liquidities, false)
+  const weights = getCpmmLiquidityPoolWeights(liquidities)
 
   return Object.entries(weights).map(([providerId, weight]) => ({
     userId: providerId,
diff --git a/common/post.ts b/common/post.ts
index 45503b22..77130a2c 100644
--- a/common/post.ts
+++ b/common/post.ts
@@ -3,6 +3,7 @@ import { JSONContent } from '@tiptap/core'
 export type Post = {
   id: string
   title: string
+  subtitle: string
   content: JSONContent
   creatorId: string // User id
   createdTime: number
@@ -17,3 +18,4 @@ export type DateDoc = Post & {
 }
 
 export const MAX_POST_TITLE_LENGTH = 480
+export const MAX_POST_SUBTITLE_LENGTH = 480
diff --git a/common/scoring.ts b/common/scoring.ts
index 4ef46534..a8f62631 100644
--- a/common/scoring.ts
+++ b/common/scoring.ts
@@ -1,8 +1,9 @@
-import { groupBy, sumBy, mapValues } from 'lodash'
+import { groupBy, sumBy, mapValues, keyBy, sortBy } from 'lodash'
 
 import { Bet } from './bet'
-import { getContractBetMetrics } from './calculate'
+import { getContractBetMetrics, resolvedPayout } from './calculate'
 import { Contract } from './contract'
+import { ContractComment } from './comment'
 
 export function scoreCreators(contracts: Contract[]) {
   const creatorScore = mapValues(
@@ -30,8 +31,11 @@ export function scoreTraders(contracts: Contract[], bets: Bet[][]) {
 }
 
 export function scoreUsersByContract(contract: Contract, bets: Bet[]) {
-  const betsByUser = groupBy(bets, bet => bet.userId)
-  return mapValues(betsByUser, bets => getContractBetMetrics(contract, bets).profit)
+  const betsByUser = groupBy(bets, (bet) => bet.userId)
+  return mapValues(
+    betsByUser,
+    (bets) => getContractBetMetrics(contract, bets).profit
+  )
 }
 
 export function addUserScores(
@@ -43,3 +47,47 @@ export function addUserScores(
     dest[userId] += score
   }
 }
+
+export function scoreCommentorsAndBettors(
+  contract: Contract,
+  bets: Bet[],
+  comments: ContractComment[]
+) {
+  const commentsById = keyBy(comments, 'id')
+  const betsById = keyBy(bets, 'id')
+
+  // If 'id2' is the sale of 'id1', both are logged with (id2 - id1) of profit
+  // Otherwise, we record the profit at resolution time
+  const profitById: Record<string, number> = {}
+  for (const bet of bets) {
+    if (bet.sale) {
+      const originalBet = betsById[bet.sale.betId]
+      const profit = bet.sale.amount - originalBet.amount
+      profitById[bet.id] = profit
+      profitById[originalBet.id] = profit
+    } else {
+      profitById[bet.id] = resolvedPayout(contract, bet) - bet.amount
+    }
+  }
+
+  // Now find the betId with the highest profit
+  const topBetId = sortBy(bets, (b) => -profitById[b.id])[0]?.id
+  const topBettor = betsById[topBetId]?.userName
+
+  // And also the commentId of the comment with the highest profit
+  const topCommentId = sortBy(
+    comments,
+    (c) => c.betId && -profitById[c.betId]
+  )[0]?.id
+  const topCommentBetId = commentsById[topCommentId]?.betId
+
+  return {
+    topCommentId,
+    topBetId,
+    topBettor,
+    profitById,
+    commentsById,
+    betsById,
+    topCommentBetId,
+  }
+}
diff --git a/common/sell-bet.ts b/common/sell-bet.ts
index 96636ca0..1b56c819 100644
--- a/common/sell-bet.ts
+++ b/common/sell-bet.ts
@@ -84,15 +84,17 @@ export const getCpmmSellBetInfo = (
   outcome: 'YES' | 'NO',
   contract: CPMMContract,
   unfilledBets: LimitBet[],
+  balanceByUserId: { [userId: string]: number },
   loanPaid: number
 ) => {
   const { pool, p } = contract
 
-  const { saleValue, cpmmState, fees, makers, takers } = calculateCpmmSale(
+  const { saleValue, cpmmState, fees, makers, takers, ordersToCancel } = calculateCpmmSale(
     contract,
     shares,
     outcome,
-    unfilledBets
+    unfilledBets,
+    balanceByUserId,
   )
 
   const probBefore = getCpmmProbability(pool, p)
@@ -134,5 +136,6 @@ export const getCpmmSellBetInfo = (
     fees,
     makers,
     takers,
+    ordersToCancel
   }
 }
diff --git a/common/user-notification-preferences.ts b/common/user-notification-preferences.ts
index 3fc0fb2f..6b5a448d 100644
--- a/common/user-notification-preferences.ts
+++ b/common/user-notification-preferences.ts
@@ -53,6 +53,9 @@ export type notification_preferences = {
   profit_loss_updates: notification_destination_types[]
   onboarding_flow: notification_destination_types[]
   thank_you_for_purchases: notification_destination_types[]
+  badges_awarded: notification_destination_types[]
+  opt_out_all: notification_destination_types[]
+  // When adding a new notification preference, use add-new-notification-preference.ts to existing users
 }
 
 export const getDefaultNotificationPreferences = (
@@ -65,7 +68,7 @@ export const getDefaultNotificationPreferences = (
     const email = noEmails ? undefined : emailIf ? 'email' : undefined
     return filterDefined([browser, email]) as notification_destination_types[]
   }
-  return {
+  const defaults: notification_preferences = {
     // Watched Markets
     all_comments_on_watched_markets: constructPref(true, false),
     all_answers_on_watched_markets: constructPref(true, false),
@@ -107,7 +110,7 @@ export const getDefaultNotificationPreferences = (
     loan_income: constructPref(true, false),
     betting_streaks: constructPref(true, false),
     referral_bonuses: constructPref(true, true),
-    unique_bettors_on_your_contract: constructPref(true, false),
+    unique_bettors_on_your_contract: constructPref(true, true),
     tipped_comments_on_watched_markets: constructPref(true, true),
     tips_on_your_markets: constructPref(true, true),
     limit_order_fills: constructPref(true, false),
@@ -121,7 +124,11 @@ export const getDefaultNotificationPreferences = (
     probability_updates_on_watched_markets: constructPref(true, false),
     thank_you_for_purchases: constructPref(false, false),
     onboarding_flow: constructPref(false, false),
-  } as notification_preferences
+
+    opt_out_all: [],
+    badges_awarded: constructPref(true, false),
+  }
+  return defaults
 }
 
 // Adding a new key:value here is optional, you can just use a key of notification_subscription_types
@@ -172,23 +179,44 @@ export const getNotificationDestinationsForUser = (
   reason: notification_reason_types | notification_preference
 ) => {
   const notificationSettings = privateUser.notificationPreferences
-  let destinations
-  let subscriptionType: notification_preference | undefined
-  if (Object.keys(notificationSettings).includes(reason)) {
-    subscriptionType = reason as notification_preference
-    destinations = notificationSettings[subscriptionType]
-  } else {
-    const key = reason as notification_reason_types
-    subscriptionType = notificationReasonToSubscriptionType[key]
-    destinations = subscriptionType
-      ? notificationSettings[subscriptionType]
-      : []
-  }
   const unsubscribeEndpoint = getFunctionUrl('unsubscribe')
-  return {
-    sendToEmail: destinations.includes('email'),
-    sendToBrowser: destinations.includes('browser'),
-    unsubscribeUrl: `${unsubscribeEndpoint}?id=${privateUser.id}&type=${subscriptionType}`,
-    urlToManageThisNotification: `${DOMAIN}/notifications?tab=settings&section=${subscriptionType}`,
+  try {
+    let destinations
+    let subscriptionType: notification_preference | undefined
+    if (Object.keys(notificationSettings).includes(reason)) {
+      subscriptionType = reason as notification_preference
+      destinations = notificationSettings[subscriptionType]
+    } else {
+      const key = reason as notification_reason_types
+      subscriptionType = notificationReasonToSubscriptionType[key]
+      destinations = subscriptionType
+        ? notificationSettings[subscriptionType]
+        : []
+    }
+    const optOutOfAllSettings = notificationSettings['opt_out_all']
+    // Your market closure notifications are high priority, opt-out doesn't affect their delivery
+    const optedOutOfEmail =
+      optOutOfAllSettings.includes('email') &&
+      subscriptionType !== 'your_contract_closed'
+    const optedOutOfBrowser =
+      optOutOfAllSettings.includes('browser') &&
+      subscriptionType !== 'your_contract_closed'
+    return {
+      sendToEmail: destinations.includes('email') && !optedOutOfEmail,
+      sendToBrowser: destinations.includes('browser') && !optedOutOfBrowser,
+      unsubscribeUrl: `${unsubscribeEndpoint}?id=${privateUser.id}&type=${subscriptionType}`,
+      urlToManageThisNotification: `${DOMAIN}/notifications?tab=settings&section=${subscriptionType}`,
+    }
+  } catch (e) {
+    // Fail safely
+    console.log(
+      `couldn't get notification destinations for type ${reason} for user ${privateUser.id}`
+    )
+    return {
+      sendToEmail: false,
+      sendToBrowser: false,
+      unsubscribeUrl: '',
+      urlToManageThisNotification: '',
+    }
   }
 }
diff --git a/common/user.ts b/common/user.ts
index b1365929..f89223d2 100644
--- a/common/user.ts
+++ b/common/user.ts
@@ -1,5 +1,6 @@
 import { notification_preferences } from './user-notification-preferences'
-import { ENV_CONFIG } from 'common/envs/constants'
+import { ENV_CONFIG } from './envs/constants'
+import { MarketCreatorBadge, ProvenCorrectBadge, StreakerBadge } from './badge'
 
 export type User = {
   id: string
@@ -11,7 +12,6 @@ export type User = {
 
   // For their user page
   bio?: string
-  bannerUrl?: string
   website?: string
   twitterHandle?: string
   discordHandle?: string
@@ -33,6 +33,8 @@ export type User = {
     allTime: number
   }
 
+  fractionResolvedCorrectly: number
+
   nextLoanCached: number
   followerCountCached: number
 
@@ -49,6 +51,18 @@ export type User = {
   hasSeenContractFollowModal?: boolean
   freeMarketsCreated?: number
   isBannedFromPosting?: boolean
+
+  achievements: {
+    provenCorrect?: {
+      badges: ProvenCorrectBadge[]
+    }
+    marketCreator?: {
+      badges: MarketCreatorBadge[]
+    }
+    streaker?: {
+      badges: StreakerBadge[]
+    }
+  }
 }
 
 export type PrivateUser = {
@@ -79,7 +93,8 @@ export type PortfolioMetrics = {
   userId: string
 }
 
-export const MANIFOLD_USERNAME = 'ManifoldMarkets'
+export const MANIFOLD_USER_USERNAME = 'ManifoldMarkets'
+export const MANIFOLD_USER_NAME = 'ManifoldMarkets'
 export const MANIFOLD_AVATAR_URL = 'https://manifold.markets/logo-bg-white.png'
 
 // TODO: remove. Hardcoding the strings would be better.
diff --git a/common/util/color.ts b/common/util/color.ts
new file mode 100644
index 00000000..fb15cc6a
--- /dev/null
+++ b/common/util/color.ts
@@ -0,0 +1,24 @@
+export const interpolateColor = (color1: string, color2: string, p: number) => {
+  const rgb1 = parseInt(color1.replace('#', ''), 16)
+  const rgb2 = parseInt(color2.replace('#', ''), 16)
+
+  const [r1, g1, b1] = toArray(rgb1)
+  const [r2, g2, b2] = toArray(rgb2)
+
+  const q = 1 - p
+  const rr = Math.round(r1 * q + r2 * p)
+  const rg = Math.round(g1 * q + g2 * p)
+  const rb = Math.round(b1 * q + b2 * p)
+
+  const hexString = Number((rr << 16) + (rg << 8) + rb).toString(16)
+  const hex = `#${'0'.repeat(6 - hexString.length)}${hexString}`
+  return hex
+}
+
+function toArray(rgb: number) {
+  const r = rgb >> 16
+  const g = (rgb >> 8) % 256
+  const b = rgb % 256
+
+  return [r, g, b]
+}
diff --git a/common/util/format.ts b/common/util/format.ts
index ee59d3e7..ce7849aa 100644
--- a/common/util/format.ts
+++ b/common/util/format.ts
@@ -13,7 +13,9 @@ export function formatMoney(amount: number) {
     Math.round(amount) === 0
       ? 0
       : // Handle 499.9999999999999 case
-        Math.floor(amount + 0.00000000001 * Math.sign(amount))
+        (amount > 0 ? Math.floor : Math.ceil)(
+          amount + 0.00000000001 * Math.sign(amount)
+        )
   return ENV_CONFIG.moneyMoniker + formatter.format(newAmount).replace('$', '')
 }
 
@@ -58,6 +60,16 @@ export function formatLargeNumber(num: number, sigfigs = 2): string {
   return `${numStr}${suffix[i] ?? ''}`
 }
 
+export function shortFormatNumber(num: number): string {
+  if (num < 1000) return showPrecision(num, 3)
+
+  const suffix = ['', 'K', 'M', 'B', 'T', 'Q']
+  const i = Math.floor(Math.log10(num) / 3)
+
+  const numStr = showPrecision(num / Math.pow(10, 3 * i), 2)
+  return `${numStr}${suffix[i] ?? ''}`
+}
+
 export function toCamelCase(words: string) {
   const camelCase = words
     .split(' ')
diff --git a/common/util/parse.ts b/common/util/parse.ts
index 72ceaf15..53874c9e 100644
--- a/common/util/parse.ts
+++ b/common/util/parse.ts
@@ -1,4 +1,3 @@
-import { MAX_TAG_LENGTH } from '../contract'
 import { generateText, JSONContent } from '@tiptap/core'
 // Tiptap starter extensions
 import { Blockquote } from '@tiptap/extension-blockquote'
@@ -24,7 +23,7 @@ import { Mention } from '@tiptap/extension-mention'
 import Iframe from './tiptap-iframe'
 import TiptapTweet from './tiptap-tweet-type'
 import { find } from 'linkifyjs'
-import { uniq } from 'lodash'
+import { cloneDeep, uniq } from 'lodash'
 import { TiptapSpoiler } from './tiptap-spoiler'
 
 /** get first url in text. like "notion.so " -> "http://notion.so"; "notion" -> null */
@@ -33,34 +32,6 @@ export function getUrl(text: string) {
   return results.length ? results[0].href : null
 }
 
-export function parseTags(text: string) {
-  const regex = /(?:^|\s)(?:[#][a-z0-9_]+)/gi
-  const matches = (text.match(regex) || []).map((match) =>
-    match.trim().substring(1).substring(0, MAX_TAG_LENGTH)
-  )
-  const tagSet = new Set()
-  const uniqueTags: string[] = []
-  // Keep casing of last tag.
-  matches.reverse()
-  for (const tag of matches) {
-    const lowercase = tag.toLowerCase()
-    if (!tagSet.has(lowercase)) {
-      tagSet.add(lowercase)
-      uniqueTags.push(tag)
-    }
-  }
-  uniqueTags.reverse()
-  return uniqueTags
-}
-
-export function parseWordsAsTags(text: string) {
-  const taggedText = text
-    .split(/\s+/)
-    .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`))
-    .join(' ')
-  return parseTags(taggedText)
-}
-
 // TODO: fuzzy matching
 export const wordIn = (word: string, corpus: string) =>
   corpus.toLocaleLowerCase().includes(word.toLocaleLowerCase())
@@ -81,7 +52,7 @@ export function parseMentions(data: JSONContent): string[] {
 }
 
 // can't just do [StarterKit, Image...] because it doesn't work with cjs imports
-export const exhibitExts = [
+const stringParseExts = [
   Blockquote,
   Bold,
   BulletList,
@@ -101,12 +72,35 @@ export const exhibitExts = [
 
   Image,
   Link,
-  Mention,
+  Mention, // user @mention
+  Mention.extend({ name: 'contract-mention' }), // market %mention
   Iframe,
   TiptapTweet,
   TiptapSpoiler,
 ]
 
 export function richTextToString(text?: JSONContent) {
-  return !text ? '' : generateText(text, exhibitExts)
+  if (!text) return ''
+  // remove spoiler tags.
+  const newText = cloneDeep(text)
+  dfs(newText, (current) => {
+    if (current.marks?.some((m) => m.type === TiptapSpoiler.name)) {
+      current.text = '[spoiler]'
+    } else if (current.type === 'image') {
+      current.text = '[Image]'
+      // This is a hack, I've no idea how to change a tiptap extenstion's schema
+      current.type = 'text'
+    } else if (current.type === 'iframe') {
+      const src = current.attrs?.['src'] ? current.attrs['src'] : ''
+      current.text = '[Iframe]' + (src ? ` url:${src}` : '')
+      // This is a hack, I've no idea how to change a tiptap extenstion's schema
+      current.type = 'text'
+    }
+  })
+  return generateText(newText, stringParseExts)
+}
+
+const dfs = (data: JSONContent, f: (current: JSONContent) => any) => {
+  data.content?.forEach((d) => dfs(d, f))
+  f(data)
 }
diff --git a/common/util/tiptap-spoiler.ts b/common/util/tiptap-spoiler.ts
index 5502da58..c8944a46 100644
--- a/common/util/tiptap-spoiler.ts
+++ b/common/util/tiptap-spoiler.ts
@@ -39,7 +39,7 @@ export const TiptapSpoiler = Mark.create<SpoilerOptions>({
   exitable: true,
   content: 'inline*',
 
-  priority: 200, // higher priority than other formatting so they go inside
+  priority: 1001, // higher priority than other formatting so they go inside
 
   addOptions() {
     return {
diff --git a/docs/docs/bounties.md b/docs/docs/bounties.md
index ba4e865b..48b04dc1 100644
--- a/docs/docs/bounties.md
+++ b/docs/docs/bounties.md
@@ -15,6 +15,22 @@ Our community is the beating heart of Manifold; your individual contributions ar
 
 ## Awarded bounties
 
+💥 *Awarded on 2022-10-07*
+
+**[Pepe](https://manifold.markets/Pepe): M$10,000**
+**[Jack](https://manifold.markets/jack): M$2,000**
+**[Martin](https://manifold.markets/MartinRandall): M$2,000**
+**[Yev](https://manifold.markets/Yev): M$2,000**
+**[Michael](https://manifold.markets/MichaelWheatley): M$2,000**
+
+- For discovering an infinite mana exploit using limit orders, and informing the Manifold team of it privately.
+
+**[Matt](https://manifold.markets/MattP): M$5,000**
+**[Adrian](https://manifold.markets/ahalekelly): M$5,000**
+**[Yev](https://manifold.markets/Yev): M$5,000**
+
+- For discovering an AMM liquidity exploit and informing the Manifold team of it privately.
+
 🎈 *Awarded on 2022-06-14*
 
 **[Wasabipesto](https://manifold.markets/wasabipesto): M$20,000**
diff --git a/firestore.rules b/firestore.rules
index bf0375e6..993791b2 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -27,7 +27,7 @@ service cloud.firestore {
       allow read;
       allow update: if userId == request.auth.uid
                        && request.resource.data.diff(resource.data).affectedKeys()
-                                                                    .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle', 'followedCategories', 'lastPingTime','shouldShowWelcome', 'hasSeenContractFollowModal', 'homeSections']);
+                                                                    .hasOnly(['bio', 'website', 'twitterHandle', 'discordHandle', 'followedCategories', 'lastPingTime','shouldShowWelcome', 'hasSeenContractFollowModal', 'homeSections']);
       // User referral rules
       allow update: if userId == request.auth.uid
                          && request.resource.data.diff(resource.data).affectedKeys()
@@ -44,6 +44,10 @@ service cloud.firestore {
       allow read;
     }
 
+    match /{somePath=**}/contract-metrics/{contractId} {
+      allow read;
+    }
+
     match /{somePath=**}/challenges/{challengeId}{
       allow read;
     }
@@ -102,7 +106,7 @@ service cloud.firestore {
       allow update: if request.resource.data.diff(resource.data).affectedKeys()
                                                                  .hasOnly(['tags', 'lowercaseTags', 'groupSlugs', 'groupLinks']);
       allow update: if request.resource.data.diff(resource.data).affectedKeys()
-                                                                 .hasOnly(['description', 'closeTime', 'question'])
+                                                                 .hasOnly(['description', 'closeTime', 'question', 'visibility', 'unlistedById'])
                        && resource.data.creatorId == request.auth.uid;
       allow update: if isAdmin();
           match /comments/{commentId} {
diff --git a/functions/.env.dev b/functions/.env.dev
new file mode 100644
index 00000000..b5aae225
--- /dev/null
+++ b/functions/.env.dev
@@ -0,0 +1,3 @@
+# This sets which EnvConfig is deployed to Firebase Cloud Functions
+
+NEXT_PUBLIC_FIREBASE_ENV=DEV
diff --git a/functions/.env b/functions/.env.prod
similarity index 100%
rename from functions/.env
rename to functions/.env.prod
diff --git a/functions/package.json b/functions/package.json
index 0397c5db..cd2a9ec5 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -5,7 +5,7 @@
     "firestore": "dev-mantic-markets.appspot.com"
   },
   "scripts": {
-    "build": "yarn compile && rm -rf dist && mkdir -p dist/functions && cp -R ../common/lib dist/common && cp -R lib/src dist/functions/src && cp ../yarn.lock dist && cp package.json dist && cp .env dist",
+    "build": "yarn compile && rm -rf dist && mkdir -p dist/functions && cp -R ../common/lib dist/common && cp -R lib/src dist/functions/src && cp ../yarn.lock dist && cp package.json dist && cp .env.prod dist && cp .env.dev dist",
     "compile": "tsc -b",
     "watch": "tsc -w",
     "shell": "yarn build && firebase functions:shell",
diff --git a/functions/src/add-liquidity.ts b/functions/src/add-subsidy.ts
similarity index 55%
rename from functions/src/add-liquidity.ts
rename to functions/src/add-subsidy.ts
index e6090111..b3ed1895 100644
--- a/functions/src/add-liquidity.ts
+++ b/functions/src/add-subsidy.ts
@@ -3,24 +3,18 @@ import { z } from 'zod'
 
 import { Contract, CPMMContract } from '../../common/contract'
 import { User } from '../../common/user'
-import { removeUndefinedProps } from '../../common/util/object'
 import { getNewLiquidityProvision } from '../../common/add-liquidity'
 import { APIError, newEndpoint, validate } from './api'
-import {
-  DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
-  HOUSE_LIQUIDITY_PROVIDER_ID,
-} from '../../common/antes'
-import { isProd } from './utils'
 
 const bodySchema = z.object({
   contractId: z.string(),
   amount: z.number().gt(0),
 })
 
-export const addliquidity = newEndpoint({}, async (req, auth) => {
+export const addsubsidy = newEndpoint({}, async (req, auth) => {
   const { amount, contractId } = validate(bodySchema, req.body)
 
-  if (!isFinite(amount)) throw new APIError(400, 'Invalid amount')
+  if (!isFinite(amount) || amount < 1) throw new APIError(400, 'Invalid amount')
 
   // run as transaction to prevent race conditions
   return await firestore.runTransaction(async (transaction) => {
@@ -50,7 +44,7 @@ export const addliquidity = newEndpoint({}, async (req, auth) => {
       .collection(`contracts/${contractId}/liquidity`)
       .doc()
 
-    const { newLiquidityProvision, newPool, newP, newTotalLiquidity } =
+    const { newLiquidityProvision, newTotalLiquidity, newSubsidyPool } =
       getNewLiquidityProvision(
         user.id,
         amount,
@@ -58,21 +52,10 @@ export const addliquidity = newEndpoint({}, async (req, auth) => {
         newLiquidityProvisionDoc.id
       )
 
-    if (newP !== undefined && !isFinite(newP)) {
-      return {
-        status: 'error',
-        message: 'Liquidity injection rejected due to overflow error.',
-      }
-    }
-
-    transaction.update(
-      contractDoc,
-      removeUndefinedProps({
-        pool: newPool,
-        p: newP,
-        totalLiquidity: newTotalLiquidity,
-      })
-    )
+    transaction.update(contractDoc, {
+      subsidyPool: newSubsidyPool,
+      totalLiquidity: newTotalLiquidity,
+    } as Partial<CPMMContract>)
 
     const newBalance = user.balance - amount
     const newTotalDeposits = user.totalDeposits - amount
@@ -93,41 +76,3 @@ export const addliquidity = newEndpoint({}, async (req, auth) => {
 })
 
 const firestore = admin.firestore()
-
-export const addHouseLiquidity = (contract: CPMMContract, amount: number) => {
-  return firestore.runTransaction(async (transaction) => {
-    const newLiquidityProvisionDoc = firestore
-      .collection(`contracts/${contract.id}/liquidity`)
-      .doc()
-
-    const providerId = isProd()
-      ? HOUSE_LIQUIDITY_PROVIDER_ID
-      : DEV_HOUSE_LIQUIDITY_PROVIDER_ID
-
-    const { newLiquidityProvision, newPool, newP, newTotalLiquidity } =
-      getNewLiquidityProvision(
-        providerId,
-        amount,
-        contract,
-        newLiquidityProvisionDoc.id
-      )
-
-    if (newP !== undefined && !isFinite(newP)) {
-      throw new APIError(
-        500,
-        'Liquidity injection rejected due to overflow error.'
-      )
-    }
-
-    transaction.update(
-      firestore.doc(`contracts/${contract.id}`),
-      removeUndefinedProps({
-        pool: newPool,
-        p: newP,
-        totalLiquidity: newTotalLiquidity,
-      })
-    )
-
-    transaction.create(newLiquidityProvisionDoc, newLiquidityProvision)
-  })
-}
diff --git a/functions/src/api.ts b/functions/src/api.ts
index 7134c8d8..24677567 100644
--- a/functions/src/api.ts
+++ b/functions/src/api.ts
@@ -146,3 +146,24 @@ export const newEndpoint = (endpointOpts: EndpointOptions, fn: Handler) => {
     },
   } as EndpointDefinition
 }
+
+export const newEndpointNoAuth = (
+  endpointOpts: EndpointOptions,
+  fn: (req: Request) => Promise<Output>
+) => {
+  const opts = Object.assign({}, DEFAULT_OPTS, endpointOpts)
+  return {
+    opts,
+    handler: async (req: Request, res: Response) => {
+      log(`${req.method} ${req.url} ${JSON.stringify(req.body)}`)
+      try {
+        if (opts.method !== req.method) {
+          throw new APIError(405, `This endpoint supports only ${opts.method}.`)
+        }
+        res.status(200).json(await fn(req))
+      } catch (e) {
+        writeResponseError(e, res)
+      }
+    },
+  } as EndpointDefinition
+}
diff --git a/functions/src/create-notification.ts b/functions/src/create-notification.ts
index 9bd73d05..204105ac 100644
--- a/functions/src/create-notification.ts
+++ b/functions/src/create-notification.ts
@@ -6,7 +6,13 @@ import {
   Notification,
   notification_reason_types,
 } from '../../common/notification'
-import { User } from '../../common/user'
+import {
+  MANIFOLD_AVATAR_URL,
+  MANIFOLD_USER_NAME,
+  MANIFOLD_USER_USERNAME,
+  PrivateUser,
+  User,
+} from '../../common/user'
 import { Contract } from '../../common/contract'
 import { getPrivateUser, getValues } from './utils'
 import { Comment } from '../../common/comment'
@@ -30,27 +36,26 @@ import {
 import { filterDefined } from '../../common/util/array'
 import { getNotificationDestinationsForUser } from '../../common/user-notification-preferences'
 import { ContractFollow } from '../../common/follow'
+import { Badge } from 'common/badge'
 const firestore = admin.firestore()
 
 type recipients_to_reason_texts = {
   [userId: string]: { reason: notification_reason_types }
 }
 
-export const createNotification = async (
+export const createFollowOrMarketSubsidizedNotification = async (
   sourceId: string,
-  sourceType: 'contract' | 'liquidity' | 'follow',
-  sourceUpdateType: 'closed' | 'created',
+  sourceType: 'liquidity' | 'follow',
+  sourceUpdateType: 'created',
   sourceUser: User,
   idempotencyKey: string,
   sourceText: string,
   miscData?: {
     contract?: Contract
     recipients?: string[]
-    slug?: string
-    title?: string
   }
 ) => {
-  const { contract: sourceContract, recipients, slug, title } = miscData ?? {}
+  const { contract: sourceContract, recipients } = miscData ?? {}
 
   const shouldReceiveNotification = (
     userId: string,
@@ -94,23 +99,15 @@ export const createNotification = async (
           sourceContractCreatorUsername: sourceContract?.creatorUsername,
           sourceContractTitle: sourceContract?.question,
           sourceContractSlug: sourceContract?.slug,
-          sourceSlug: slug ? slug : sourceContract?.slug,
-          sourceTitle: title ? title : sourceContract?.question,
+          sourceSlug: sourceContract?.slug,
+          sourceTitle: sourceContract?.question,
         }
         await notificationRef.set(removeUndefinedProps(notification))
       }
 
       if (!sendToEmail) continue
 
-      if (reason === 'your_contract_closed' && privateUser && sourceContract) {
-        // TODO: include number and names of bettors waiting for creator to resolve their market
-        await sendMarketCloseEmail(
-          reason,
-          sourceUser,
-          privateUser,
-          sourceContract
-        )
-      } else if (reason === 'subsidized_your_market') {
+      if (reason === 'subsidized_your_market') {
         // TODO: send email to creator of market that was subsidized
       } else if (reason === 'on_new_follow') {
         // TODO: send email to user who was followed
@@ -127,20 +124,7 @@ export const createNotification = async (
         reason: 'on_new_follow',
       }
     return await sendNotificationsIfSettingsPermit(userToReasonTexts)
-  } else if (
-    sourceType === 'contract' &&
-    sourceUpdateType === 'closed' &&
-    sourceContract
-  ) {
-    userToReasonTexts[sourceContract.creatorId] = {
-      reason: 'your_contract_closed',
-    }
-    return await sendNotificationsIfSettingsPermit(userToReasonTexts)
-  } else if (
-    sourceType === 'liquidity' &&
-    sourceUpdateType === 'created' &&
-    sourceContract
-  ) {
+  } else if (sourceType === 'liquidity' && sourceContract) {
     if (shouldReceiveNotification(sourceContract.creatorId, userToReasonTexts))
       userToReasonTexts[sourceContract.creatorId] = {
         reason: 'subsidized_your_market',
@@ -1087,6 +1071,81 @@ export const createBountyNotification = async (
     sourceTitle: contract.question,
   }
   return await notificationRef.set(removeUndefinedProps(notification))
-
-  // maybe TODO: send email notification to comment creator
+}
+
+export const createBadgeAwardedNotification = async (
+  user: User,
+  badge: Badge
+) => {
+  const privateUser = await getPrivateUser(user.id)
+  if (!privateUser) return
+  const { sendToBrowser } = getNotificationDestinationsForUser(
+    privateUser,
+    'badges_awarded'
+  )
+  if (!sendToBrowser) return
+
+  const notificationRef = firestore
+    .collection(`/users/${user.id}/notifications`)
+    .doc()
+  const notification: Notification = {
+    id: notificationRef.id,
+    userId: user.id,
+    reason: 'badges_awarded',
+    createdTime: Date.now(),
+    isSeen: false,
+    sourceId: badge.type,
+    sourceType: 'badge',
+    sourceUpdateType: 'created',
+    sourceUserName: MANIFOLD_USER_NAME,
+    sourceUserUsername: MANIFOLD_USER_USERNAME,
+    sourceUserAvatarUrl: MANIFOLD_AVATAR_URL,
+    sourceText: `You earned a new ${badge.name} badge!`,
+    sourceSlug: `/${user.username}?show=badges&badge=${badge.type}`,
+    sourceTitle: badge.name,
+    data: {
+      badge,
+    },
+  }
+  return await notificationRef.set(removeUndefinedProps(notification))
+
+  // TODO send email notification
+}
+
+export const createMarketClosedNotification = async (
+  contract: Contract,
+  creator: User,
+  privateUser: PrivateUser,
+  idempotencyKey: string
+) => {
+  const notificationRef = firestore
+    .collection(`/users/${creator.id}/notifications`)
+    .doc(idempotencyKey)
+  const notification: Notification = {
+    id: idempotencyKey,
+    userId: creator.id,
+    reason: 'your_contract_closed',
+    createdTime: Date.now(),
+    isSeen: false,
+    sourceId: contract.id,
+    sourceType: 'contract',
+    sourceUpdateType: 'closed',
+    sourceContractId: contract?.id,
+    sourceUserName: creator.name,
+    sourceUserUsername: creator.username,
+    sourceUserAvatarUrl: creator.avatarUrl,
+    sourceText: contract.closeTime?.toString() ?? new Date().toString(),
+    sourceContractCreatorUsername: creator.username,
+    sourceContractTitle: contract.question,
+    sourceContractSlug: contract.slug,
+    sourceSlug: contract.slug,
+    sourceTitle: contract.question,
+  }
+  await notificationRef.set(removeUndefinedProps(notification))
+  await sendMarketCloseEmail(
+    'your_contract_closed',
+    creator,
+    privateUser,
+    contract
+  )
 }
diff --git a/functions/src/create-post.ts b/functions/src/create-post.ts
index e9d6ae8f..d1864ac2 100644
--- a/functions/src/create-post.ts
+++ b/functions/src/create-post.ts
@@ -3,7 +3,11 @@ import * as admin from 'firebase-admin'
 import { getUser } from './utils'
 import { slugify } from '../../common/util/slugify'
 import { randomString } from '../../common/util/random'
-import { Post, MAX_POST_TITLE_LENGTH } from '../../common/post'
+import {
+  Post,
+  MAX_POST_TITLE_LENGTH,
+  MAX_POST_SUBTITLE_LENGTH,
+} from '../../common/post'
 import { APIError, newEndpoint, validate } from './api'
 import { JSONContent } from '@tiptap/core'
 import { z } from 'zod'
@@ -36,6 +40,7 @@ const contentSchema: z.ZodType<JSONContent> = z.lazy(() =>
 
 const postSchema = z.object({
   title: z.string().min(1).max(MAX_POST_TITLE_LENGTH),
+  subtitle: z.string().min(1).max(MAX_POST_SUBTITLE_LENGTH),
   content: contentSchema,
   groupId: z.string().optional(),
 
@@ -48,10 +53,8 @@ const postSchema = z.object({
 
 export const createpost = newEndpoint({}, async (req, auth) => {
   const firestore = admin.firestore()
-  const { title, content, groupId, question, ...otherProps } = validate(
-    postSchema,
-    req.body
-  )
+  const { title, subtitle, content, groupId, question, ...otherProps } =
+    validate(postSchema, req.body)
 
   const creator = await getUser(auth.uid)
   if (!creator)
@@ -68,19 +71,23 @@ export const createpost = newEndpoint({}, async (req, auth) => {
   if (question) {
     const closeTime = Date.now() + DAY_MS * 30 * 3
 
-    const result = await createMarketHelper(
-      {
-        question,
-        closeTime,
-        outcomeType: 'BINARY',
-        visibility: 'unlisted',
-        initialProb: 50,
-        // Dating group!
-        groupId: 'j3ZE8fkeqiKmRGumy3O1',
-      },
-      auth
-    )
-    contractSlug = result.slug
+    try {
+      const result = await createMarketHelper(
+        {
+          question,
+          closeTime,
+          outcomeType: 'BINARY',
+          visibility: 'unlisted',
+          initialProb: 50,
+          // Dating group!
+          groupId: 'j3ZE8fkeqiKmRGumy3O1',
+        },
+        auth
+      )
+      contractSlug = result.slug
+    } catch (e) {
+      console.error(e)
+    }
   }
 
   const post: Post = removeUndefinedProps({
@@ -89,6 +96,7 @@ export const createpost = newEndpoint({}, async (req, auth) => {
     creatorId: creator.id,
     slug,
     title,
+    subtitle,
     createdTime: Date.now(),
     content: content,
     contractSlug,
diff --git a/functions/src/create-user.ts b/functions/src/create-user.ts
index ab70b4e6..d22b8a2e 100644
--- a/functions/src/create-user.ts
+++ b/functions/src/create-user.ts
@@ -69,6 +69,8 @@ export const createuser = newEndpoint(opts, async (req, auth) => {
     followerCountCached: 0,
     followedCategories: DEFAULT_CATEGORIES,
     shouldShowWelcome: true,
+    fractionResolvedCorrectly: 1,
+    achievements: {},
   }
 
   await firestore.collection('users').doc(auth.uid).create(user)
diff --git a/functions/src/drizzle-liquidity.ts b/functions/src/drizzle-liquidity.ts
new file mode 100644
index 00000000..7757dee0
--- /dev/null
+++ b/functions/src/drizzle-liquidity.ts
@@ -0,0 +1,69 @@
+import * as functions from 'firebase-functions'
+import * as admin from 'firebase-admin'
+
+import { CPMMContract } from '../../common/contract'
+import { batchedWaitAll } from '../../common/util/promise'
+import { APIError } from '../../common/api'
+import { addCpmmLiquidity } from '../../common/calculate-cpmm'
+import { formatMoneyWithDecimals } from '../../common/util/format'
+
+const firestore = admin.firestore()
+
+export const drizzleLiquidity = async () => {
+  const snap = await firestore
+    .collection('contracts')
+    .where('subsidyPool', '>', 1e-7)
+    .get()
+
+  const contractIds = snap.docs.map((doc) => doc.id)
+  console.log('found', contractIds.length, 'markets to drizzle')
+  console.log()
+
+  await batchedWaitAll(
+    contractIds.map((cid) => () => drizzleMarket(cid)),
+    10
+  )
+}
+
+export const drizzleLiquidityScheduler = functions.pubsub
+  .schedule('* * * * *') // every minute
+  .onRun(drizzleLiquidity)
+
+const drizzleMarket = async (contractId: string) => {
+  await firestore.runTransaction(async (trans) => {
+    const snap = await trans.get(firestore.doc(`contracts/${contractId}`))
+    const contract = snap.data() as CPMMContract
+    const { subsidyPool, pool, p, slug, popularityScore } = contract
+    if ((subsidyPool ?? 0) < 1e-7) return
+
+    const r = Math.random()
+    const logPopularity = Math.log10((popularityScore ?? 0) + 1)
+    const v = Math.max(1, Math.min(5, logPopularity))
+    const amount = subsidyPool <= 0.5 ? subsidyPool : r * v * 0.01 * subsidyPool
+
+    const { newPool, newP } = addCpmmLiquidity(pool, p, amount)
+
+    if (!isFinite(newP)) {
+      throw new APIError(
+        500,
+        'Liquidity injection rejected due to overflow error.'
+      )
+    }
+
+    await trans.update(firestore.doc(`contracts/${contract.id}`), {
+      pool: newPool,
+      p: newP,
+      subsidyPool: subsidyPool - amount,
+    })
+
+    console.log(
+      'added subsidy',
+      formatMoneyWithDecimals(amount),
+      'of',
+      formatMoneyWithDecimals(subsidyPool),
+      'pool to',
+      slug
+    )
+    console.log()
+  })
+}
diff --git a/functions/src/email-templates/market-close.html b/functions/src/email-templates/market-close.html
index 4abd225e..b742c533 100644
--- a/functions/src/email-templates/market-close.html
+++ b/functions/src/email-templates/market-close.html
@@ -483,11 +483,7 @@
                         color: #999;
                         text-decoration: underline;
                         margin: 0;
-                      ">our Discord</a>! Or,
-                  <a href="{{unsubscribeUrl}}" style="
-                                          color: inherit;
-                                          text-decoration: none;
-                                        " target="_blank">click here to unsubscribe from this type of notification</a>.
+                      ">our Discord</a>!
                 </td>
               </tr>
             </table>
diff --git a/functions/src/emails.ts b/functions/src/emails.ts
index 993fac81..1b111a9b 100644
--- a/functions/src/emails.ts
+++ b/functions/src/emails.ts
@@ -12,7 +12,7 @@ import { getValueFromBucket } from '../../common/calculate-dpm'
 import { formatNumericProbability } from '../../common/pseudo-numeric'
 
 import { sendTemplateEmail, sendTextEmail } from './send-email'
-import { contractUrl, getUser } from './utils'
+import { contractUrl, getUser, log } from './utils'
 import { buildCardUrl, getOpenGraphProps } from '../../common/contract-details'
 import { notification_reason_types } from '../../common/notification'
 import { Dictionary } from 'lodash'
@@ -212,20 +212,16 @@ export const sendOneWeekBonusEmail = async (
   user: User,
   privateUser: PrivateUser
 ) => {
-  if (
-    !privateUser ||
-    !privateUser.email ||
-    !privateUser.notificationPreferences.onboarding_flow.includes('email')
-  )
-    return
+  if (!privateUser || !privateUser.email) return
 
   const { name } = user
   const firstName = name.split(' ')[0]
 
-  const { unsubscribeUrl } = getNotificationDestinationsForUser(
+  const { unsubscribeUrl, sendToEmail } = getNotificationDestinationsForUser(
     privateUser,
     'onboarding_flow'
   )
+  if (!sendToEmail) return
 
   return await sendTemplateEmail(
     privateUser.email,
@@ -247,19 +243,15 @@ export const sendCreatorGuideEmail = async (
   privateUser: PrivateUser,
   sendTime: string
 ) => {
-  if (
-    !privateUser ||
-    !privateUser.email ||
-    !privateUser.notificationPreferences.onboarding_flow.includes('email')
-  )
-    return
+  if (!privateUser || !privateUser.email) return
 
   const { name } = user
   const firstName = name.split(' ')[0]
-  const { unsubscribeUrl } = getNotificationDestinationsForUser(
+  const { unsubscribeUrl, sendToEmail } = getNotificationDestinationsForUser(
     privateUser,
     'onboarding_flow'
   )
+  if (!sendToEmail) return
   return await sendTemplateEmail(
     privateUser.email,
     'Create your own prediction market',
@@ -279,22 +271,16 @@ export const sendThankYouEmail = async (
   user: User,
   privateUser: PrivateUser
 ) => {
-  if (
-    !privateUser ||
-    !privateUser.email ||
-    !privateUser.notificationPreferences.thank_you_for_purchases.includes(
-      'email'
-    )
-  )
-    return
+  if (!privateUser || !privateUser.email) return
 
   const { name } = user
   const firstName = name.split(' ')[0]
-  const { unsubscribeUrl } = getNotificationDestinationsForUser(
+  const { unsubscribeUrl, sendToEmail } = getNotificationDestinationsForUser(
     privateUser,
     'thank_you_for_purchases'
   )
 
+  if (!sendToEmail) return
   return await sendTemplateEmail(
     privateUser.email,
     'Thanks for your Manifold purchase',
@@ -315,12 +301,7 @@ export const sendMarketCloseEmail = async (
   privateUser: PrivateUser,
   contract: Contract
 ) => {
-  const { sendToEmail, unsubscribeUrl } = getNotificationDestinationsForUser(
-    privateUser,
-    reason
-  )
-
-  if (!privateUser.email || !sendToEmail) return
+  if (!privateUser.email) return
 
   const { username, name, id: userId } = user
   const firstName = name.split(' ')[0]
@@ -329,6 +310,7 @@ export const sendMarketCloseEmail = async (
 
   const url = `https://${DOMAIN}/${username}/${slug}`
 
+  // We ignore if they were able to unsubscribe from market close emails, this is a necessary email
   return await sendTemplateEmail(
     privateUser.email,
     'Your market has closed',
@@ -336,7 +318,7 @@ export const sendMarketCloseEmail = async (
     {
       question,
       url,
-      unsubscribeUrl,
+      unsubscribeUrl: '',
       userId,
       name: firstName,
       volume: formatMoney(volume),
@@ -466,17 +448,13 @@ export const sendInterestingMarketsEmail = async (
   contractsToSend: Contract[],
   deliveryTime?: string
 ) => {
-  if (
-    !privateUser ||
-    !privateUser.email ||
-    !privateUser.notificationPreferences.trending_markets.includes('email')
-  )
-    return
+  if (!privateUser || !privateUser.email) return
 
-  const { unsubscribeUrl } = getNotificationDestinationsForUser(
+  const { unsubscribeUrl, sendToEmail } = getNotificationDestinationsForUser(
     privateUser,
     'trending_markets'
   )
+  if (!sendToEmail) return
 
   const { name } = user
   const firstName = name.split(' ')[0]
@@ -620,18 +598,15 @@ export const sendWeeklyPortfolioUpdateEmail = async (
   investments: PerContractInvestmentsData[],
   overallPerformance: OverallPerformanceData
 ) => {
-  if (
-    !privateUser ||
-    !privateUser.email ||
-    !privateUser.notificationPreferences.profit_loss_updates.includes('email')
-  )
-    return
+  if (!privateUser || !privateUser.email) return
 
-  const { unsubscribeUrl } = getNotificationDestinationsForUser(
+  const { unsubscribeUrl, sendToEmail } = getNotificationDestinationsForUser(
     privateUser,
     'profit_loss_updates'
   )
 
+  if (!sendToEmail) return
+
   const { name } = user
   const firstName = name.split(' ')[0]
   const templateData: Record<string, string> = {
@@ -656,4 +631,5 @@ export const sendWeeklyPortfolioUpdateEmail = async (
       : 'portfolio-update',
     templateData
   )
+  log('Sent portfolio update email to', privateUser.email)
 }
diff --git a/functions/src/helpers/add-house-subsidy.ts b/functions/src/helpers/add-house-subsidy.ts
new file mode 100644
index 00000000..afba8bcf
--- /dev/null
+++ b/functions/src/helpers/add-house-subsidy.ts
@@ -0,0 +1,42 @@
+import * as admin from 'firebase-admin'
+
+import { CPMMContract } from '../../../common/contract'
+import { isProd } from '../utils'
+import {
+  DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
+  HOUSE_LIQUIDITY_PROVIDER_ID,
+} from '../../../common/antes'
+import { getNewLiquidityProvision } from '../../../common/add-liquidity'
+
+const firestore = admin.firestore()
+
+export const addHouseSubsidy = (contractId: string, amount: number) => {
+  return firestore.runTransaction(async (transaction) => {
+    const newLiquidityProvisionDoc = firestore
+      .collection(`contracts/${contractId}/liquidity`)
+      .doc()
+
+    const providerId = isProd()
+      ? HOUSE_LIQUIDITY_PROVIDER_ID
+      : DEV_HOUSE_LIQUIDITY_PROVIDER_ID
+
+    const contractDoc = firestore.doc(`contracts/${contractId}`)
+    const snap = await contractDoc.get()
+    const contract = snap.data() as CPMMContract
+
+    const { newLiquidityProvision, newTotalLiquidity, newSubsidyPool } =
+      getNewLiquidityProvision(
+        providerId,
+        amount,
+        contract,
+        newLiquidityProvisionDoc.id
+      )
+
+    transaction.update(contractDoc, {
+      subsidyPool: newSubsidyPool,
+      totalLiquidity: newTotalLiquidity,
+    } as Partial<CPMMContract>)
+
+    transaction.create(newLiquidityProvisionDoc, newLiquidityProvision)
+  })
+}
diff --git a/functions/src/index.ts b/functions/src/index.ts
index f5c45004..b64155a3 100644
--- a/functions/src/index.ts
+++ b/functions/src/index.ts
@@ -9,7 +9,7 @@ export * from './on-create-user'
 export * from './on-create-bet'
 export * from './on-create-comment-on-contract'
 export * from './on-view'
-export * from './update-metrics'
+export { scheduleUpdateMetrics } from './update-metrics'
 export * from './update-stats'
 export * from './update-loans'
 export * from './backup-db'
@@ -31,6 +31,7 @@ export * from './reset-weekly-emails-flags'
 export * from './on-update-contract-follow'
 export * from './on-update-like'
 export * from './weekly-portfolio-emails'
+export * from './drizzle-liquidity'
 
 // v2
 export * from './health'
@@ -44,8 +45,6 @@ export * from './sell-bet'
 export * from './sell-shares'
 export * from './claim-manalink'
 export * from './create-market'
-export * from './add-liquidity'
-export * from './withdraw-liquidity'
 export * from './create-group'
 export * from './resolve-market'
 export * from './unsubscribe'
@@ -53,6 +52,7 @@ export * from './stripe'
 export * from './mana-bonus-email'
 export * from './close-market'
 export * from './update-comment-bounty'
+export * from './add-subsidy'
 
 import { health } from './health'
 import { transact } from './transact'
@@ -65,9 +65,7 @@ import { sellbet } from './sell-bet'
 import { sellshares } from './sell-shares'
 import { claimmanalink } from './claim-manalink'
 import { createmarket } from './create-market'
-import { addliquidity } from './add-liquidity'
 import { addcommentbounty, awardcommentbounty } from './update-comment-bounty'
-import { withdrawliquidity } from './withdraw-liquidity'
 import { creategroup } from './create-group'
 import { resolvemarket } from './resolve-market'
 import { closemarket } from './close-market'
@@ -77,6 +75,8 @@ import { getcurrentuser } from './get-current-user'
 import { acceptchallenge } from './accept-challenge'
 import { createpost } from './create-post'
 import { savetwitchcredentials } from './save-twitch-credentials'
+import { updatemetrics } from './update-metrics'
+import { addsubsidy } from './add-subsidy'
 
 const toCloudFunction = ({ opts, handler }: EndpointDefinition) => {
   return onRequest(opts, handler as any)
@@ -92,10 +92,9 @@ const sellBetFunction = toCloudFunction(sellbet)
 const sellSharesFunction = toCloudFunction(sellshares)
 const claimManalinkFunction = toCloudFunction(claimmanalink)
 const createMarketFunction = toCloudFunction(createmarket)
-const addLiquidityFunction = toCloudFunction(addliquidity)
+const addSubsidyFunction = toCloudFunction(addsubsidy)
 const addCommentBounty = toCloudFunction(addcommentbounty)
 const awardCommentBounty = toCloudFunction(awardcommentbounty)
-const withdrawLiquidityFunction = toCloudFunction(withdrawliquidity)
 const createGroupFunction = toCloudFunction(creategroup)
 const resolveMarketFunction = toCloudFunction(resolvemarket)
 const closeMarketFunction = toCloudFunction(closemarket)
@@ -106,6 +105,7 @@ const getCurrentUserFunction = toCloudFunction(getcurrentuser)
 const acceptChallenge = toCloudFunction(acceptchallenge)
 const createPostFunction = toCloudFunction(createpost)
 const saveTwitchCredentials = toCloudFunction(savetwitchcredentials)
+const updateMetricsFunction = toCloudFunction(updatemetrics)
 
 export {
   healthFunction as health,
@@ -119,8 +119,7 @@ export {
   sellSharesFunction as sellshares,
   claimManalinkFunction as claimmanalink,
   createMarketFunction as createmarket,
-  addLiquidityFunction as addliquidity,
-  withdrawLiquidityFunction as withdrawliquidity,
+  addSubsidyFunction as addsubsidy,
   createGroupFunction as creategroup,
   resolveMarketFunction as resolvemarket,
   closeMarketFunction as closemarket,
@@ -133,4 +132,5 @@ export {
   saveTwitchCredentials as savetwitchcredentials,
   addCommentBounty as addcommentbounty,
   awardCommentBounty as awardcommentbounty,
+  updateMetricsFunction as updatemetrics,
 }
diff --git a/functions/src/market-close-notifications.ts b/functions/src/market-close-notifications.ts
index 21b52fbc..4647a837 100644
--- a/functions/src/market-close-notifications.ts
+++ b/functions/src/market-close-notifications.ts
@@ -3,8 +3,10 @@ import * as admin from 'firebase-admin'
 
 import { Contract } from '../../common/contract'
 import { getPrivateUser, getUserByUsername } from './utils'
-import { createNotification } from './create-notification'
+import { createMarketClosedNotification } from './create-notification'
+import { DAY_MS } from '../../common/util/time'
 
+const SEND_NOTIFICATIONS_EVERY_DAYS = 5
 export const marketCloseNotifications = functions
   .runWith({ secrets: ['MAILGUN_KEY'] })
   .pubsub.schedule('every 1 hours')
@@ -14,31 +16,31 @@ export const marketCloseNotifications = functions
 
 const firestore = admin.firestore()
 
-async function sendMarketCloseEmails() {
+export async function sendMarketCloseEmails() {
   const contracts = await firestore.runTransaction(async (transaction) => {
     const snap = await transaction.get(
       firestore.collection('contracts').where('isResolved', '!=', true)
     )
+    const contracts = snap.docs.map((doc) => doc.data() as Contract)
+    const now = Date.now()
+    const closeContracts = contracts.filter(
+      (contract) =>
+        contract.closeTime &&
+        contract.closeTime < now &&
+        shouldSendFirstOrFollowUpCloseNotification(contract)
+    )
 
-    return snap.docs
-      .map((doc) => {
-        const contract = doc.data() as Contract
-
-        if (
-          contract.resolution ||
-          (contract.closeEmailsSent ?? 0) >= 1 ||
-          contract.closeTime === undefined ||
-          (contract.closeTime ?? 0) > Date.now()
+    await Promise.all(
+      closeContracts.map(async (contract) => {
+        await transaction.update(
+          firestore.collection('contracts').doc(contract.id),
+          {
+            closeEmailsSent: admin.firestore.FieldValue.increment(1),
+          }
         )
-          return undefined
-
-        transaction.update(doc.ref, {
-          closeEmailsSent: (contract.closeEmailsSent ?? 0) + 1,
-        })
-
-        return contract
       })
-      .filter((x) => !!x) as Contract[]
+    )
+    return closeContracts
   })
 
   for (const contract of contracts) {
@@ -55,14 +57,40 @@ async function sendMarketCloseEmails() {
     const privateUser = await getPrivateUser(user.id)
     if (!privateUser) continue
 
-    await createNotification(
-      contract.id,
-      'contract',
-      'closed',
+    await createMarketClosedNotification(
+      contract,
       user,
-      contract.id + '-closed-at-' + contract.closeTime,
-      contract.closeTime?.toString() ?? new Date().toString(),
-      { contract }
+      privateUser,
+      contract.id + '-closed-at-' + contract.closeTime
     )
   }
 }
+
+// The downside of this approach is if this function goes down for the entire
+// day of a multiple of the time period after the market has closed, it won't
+// keep sending them notifications bc when it comes back online the time period will have passed
+function shouldSendFirstOrFollowUpCloseNotification(contract: Contract) {
+  if (!contract.closeEmailsSent || contract.closeEmailsSent === 0) return true
+  const { closedMultipleOfNDaysAgo, fullTimePeriodsSinceClose } =
+    marketClosedMultipleOfNDaysAgo(contract)
+  return (
+    contract.closeEmailsSent > 0 &&
+    closedMultipleOfNDaysAgo &&
+    contract.closeEmailsSent === fullTimePeriodsSinceClose
+  )
+}
+
+function marketClosedMultipleOfNDaysAgo(contract: Contract) {
+  const now = Date.now()
+  const closeTime = contract.closeTime
+  if (!closeTime)
+    return { closedMultipleOfNDaysAgo: false, fullTimePeriodsSinceClose: 0 }
+  const daysSinceClose = Math.floor((now - closeTime) / DAY_MS)
+  return {
+    closedMultipleOfNDaysAgo:
+      daysSinceClose % SEND_NOTIFICATIONS_EVERY_DAYS == 0,
+    fullTimePeriodsSinceClose: Math.floor(
+      daysSinceClose / SEND_NOTIFICATIONS_EVERY_DAYS
+    ),
+  }
+}
diff --git a/functions/src/on-create-bet.ts b/functions/src/on-create-bet.ts
index b2451c62..0881abe5 100644
--- a/functions/src/on-create-bet.ts
+++ b/functions/src/on-create-bet.ts
@@ -12,6 +12,7 @@ import {
   revalidateStaticProps,
 } from './utils'
 import {
+  createBadgeAwardedNotification,
   createBetFillNotification,
   createBettingStreakBonusNotification,
   createUniqueBettorBonusNotification,
@@ -24,6 +25,7 @@ import {
   BETTING_STREAK_BONUS_MAX,
   BETTING_STREAK_RESET_HOUR,
   UNIQUE_BETTOR_BONUS_AMOUNT,
+  UNIQUE_BETTOR_LIQUIDITY,
 } from '../../common/economy'
 import {
   DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
@@ -33,6 +35,11 @@ import { APIError } from '../../common/api'
 import { User } from '../../common/user'
 import { DAY_MS } from '../../common/util/time'
 import { BettingStreakBonusTxn, UniqueBettorBonusTxn } from '../../common/txn'
+import { addHouseSubsidy } from './helpers/add-house-subsidy'
+import {
+  StreakerBadge,
+  streakerBadgeRarityThresholds,
+} from '../../common/badge'
 
 const firestore = admin.firestore()
 const BONUS_START_DATE = new Date('2022-07-13T15:30:00.000Z').getTime()
@@ -103,7 +110,7 @@ const updateBettingStreak = async (
 
     const newBettingStreak = (bettor?.currentBettingStreak ?? 0) + 1
     // Otherwise, add 1 to their betting streak
-    await trans.update(userDoc, {
+    trans.update(userDoc, {
       currentBettingStreak: newBettingStreak,
       lastBetTime: bet.createdTime,
     })
@@ -143,7 +150,7 @@ const updateBettingStreak = async (
     log('message:', result.message)
     return
   }
-  if (result.txn)
+  if (result.txn) {
     await createBettingStreakBonusNotification(
       user,
       result.txn.id,
@@ -153,6 +160,8 @@ const updateBettingStreak = async (
       newBettingStreak,
       eventId
     )
+    await handleBettingStreakBadgeAward(user, newBettingStreak)
+  }
 }
 
 const updateUniqueBettorsAndGiveCreatorBonus = async (
@@ -191,7 +200,7 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
         log(`Got ${previousUniqueBettorIds} unique bettors`)
         isNewUniqueBettor && log(`And a new unique bettor ${bettor.id}`)
 
-        await trans.update(contractDoc, {
+        trans.update(contractDoc, {
           uniqueBettorIds: newUniqueBettorIds,
           uniqueBettorCount: newUniqueBettorIds.length,
         })
@@ -204,8 +213,13 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
       return { newUniqueBettorIds }
     }
   )
+
   if (!newUniqueBettorIds) return
 
+  if (oldContract.mechanism === 'cpmm-1') {
+    await addHouseSubsidy(oldContract.id, UNIQUE_BETTOR_LIQUIDITY)
+  }
+
   const bonusTxnDetails = {
     contractId: oldContract.id,
     uniqueNewBettorId: bettor.id,
@@ -215,7 +229,9 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
     : DEV_HOUSE_LIQUIDITY_PROVIDER_ID
   const fromSnap = await firestore.doc(`users/${fromUserId}`).get()
   if (!fromSnap.exists) throw new APIError(400, 'From user not found.')
+
   const fromUser = fromSnap.data() as User
+
   const result = await firestore.runTransaction(async (trans) => {
     const bonusTxn: TxnData = {
       fromId: fromUser.id,
@@ -228,7 +244,9 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
       description: JSON.stringify(bonusTxnDetails),
       data: bonusTxnDetails,
     } as Omit<UniqueBettorBonusTxn, 'id' | 'createdTime'>
+
     const { status, message, txn } = await runTxn(trans, bonusTxn)
+
     return { status, newUniqueBettorIds, message, txn }
   })
 
@@ -296,3 +314,39 @@ const notifyFills = async (
 const currentDateBettingStreakResetTime = () => {
   return new Date().setUTCHours(BETTING_STREAK_RESET_HOUR, 0, 0, 0)
 }
+
+async function handleBettingStreakBadgeAward(
+  user: User,
+  newBettingStreak: number
+) {
+  const alreadyHasBadgeForFirstStreak =
+    user.achievements?.streaker?.badges.some(
+      (badge) => badge.data.totalBettingStreak === 1
+    )
+  // TODO: check if already awarded 50th streak as well
+  if (newBettingStreak === 1 && alreadyHasBadgeForFirstStreak) return
+
+  if (streakerBadgeRarityThresholds.includes(newBettingStreak)) {
+    const badge = {
+      type: 'STREAKER',
+      name: 'Streaker',
+      data: {
+        totalBettingStreak: newBettingStreak,
+      },
+      createdTime: Date.now(),
+    } as StreakerBadge
+    // update user
+    await firestore
+      .collection('users')
+      .doc(user.id)
+      .update({
+        achievements: {
+          ...user.achievements,
+          streaker: {
+            badges: [...(user.achievements?.streaker?.badges ?? []), badge],
+          },
+        },
+      })
+    await createBadgeAwardedNotification(user, badge)
+  }
+}
diff --git a/functions/src/on-create-contract.ts b/functions/src/on-create-contract.ts
index b613142b..43a66719 100644
--- a/functions/src/on-create-contract.ts
+++ b/functions/src/on-create-contract.ts
@@ -1,11 +1,20 @@
 import * as functions from 'firebase-functions'
 
-import { getUser } from './utils'
-import { createNewContractNotification } from './create-notification'
+import { getUser, getValues } from './utils'
+import {
+  createBadgeAwardedNotification,
+  createNewContractNotification,
+} from './create-notification'
 import { Contract } from '../../common/contract'
 import { parseMentions, richTextToString } from '../../common/util/parse'
 import { JSONContent } from '@tiptap/core'
 import { addUserToContractFollowers } from './follow-market'
+import { User } from '../../common/user'
+import * as admin from 'firebase-admin'
+import {
+  MarketCreatorBadge,
+  marketCreatorBadgeRarityThresholds,
+} from '../../common/badge'
 
 export const onCreateContract = functions
   .runWith({ secrets: ['MAILGUN_KEY'] })
@@ -28,4 +37,43 @@ export const onCreateContract = functions
       richTextToString(desc),
       mentioned
     )
+    await handleMarketCreatorBadgeAward(contractCreator)
   })
+
+const firestore = admin.firestore()
+
+async function handleMarketCreatorBadgeAward(contractCreator: User) {
+  // get all contracts by user and calculate size of array
+  const contracts = await getValues<Contract>(
+    firestore
+      .collection(`contracts`)
+      .where('creatorId', '==', contractCreator.id)
+      .where('resolution', '!=', 'CANCEL')
+  )
+  if (marketCreatorBadgeRarityThresholds.includes(contracts.length)) {
+    const badge = {
+      type: 'MARKET_CREATOR',
+      name: 'Market Creator',
+      data: {
+        totalContractsCreated: contracts.length,
+      },
+      createdTime: Date.now(),
+    } as MarketCreatorBadge
+    // update user
+    await firestore
+      .collection('users')
+      .doc(contractCreator.id)
+      .update({
+        achievements: {
+          ...contractCreator.achievements,
+          marketCreator: {
+            badges: [
+              ...(contractCreator.achievements?.marketCreator?.badges ?? []),
+              badge,
+            ],
+          },
+        },
+      })
+    await createBadgeAwardedNotification(contractCreator, badge)
+  }
+}
diff --git a/functions/src/on-create-liquidity-provision.ts b/functions/src/on-create-liquidity-provision.ts
index 54da7fd9..53f61eaa 100644
--- a/functions/src/on-create-liquidity-provision.ts
+++ b/functions/src/on-create-liquidity-provision.ts
@@ -1,6 +1,6 @@
 import * as functions from 'firebase-functions'
 import { getContract, getUser, log } from './utils'
-import { createNotification } from './create-notification'
+import { createFollowOrMarketSubsidizedNotification } from './create-notification'
 import { LiquidityProvision } from '../../common/liquidity-provision'
 import { addUserToContractFollowers } from './follow-market'
 import { FIXED_ANTE } from '../../common/economy'
@@ -36,7 +36,7 @@ export const onCreateLiquidityProvision = functions.firestore
     if (!liquidityProvider) throw new Error('Could not find liquidity provider')
     await addUserToContractFollowers(contract.id, liquidityProvider.id)
 
-    await createNotification(
+    await createFollowOrMarketSubsidizedNotification(
       contract.id,
       'liquidity',
       'created',
diff --git a/functions/src/on-follow-user.ts b/functions/src/on-follow-user.ts
index 52042345..2f601f6d 100644
--- a/functions/src/on-follow-user.ts
+++ b/functions/src/on-follow-user.ts
@@ -2,7 +2,7 @@ import * as functions from 'firebase-functions'
 import * as admin from 'firebase-admin'
 
 import { getUser } from './utils'
-import { createNotification } from './create-notification'
+import { createFollowOrMarketSubsidizedNotification } from './create-notification'
 import { FieldValue } from 'firebase-admin/firestore'
 
 export const onFollowUser = functions.firestore
@@ -23,7 +23,7 @@ export const onFollowUser = functions.firestore
       followerCountCached: FieldValue.increment(1),
     })
 
-    await createNotification(
+    await createFollowOrMarketSubsidizedNotification(
       followingUser.id,
       'follow',
       'created',
diff --git a/functions/src/on-update-contract.ts b/functions/src/on-update-contract.ts
index d667f0d2..f0aa0252 100644
--- a/functions/src/on-update-contract.ts
+++ b/functions/src/on-update-contract.ts
@@ -1,11 +1,19 @@
 import * as functions from 'firebase-functions'
-import { getUser, getValues, log } from './utils'
-import { createCommentOrAnswerOrUpdatedContractNotification } from './create-notification'
+import { getUser, getValues } from './utils'
+import {
+  createBadgeAwardedNotification,
+  createCommentOrAnswerOrUpdatedContractNotification,
+} from './create-notification'
 import { Contract } from '../../common/contract'
-import { Txn } from '../../common/txn'
-import { partition, sortBy } from 'lodash'
-import { runTxn, TxnData } from './transact'
+import { Bet } from '../../common/bet'
 import * as admin from 'firebase-admin'
+import { ContractComment } from '../../common/comment'
+import { scoreCommentorsAndBettors } from '../../common/scoring'
+import {
+  MINIMUM_UNIQUE_BETTORS_FOR_PROVEN_CORRECT_BADGE,
+  ProvenCorrectBadge,
+} from '../../common/badge'
+import { GroupContractDoc } from '../../common/group'
 
 export const onUpdateContract = functions.firestore
   .document('contracts/{contractId}')
@@ -13,18 +21,14 @@ export const onUpdateContract = functions.firestore
     const contract = change.after.data() as Contract
     const previousContract = change.before.data() as Contract
     const { eventId } = context
-    const { openCommentBounties, closeTime, question } = contract
+    const { closeTime, question } = contract
 
-    if (
-      !previousContract.isResolved &&
-      contract.isResolved &&
-      (openCommentBounties ?? 0) > 0
-    ) {
-      await handleUnusedCommentBountyRefunds(contract)
+    if (!previousContract.isResolved && contract.isResolved) {
       // No need to notify users of resolution, that's handled in resolve-market
-      return
-    }
-    if (
+      return await handleResolvedContract(contract)
+    } else if (previousContract.groupSlugs !== contract.groupSlugs) {
+      await handleContractGroupUpdated(previousContract, contract)
+    } else if (
       previousContract.closeTime !== closeTime ||
       previousContract.question !== question
     ) {
@@ -32,6 +36,63 @@ export const onUpdateContract = functions.firestore
     }
   })
 
+async function handleResolvedContract(contract: Contract) {
+  if (
+    (contract.uniqueBettorCount ?? 0) <
+    MINIMUM_UNIQUE_BETTORS_FOR_PROVEN_CORRECT_BADGE
+  )
+    return
+
+  // get all bets on this contract
+  const bets = await getValues<Bet>(
+    firestore.collection(`contracts/${contract.id}/bets`)
+  )
+
+  // get comments on this contract
+  const comments = await getValues<ContractComment>(
+    firestore.collection(`contracts/${contract.id}/comments`)
+  )
+
+  const { topCommentId, profitById, commentsById, betsById, topCommentBetId } =
+    scoreCommentorsAndBettors(contract, bets, comments)
+  if (topCommentBetId && profitById[topCommentBetId] > 0) {
+    // award proven correct badge to user
+    const comment = commentsById[topCommentId]
+    const bet = betsById[topCommentBetId]
+
+    const user = await getUser(comment.userId)
+    if (!user) return
+    const newProvenCorrectBadge = {
+      createdTime: Date.now(),
+      type: 'PROVEN_CORRECT',
+      name: 'Proven Correct',
+      data: {
+        contractSlug: contract.slug,
+        contractCreatorUsername: contract.creatorUsername,
+        commentId: comment.id,
+        betAmount: bet.amount,
+        contractTitle: contract.question,
+      },
+    } as ProvenCorrectBadge
+    // update user
+    await firestore
+      .collection('users')
+      .doc(user.id)
+      .update({
+        achievements: {
+          ...user.achievements,
+          provenCorrect: {
+            badges: [
+              ...(user.achievements?.provenCorrect?.badges ?? []),
+              newProvenCorrectBadge,
+            ],
+          },
+        },
+      })
+    await createBadgeAwardedNotification(user, newProvenCorrectBadge)
+  }
+}
+
 async function handleUpdatedCloseTime(
   previousContract: Contract,
   contract: Contract,
@@ -57,62 +118,42 @@ async function handleUpdatedCloseTime(
   )
 }
 
-async function handleUnusedCommentBountyRefunds(contract: Contract) {
-  const outstandingCommentBounties = await getValues<Txn>(
-    firestore.collection('txns').where('category', '==', 'COMMENT_BOUNTY')
-  )
+async function handleContractGroupUpdated(
+  previousContract: Contract,
+  contract: Contract
+) {
+  const prevLength = previousContract.groupSlugs?.length ?? 0
+  const newLength = contract.groupSlugs?.length ?? 0
+  if (prevLength < newLength) {
+    // Contract was added to a new group
+    const groupId = contract.groupLinks?.find(
+      (link) =>
+        !previousContract.groupLinks
+          ?.map((l) => l.groupId)
+          .includes(link.groupId)
+    )?.groupId
+    if (!groupId) throw new Error('Could not find new group id')
 
-  const commentBountiesOnThisContract = sortBy(
-    outstandingCommentBounties.filter(
-      (bounty) => bounty.data?.contractId === contract.id
-    ),
-    (bounty) => bounty.createdTime
-  )
+    await firestore
+      .collection(`groups/${groupId}/groupContracts`)
+      .doc(contract.id)
+      .set({
+        contractId: contract.id,
+        createdTime: Date.now(),
+      } as GroupContractDoc)
+  }
+  if (prevLength > newLength) {
+    // Contract was removed from a group
+    const groupId = previousContract.groupLinks?.find(
+      (link) =>
+        !contract.groupLinks?.map((l) => l.groupId).includes(link.groupId)
+    )?.groupId
+    if (!groupId) throw new Error('Could not find old group id')
 
-  const [toBank, fromBank] = partition(
-    commentBountiesOnThisContract,
-    (bounty) => bounty.toType === 'BANK'
-  )
-  if (toBank.length <= fromBank.length) return
-
-  await firestore
-    .collection('contracts')
-    .doc(contract.id)
-    .update({ openCommentBounties: 0 })
-
-  const refunds = toBank.slice(fromBank.length)
-  await Promise.all(
-    refunds.map(async (extraBountyTxn) => {
-      const result = await firestore.runTransaction(async (trans) => {
-        const bonusTxn: TxnData = {
-          fromId: extraBountyTxn.toId,
-          fromType: 'BANK',
-          toId: extraBountyTxn.fromId,
-          toType: 'USER',
-          amount: extraBountyTxn.amount,
-          token: 'M$',
-          category: 'REFUND_COMMENT_BOUNTY',
-          data: {
-            contractId: contract.id,
-          },
-        }
-        return await runTxn(trans, bonusTxn)
-      })
-
-      if (result.status != 'success' || !result.txn) {
-        log(
-          `Couldn't refund bonus for user: ${extraBountyTxn.fromId} - status:`,
-          result.status
-        )
-        log('message:', result.message)
-      } else {
-        log(
-          `Refund bonus txn for user: ${extraBountyTxn.fromId} completed:`,
-          result.txn?.id
-        )
-      }
-    })
-  )
+    await firestore
+      .collection(`groups/${groupId}/groupContracts`)
+      .doc(contract.id)
+      .delete()
+  }
 }
-
 const firestore = admin.firestore()
diff --git a/functions/src/on-update-user.ts b/functions/src/on-update-user.ts
index b45809d0..66a6884c 100644
--- a/functions/src/on-update-user.ts
+++ b/functions/src/on-update-user.ts
@@ -5,8 +5,6 @@ import { HOUSE_LIQUIDITY_PROVIDER_ID } from '../../common/antes'
 import { createReferralNotification } from './create-notification'
 import { ReferralTxn } from '../../common/txn'
 import { Contract } from '../../common/contract'
-import { LimitBet } from '../../common/bet'
-import { QuerySnapshot } from 'firebase-admin/firestore'
 import { Group } from '../../common/group'
 import { REFERRAL_AMOUNT } from '../../common/economy'
 const firestore = admin.firestore()
@@ -21,10 +19,6 @@ export const onUpdateUser = functions.firestore
     if (prevUser.referredByUserId !== user.referredByUserId) {
       await handleUserUpdatedReferral(user, eventId)
     }
-
-    if (user.balance <= 0) {
-      await cancelLimitOrders(user.id)
-    }
   })
 
 async function handleUserUpdatedReferral(user: User, eventId: string) {
@@ -123,15 +117,3 @@ async function handleUserUpdatedReferral(user: User, eventId: string) {
     )
   })
 }
-
-async function cancelLimitOrders(userId: string) {
-  const snapshot = (await firestore
-    .collectionGroup('bets')
-    .where('userId', '==', userId)
-    .where('isFilled', '==', false)
-    .get()) as QuerySnapshot<LimitBet>
-
-  await Promise.all(
-    snapshot.docs.map((doc) => doc.ref.update({ isCancelled: true }))
-  )
-}
diff --git a/functions/src/place-bet.ts b/functions/src/place-bet.ts
index 74df7dc3..e785565b 100644
--- a/functions/src/place-bet.ts
+++ b/functions/src/place-bet.ts
@@ -11,6 +11,7 @@ import { groupBy, mapValues, sumBy, uniq } from 'lodash'
 import { APIError, newEndpoint, validate } from './api'
 import { Contract, CPMM_MIN_POOL_QTY } from '../../common/contract'
 import { User } from '../../common/user'
+import { FLAT_TRADE_FEE } from '../../common/fees'
 import {
   BetInfo,
   getBinaryCpmmBetInfo,
@@ -23,6 +24,7 @@ import { floatingEqual } from '../../common/util/math'
 import { redeemShares } from './redeem-shares'
 import { log } from './utils'
 import { addUserToContractFollowers } from './follow-market'
+import { filterDefined } from '../../common/util/array'
 
 const bodySchema = z.object({
   contractId: z.string(),
@@ -73,9 +75,11 @@ export const placebet = newEndpoint({}, async (req, auth) => {
       newTotalLiquidity,
       newP,
       makers,
+      ordersToCancel,
     } = await (async (): Promise<
       BetInfo & {
         makers?: maker[]
+        ordersToCancel?: LimitBet[]
       }
     > => {
       if (
@@ -99,17 +103,16 @@ export const placebet = newEndpoint({}, async (req, auth) => {
           limitProb = Math.round(limitProb * 100) / 100
         }
 
-        const unfilledBetsSnap = await trans.get(
-          getUnfilledBetsQuery(contractDoc)
-        )
-        const unfilledBets = unfilledBetsSnap.docs.map((doc) => doc.data())
+        const { unfilledBets, balanceByUserId } =
+          await getUnfilledBetsAndUserBalances(trans, contractDoc)
 
         return getBinaryCpmmBetInfo(
           outcome,
           amount,
           contract,
           limitProb,
-          unfilledBets
+          unfilledBets,
+          balanceByUserId
         )
       } else if (
         (outcomeType == 'FREE_RESPONSE' || outcomeType === 'MULTIPLE_CHOICE') &&
@@ -152,11 +155,25 @@ export const placebet = newEndpoint({}, async (req, auth) => {
     if (makers) {
       updateMakers(makers, betDoc.id, contractDoc, trans)
     }
+    if (ordersToCancel) {
+      for (const bet of ordersToCancel) {
+        trans.update(contractDoc.collection('bets').doc(bet.id), {
+          isCancelled: true,
+        })
+      }
+    }
+
+    const balanceChange =
+      newBet.amount !== 0
+        ? // quick bet
+          newBet.amount + FLAT_TRADE_FEE
+        : // limit order
+          FLAT_TRADE_FEE
+
+    trans.update(userDoc, { balance: FieldValue.increment(-balanceChange) })
+    log('Updated user balance.')
 
     if (newBet.amount !== 0) {
-      trans.update(userDoc, { balance: FieldValue.increment(-newBet.amount) })
-      log('Updated user balance.')
-
       trans.update(
         contractDoc,
         removeUndefinedProps({
@@ -193,13 +210,36 @@ export const placebet = newEndpoint({}, async (req, auth) => {
 
 const firestore = admin.firestore()
 
-export const getUnfilledBetsQuery = (contractDoc: DocumentReference) => {
+const getUnfilledBetsQuery = (contractDoc: DocumentReference) => {
   return contractDoc
     .collection('bets')
     .where('isFilled', '==', false)
     .where('isCancelled', '==', false) as Query<LimitBet>
 }
 
+export const getUnfilledBetsAndUserBalances = async (
+  trans: Transaction,
+  contractDoc: DocumentReference
+) => {
+  const unfilledBetsSnap = await trans.get(getUnfilledBetsQuery(contractDoc))
+  const unfilledBets = unfilledBetsSnap.docs.map((doc) => doc.data())
+
+  // Get balance of all users with open limit orders.
+  const userIds = uniq(unfilledBets.map((bet) => bet.userId))
+  const userDocs =
+    userIds.length === 0
+      ? []
+      : await trans.getAll(
+          ...userIds.map((userId) => firestore.doc(`users/${userId}`))
+        )
+  const users = filterDefined(userDocs.map((doc) => doc.data() as User))
+  const balanceByUserId = Object.fromEntries(
+    users.map((user) => [user.id, user.balance])
+  )
+
+  return { unfilledBets, balanceByUserId }
+}
+
 type maker = {
   bet: LimitBet
   amount: number
diff --git a/functions/src/resolve-market.ts b/functions/src/resolve-market.ts
index ca8f5fc0..4230f0ac 100644
--- a/functions/src/resolve-market.ts
+++ b/functions/src/resolve-market.ts
@@ -9,7 +9,15 @@ import {
   RESOLUTIONS,
 } from '../../common/contract'
 import { Bet } from '../../common/bet'
-import { getContractPath, getUser, getValues, isProd, log, payUser, revalidateStaticProps } from './utils'
+import {
+  getContractPath,
+  getUser,
+  getValues,
+  isProd,
+  log,
+  payUser,
+  revalidateStaticProps,
+} from './utils'
 import {
   getLoanPayouts,
   getPayouts,
@@ -145,6 +153,7 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
       resolutions,
       collectedFees,
     }),
+    subsidyPool: 0,
   }
 
   await contractDoc.update(updatedContract)
diff --git a/functions/src/scripts/add-new-notification-preference.ts b/functions/src/scripts/add-new-notification-preference.ts
new file mode 100644
index 00000000..f72692f7
--- /dev/null
+++ b/functions/src/scripts/add-new-notification-preference.ts
@@ -0,0 +1,30 @@
+import * as admin from 'firebase-admin'
+
+import { initAdmin } from './script-init'
+import { getAllPrivateUsers } from 'functions/src/utils'
+initAdmin()
+
+const firestore = admin.firestore()
+
+async function main() {
+  const privateUsers = await getAllPrivateUsers()
+  await Promise.all(
+    privateUsers.map((privateUser) => {
+      if (!privateUser.id) return Promise.resolve()
+      if (privateUser.notificationPreferences.badges_awarded === undefined) {
+        return firestore
+          .collection('private-users')
+          .doc(privateUser.id)
+          .update({
+            notificationPreferences: {
+              ...privateUser.notificationPreferences,
+              badges_awarded: ['browser'],
+            },
+          })
+      }
+      return
+    })
+  )
+}
+
+if (require.main === module) main().then(() => process.exit())
diff --git a/functions/src/scripts/backfill-badges.ts b/functions/src/scripts/backfill-badges.ts
new file mode 100644
index 00000000..a3776eb0
--- /dev/null
+++ b/functions/src/scripts/backfill-badges.ts
@@ -0,0 +1,129 @@
+import * as admin from 'firebase-admin'
+
+import { initAdmin } from './script-init'
+import { getAllUsers, getValues } from '../utils'
+import { Contract } from 'common/contract'
+import {
+  MarketCreatorBadge,
+  marketCreatorBadgeRarityThresholds,
+  StreakerBadge,
+  streakerBadgeRarityThresholds,
+} from 'common/badge'
+import { User } from 'common/user'
+initAdmin()
+
+const firestore = admin.firestore()
+
+async function main() {
+  const users = await getAllUsers()
+  // const users = filterDefined([await getUser('6hHpzvRG0pMq8PNJs7RZj2qlZGn2')]) // dev ian
+  // const users = filterDefined([await getUser('uglwf3YKOZNGjjEXKc5HampOFRE2')]) // prod David
+  // const users = filterDefined([await getUser('AJwLWoo3xue32XIiAVrL5SyR1WB2')]) // prod ian
+  await Promise.all(
+    users.map(async (user) => {
+      if (!user.id) return
+      // Only backfill users without achievements
+      if (user.achievements === undefined) {
+        await firestore.collection('users').doc(user.id).update({
+          achievements: {},
+        })
+        user.achievements = {}
+        user.achievements = await awardMarketCreatorBadges(user)
+        user.achievements = await awardBettingStreakBadges(user)
+        console.log('Added achievements to user', user.id)
+        // going to ignore backfilling the proven correct badges for now
+      }
+    })
+  )
+}
+
+if (require.main === module) main().then(() => process.exit())
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function removeErrorBadges(user: User) {
+  if (
+    user.achievements.streaker?.badges.some(
+      (b) => b.data.totalBettingStreak > 1
+    )
+  ) {
+    console.log(
+      `User ${
+        user.id
+      } has a streaker badge with streaks ${user.achievements.streaker?.badges.map(
+        (b) => b.data.totalBettingStreak
+      )}`
+    )
+    // delete non 1,50 streaks
+    user.achievements.streaker.badges =
+      user.achievements.streaker.badges.filter((b) =>
+        streakerBadgeRarityThresholds.includes(b.data.totalBettingStreak)
+      )
+    // update user
+    await firestore.collection('users').doc(user.id).update({
+      achievements: user.achievements,
+    })
+  }
+}
+
+async function awardMarketCreatorBadges(user: User) {
+  // Award market maker badges
+  const contracts = await getValues<Contract>(
+    firestore
+      .collection(`contracts`)
+      .where('creatorId', '==', user.id)
+      .where('resolution', '!=', 'CANCEL')
+  )
+
+  const achievements = {
+    ...user.achievements,
+    marketCreator: {
+      badges: [...(user.achievements.marketCreator?.badges ?? [])],
+    },
+  }
+  for (const threshold of marketCreatorBadgeRarityThresholds) {
+    if (contracts.length >= threshold) {
+      const badge = {
+        type: 'MARKET_CREATOR',
+        name: 'Market Creator',
+        data: {
+          totalContractsCreated: threshold,
+        },
+        createdTime: Date.now(),
+      } as MarketCreatorBadge
+      achievements.marketCreator.badges.push(badge)
+    }
+  }
+  // update user
+  await firestore.collection('users').doc(user.id).update({
+    achievements,
+  })
+  return achievements
+}
+
+async function awardBettingStreakBadges(user: User) {
+  const streak = user.currentBettingStreak ?? 0
+  const achievements = {
+    ...user.achievements,
+    streaker: {
+      badges: [...(user.achievements?.streaker?.badges ?? [])],
+    },
+  }
+  for (const threshold of streakerBadgeRarityThresholds) {
+    if (streak >= threshold) {
+      const badge = {
+        type: 'STREAKER',
+        name: 'Streaker',
+        data: {
+          totalBettingStreak: threshold,
+        },
+        createdTime: Date.now(),
+      } as StreakerBadge
+      achievements.streaker.badges.push(badge)
+    }
+  }
+  // update user
+  await firestore.collection('users').doc(user.id).update({
+    achievements,
+  })
+  return achievements
+}
diff --git a/functions/src/scripts/contest/bulk-add-liquidity.ts b/functions/src/scripts/contest/bulk-add-liquidity.ts
index 99d5f12b..e29fb0a9 100644
--- a/functions/src/scripts/contest/bulk-add-liquidity.ts
+++ b/functions/src/scripts/contest/bulk-add-liquidity.ts
@@ -50,3 +50,5 @@ async function main() {
   }
 }
 main()
+
+export {}
diff --git a/functions/src/scripts/contest/bulk-resolve-markets.ts b/functions/src/scripts/contest/bulk-resolve-markets.ts
new file mode 100644
index 00000000..8008db8b
--- /dev/null
+++ b/functions/src/scripts/contest/bulk-resolve-markets.ts
@@ -0,0 +1,65 @@
+// Run with `npx ts-node src/scripts/contest/resolve-markets.ts`
+
+const DOMAIN = 'dev.manifold.markets'
+// Dev API key for Cause Exploration Prizes (@CEP)
+const API_KEY = '188f014c-0ba2-4c35-9e6d-88252e281dbf'
+const GROUP_SLUG = 'cart-contest'
+
+// Can just curl /v0/group/{slug} to get a group
+async function getGroupBySlug(slug: string) {
+  const resp = await fetch(`https://${DOMAIN}/api/v0/group/${slug}`)
+  return await resp.json()
+}
+
+async function getMarketsByGroupId(id: string) {
+  // API structure: /v0/group/by-id/[id]/markets
+  const resp = await fetch(`https://${DOMAIN}/api/v0/group/by-id/${id}/markets`)
+  return await resp.json()
+}
+
+/* Example curl request:
+# Resolve a binary market
+$ curl https://manifold.markets/api/v0/market/{marketId}/resolve -X POST \
+    -H 'Content-Type: application/json' \
+    -H 'Authorization: Key {...}' \
+    --data-raw '{"outcome": "YES"}'
+*/
+async function resolveMarketById(
+  id: string,
+  outcome: 'YES' | 'NO' | 'MKT' | 'CANCEL'
+) {
+  const resp = await fetch(`https://${DOMAIN}/api/v0/market/${id}/resolve`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Key ${API_KEY}`,
+    },
+    body: JSON.stringify({
+      outcome,
+    }),
+  })
+  return await resp.json()
+}
+
+async function main() {
+  const group = await getGroupBySlug(GROUP_SLUG)
+  const markets = await getMarketsByGroupId(group.id)
+
+  // Count up some metrics
+  console.log('Number of markets', markets.length)
+  console.log(
+    'Number of resolved markets',
+    markets.filter((m: any) => m.isResolved).length
+  )
+
+  // Resolve each market to NO
+  for (const market of markets) {
+    if (!market.isResolved) {
+      console.log(`Resolving market ${market.url} to NO`)
+      await resolveMarketById(market.id, 'NO')
+    }
+  }
+}
+main()
+
+export {}
diff --git a/functions/src/scripts/denormalize.ts b/functions/src/scripts/denormalize.ts
index d4feb425..3362e940 100644
--- a/functions/src/scripts/denormalize.ts
+++ b/functions/src/scripts/denormalize.ts
@@ -3,7 +3,6 @@
 
 import { DocumentSnapshot, Transaction } from 'firebase-admin/firestore'
 import { isEqual, zip } from 'lodash'
-import { UpdateSpec } from '../utils'
 
 export type DocumentValue = {
   doc: DocumentSnapshot
@@ -54,7 +53,7 @@ export function getDiffUpdate(diff: DocumentDiff) {
   return {
     doc: diff.dest.doc.ref,
     fields: Object.fromEntries(zip(diff.dest.fields, diff.src.vals)),
-  } as UpdateSpec
+  }
 }
 
 export function applyDiff(transaction: Transaction, diff: DocumentDiff) {
diff --git a/functions/src/scripts/drizzle.ts b/functions/src/scripts/drizzle.ts
new file mode 100644
index 00000000..c38b6659
--- /dev/null
+++ b/functions/src/scripts/drizzle.ts
@@ -0,0 +1,8 @@
+import { initAdmin } from './script-init'
+initAdmin()
+
+import { drizzleLiquidity } from '../drizzle-liquidity'
+
+if (require.main === module) {
+  drizzleLiquidity().then(() => process.exit())
+}
diff --git a/functions/src/scripts/update-contract-tags.ts b/functions/src/scripts/update-contract-tags.ts
deleted file mode 100644
index 37a2b60a..00000000
--- a/functions/src/scripts/update-contract-tags.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as admin from 'firebase-admin'
-import { uniq } from 'lodash'
-
-import { initAdmin } from './script-init'
-initAdmin()
-
-import { Contract } from '../../../common/contract'
-import { parseTags } from '../../../common/util/parse'
-import { getValues } from '../utils'
-
-async function updateContractTags() {
-  const firestore = admin.firestore()
-  console.log('Updating contracts tags')
-
-  const contracts = await getValues<Contract>(firestore.collection('contracts'))
-
-  console.log('Loaded', contracts.length, 'contracts')
-
-  for (const contract of contracts) {
-    const contractRef = firestore.doc(`contracts/${contract.id}`)
-
-    const tags = uniq([
-      ...parseTags(contract.question + contract.description),
-      ...(contract.tags ?? []),
-    ])
-    const lowercaseTags = tags.map((tag) => tag.toLowerCase())
-
-    console.log(
-      'Updating tags',
-      contract.slug,
-      'from',
-      contract.tags,
-      'to',
-      tags
-    )
-
-    await contractRef.update({
-      tags,
-      lowercaseTags,
-    } as Partial<Contract>)
-  }
-}
-
-if (require.main === module) {
-  updateContractTags().then(() => process.exit())
-}
diff --git a/functions/src/scripts/update-groups.ts b/functions/src/scripts/update-groups.ts
index fc402292..56a9f399 100644
--- a/functions/src/scripts/update-groups.ts
+++ b/functions/src/scripts/update-groups.ts
@@ -89,17 +89,20 @@ const getGroups = async () => {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 async function updateTotalContractsAndMembers() {
   const groups = await getGroups()
-  for (const group of groups) {
-    log('updating group total contracts and members', group.slug)
-    const groupRef = admin.firestore().collection('groups').doc(group.id)
-    const totalMembers = (await groupRef.collection('groupMembers').get()).size
-    const totalContracts = (await groupRef.collection('groupContracts').get())
-      .size
-    await groupRef.update({
-      totalMembers,
-      totalContracts,
+  await Promise.all(
+    groups.map(async (group) => {
+      log('updating group total contracts and members', group.slug)
+      const groupRef = admin.firestore().collection('groups').doc(group.id)
+      const totalMembers = (await groupRef.collection('groupMembers').get())
+        .size
+      const totalContracts = (await groupRef.collection('groupContracts').get())
+        .size
+      await groupRef.update({
+        totalMembers,
+        totalContracts,
+      })
     })
-  }
+  )
 }
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 async function removeUnusedMemberAndContractFields() {
@@ -117,6 +120,6 @@ async function removeUnusedMemberAndContractFields() {
 if (require.main === module) {
   initAdmin()
   // convertGroupFieldsToGroupDocuments()
-  // updateTotalContractsAndMembers()
-  removeUnusedMemberAndContractFields()
+  updateTotalContractsAndMembers()
+  // removeUnusedMemberAndContractFields()
 }
diff --git a/functions/src/sell-shares.ts b/functions/src/sell-shares.ts
index f2f475cb..0c49bb24 100644
--- a/functions/src/sell-shares.ts
+++ b/functions/src/sell-shares.ts
@@ -1,6 +1,7 @@
 import { mapValues, groupBy, sumBy, uniq } from 'lodash'
 import * as admin from 'firebase-admin'
 import { z } from 'zod'
+import { FieldValue } from 'firebase-admin/firestore'
 
 import { APIError, newEndpoint, validate } from './api'
 import { Contract, CPMM_MIN_POOL_QTY } from '../../common/contract'
@@ -10,8 +11,7 @@ import { addObjects, removeUndefinedProps } from '../../common/util/object'
 import { log } from './utils'
 import { Bet } from '../../common/bet'
 import { floatingEqual, floatingLesserEqual } from '../../common/util/math'
-import { getUnfilledBetsQuery, updateMakers } from './place-bet'
-import { FieldValue } from 'firebase-admin/firestore'
+import { getUnfilledBetsAndUserBalances, updateMakers } from './place-bet'
 import { redeemShares } from './redeem-shares'
 import { removeUserFromContractFollowers } from './follow-market'
 
@@ -29,16 +29,18 @@ export const sellshares = newEndpoint({}, async (req, auth) => {
     const contractDoc = firestore.doc(`contracts/${contractId}`)
     const userDoc = firestore.doc(`users/${auth.uid}`)
     const betsQ = contractDoc.collection('bets').where('userId', '==', auth.uid)
-    const [[contractSnap, userSnap], userBetsSnap, unfilledBetsSnap] =
-      await Promise.all([
-        transaction.getAll(contractDoc, userDoc),
-        transaction.get(betsQ),
-        transaction.get(getUnfilledBetsQuery(contractDoc)),
-      ])
+    const [
+      [contractSnap, userSnap],
+      userBetsSnap,
+      { unfilledBets, balanceByUserId },
+    ] = await Promise.all([
+      transaction.getAll(contractDoc, userDoc),
+      transaction.get(betsQ),
+      getUnfilledBetsAndUserBalances(transaction, contractDoc),
+    ])
     if (!contractSnap.exists) throw new APIError(400, 'Contract not found.')
     if (!userSnap.exists) throw new APIError(400, 'User not found.')
     const userBets = userBetsSnap.docs.map((doc) => doc.data() as Bet)
-    const unfilledBets = unfilledBetsSnap.docs.map((doc) => doc.data())
 
     const contract = contractSnap.data() as Contract
     const user = userSnap.data() as User
@@ -86,13 +88,15 @@ export const sellshares = newEndpoint({}, async (req, auth) => {
     let loanPaid = saleFrac * loanAmount
     if (!isFinite(loanPaid)) loanPaid = 0
 
-    const { newBet, newPool, newP, fees, makers } = getCpmmSellBetInfo(
-      soldShares,
-      chosenOutcome,
-      contract,
-      unfilledBets,
-      loanPaid
-    )
+    const { newBet, newPool, newP, fees, makers, ordersToCancel } =
+      getCpmmSellBetInfo(
+        soldShares,
+        chosenOutcome,
+        contract,
+        unfilledBets,
+        balanceByUserId,
+        loanPaid
+      )
 
     if (
       !newP ||
@@ -127,6 +131,12 @@ export const sellshares = newEndpoint({}, async (req, auth) => {
       })
     )
 
+    for (const bet of ordersToCancel) {
+      transaction.update(contractDoc.collection('bets').doc(bet.id), {
+        isCancelled: true,
+      })
+    }
+
     return { newBet, makers, maxShares, soldShares }
   })
 
diff --git a/functions/src/serve.ts b/functions/src/serve.ts
index d861dcbc..bc09029d 100644
--- a/functions/src/serve.ts
+++ b/functions/src/serve.ts
@@ -19,8 +19,6 @@ import { sellbet } from './sell-bet'
 import { sellshares } from './sell-shares'
 import { claimmanalink } from './claim-manalink'
 import { createmarket } from './create-market'
-import { addliquidity } from './add-liquidity'
-import { withdrawliquidity } from './withdraw-liquidity'
 import { creategroup } from './create-group'
 import { resolvemarket } from './resolve-market'
 import { unsubscribe } from './unsubscribe'
@@ -61,10 +59,8 @@ addJsonEndpointRoute('/sellbet', sellbet)
 addJsonEndpointRoute('/sellshares', sellshares)
 addJsonEndpointRoute('/claimmanalink', claimmanalink)
 addJsonEndpointRoute('/createmarket', createmarket)
-addJsonEndpointRoute('/addliquidity', addliquidity)
 addJsonEndpointRoute('/addCommentBounty', addcommentbounty)
 addJsonEndpointRoute('/awardCommentBounty', awardcommentbounty)
-addJsonEndpointRoute('/withdrawliquidity', withdrawliquidity)
 addJsonEndpointRoute('/creategroup', creategroup)
 addJsonEndpointRoute('/resolvemarket', resolvemarket)
 addJsonEndpointRoute('/unsubscribe', unsubscribe)
diff --git a/functions/src/test-scheduled-function.ts b/functions/src/test-scheduled-function.ts
index 41aa9fe9..ed51e5e9 100644
--- a/functions/src/test-scheduled-function.ts
+++ b/functions/src/test-scheduled-function.ts
@@ -1,6 +1,6 @@
 import { APIError, newEndpoint } from './api'
-import { sendPortfolioUpdateEmailsToAllUsers } from './weekly-portfolio-emails'
 import { isProd } from './utils'
+import { sendMarketCloseEmails } from 'functions/src/market-close-notifications'
 
 // Function for testing scheduled functions locally
 export const testscheduledfunction = newEndpoint(
@@ -10,7 +10,7 @@ export const testscheduledfunction = newEndpoint(
       throw new APIError(400, 'This function is only available in dev mode')
 
     // Replace your function here
-    await sendPortfolioUpdateEmailsToAllUsers()
+    await sendMarketCloseEmails()
 
     return { success: true }
   }
diff --git a/functions/src/unsubscribe.ts b/functions/src/unsubscribe.ts
index 418282c7..b8f452c6 100644
--- a/functions/src/unsubscribe.ts
+++ b/functions/src/unsubscribe.ts
@@ -4,6 +4,7 @@ import { getPrivateUser } from './utils'
 import { PrivateUser } from '../../common/user'
 import { NOTIFICATION_DESCRIPTIONS } from '../../common/notification'
 import { notification_preference } from '../../common/user-notification-preferences'
+import { getFunctionUrl } from '../../common/api'
 
 export const unsubscribe: EndpointDefinition = {
   opts: { method: 'GET', minInstances: 1 },
@@ -20,6 +21,8 @@ export const unsubscribe: EndpointDefinition = {
       res.status(400).send('Invalid subscription type parameter.')
       return
     }
+    const optOutAllType: notification_preference = 'opt_out_all'
+    const wantsToOptOutAll = notificationSubscriptionType === optOutAllType
 
     const user = await getPrivateUser(id)
 
@@ -31,28 +34,36 @@ export const unsubscribe: EndpointDefinition = {
     const previousDestinations =
       user.notificationPreferences[notificationSubscriptionType]
 
+    let newDestinations = previousDestinations
+    if (wantsToOptOutAll) newDestinations.push('email')
+    else
+      newDestinations = previousDestinations.filter(
+        (destination) => destination !== 'email'
+      )
+
     console.log(previousDestinations)
     const { email } = user
 
     const update: Partial<PrivateUser> = {
       notificationPreferences: {
         ...user.notificationPreferences,
-        [notificationSubscriptionType]: previousDestinations.filter(
-          (destination) => destination !== 'email'
-        ),
+        [notificationSubscriptionType]: newDestinations,
       },
     }
 
     await firestore.collection('private-users').doc(id).update(update)
+    const unsubscribeEndpoint = getFunctionUrl('unsubscribe')
 
-    res.send(
-      `
-<!DOCTYPE html>
+    const optOutAllUrl = `${unsubscribeEndpoint}?id=${id}&type=${optOutAllType}`
+    if (wantsToOptOutAll) {
+      res.send(
+        `
+     <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
       xmlns:o="urn:schemas-microsoft-com:office:office">
 
 <head>
-  <title>Manifold Markets 7th Day Anniversary Gift!</title>
+  <title>Unsubscribe from Manifold Markets emails</title>
   <!--[if !mso]><!-->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <!--<![endif]-->
@@ -163,19 +174,6 @@ export const unsubscribe: EndpointDefinition = {
                   </a>
                 </td>
               </tr>
-              <tr>
-                <td align="left"
-                    style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;">
-                  <div
-                    style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:left;color:#000000;">
-                    <p class="text-build-content"
-                       style="line-height: 24px; margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"
-                       data-testid="4XoHRGw1Y"><span
-                      style="color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:18px;">
-                              Hello!</span></p>
-                  </div>
-                </td>
-              </tr>
               <tr>
                 <td align="left"
                     style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;">
@@ -186,20 +184,9 @@ export const unsubscribe: EndpointDefinition = {
                        data-testid="4XoHRGw1Y">
                        <span
                          style="color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:18px;">
-                      ${email} has been unsubscribed from email notifications related to:
+                      ${email} has opted out of receiving unnecessary email notifications
                     </span>
-                      <br/>
-                      <br/>
 
-                      <span style="font-weight: bold; color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:18px;">${NOTIFICATION_DESCRIPTIONS[notificationSubscriptionType].detailed}.</span>
-                    </p>
-                    <br/>
-                    <br/>
-                    <br/>
-                    <span>Click
-                    <a href='https://manifold.markets/notifications?tab=settings'>here</a>
-                       to manage the rest of your notification settings.
-                      </span>
                   </div>
 
                 </td>
@@ -219,9 +206,193 @@ export const unsubscribe: EndpointDefinition = {
   </div>
 </div>
 </body>
+</html>`
+      )
+    } else {
+      res.send(
+        `
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+      xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <title>Unsubscribe from Manifold Markets emails</title>
+    <!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--<![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <style type="text/css">
+        #outlook a {
+            padding: 0;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+        }
+
+        table,
+        td {
+            border-collapse: collapse;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+        }
+
+        img {
+            border: 0;
+            height: auto;
+            line-height: 100%;
+            outline: none;
+            text-decoration: none;
+            -ms-interpolation-mode: bicubic;
+        }
+
+        p {
+            display: block;
+            margin: 13px 0;
+        }
+    </style>
+    <!--[if mso]>
+    <noscript>
+        <xml>
+            <o:OfficeDocumentSettings>
+                <o:AllowPNG/>
+                <o:PixelsPerInch>96</o:PixelsPerInch>
+            </o:OfficeDocumentSettings>
+        </xml>
+    </noscript>
+    <![endif]-->
+    <!--[if lte mso 11]>
+    <style type="text/css">
+        .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+    <style type="text/css">
+        @media only screen and (min-width:480px) {
+            .mj-column-per-100 {
+                width: 100% !important;
+                max-width: 100%;
+            }
+        }
+    </style>
+    <style media="screen and (min-width:480px)">
+        .moz-text-html .mj-column-per-100 {
+            width: 100% !important;
+            max-width: 100%;
+        }
+    </style>
+    <style type="text/css">
+        [owa] .mj-column-per-100 {
+            width: 100% !important;
+            max-width: 100%;
+        }
+    </style>
+    <style type="text/css">
+        @media only screen and (max-width:480px) {
+            table.mj-full-width-mobile {
+                width: 100% !important;
+            }
+
+            td.mj-full-width-mobile {
+                width: auto !important;
+            }
+        }
+    </style>
+</head>
+<body style="word-spacing:normal;background-color:#F4F4F4;">
+<div style="background-color:#F4F4F4;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+               style="background:#ffffff;background-color:#ffffff;width:100%;">
+            <tbody>
+            <tr>
+                <td
+                  style="direction:ltr;font-size:0px;padding:0px 0px 0px 0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-align:center;">
+                    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+                    <div class="mj-column-per-100 mj-outlook-group-fix"
+                         style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+                               width="100%">
+                            <tbody>
+                            <tr>
+                                <td style="width:550px;">
+                                    <a href="https://manifold.markets" target="_blank">
+                                        <img alt="banner logo" height="auto" src="https://manifold.markets/logo-banner.png"
+                                             style="border:none;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
+                                             title="" width="550">
+                                    </a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td align="left"
+                                    style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;">
+                                    <div
+                                      style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:left;color:#000000;">
+                                        <p class="text-build-content"
+                                           style="line-height: 24px; margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"
+                                           data-testid="4XoHRGw1Y"><span
+                                          style="color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:18px;">
+                              Hello!</span></p>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td align="left"
+                                    style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;">
+                                    <div
+                                      style="font-family:Arial, sans-serif;font-size:18px;letter-spacing:normal;line-height:1;text-align:left;color:#000000;">
+                                        <p class="text-build-content"
+                                           style="line-height: 24px; margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"
+                                           data-testid="4XoHRGw1Y">
+                       <span
+                         style="color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:18px;">
+                      ${email} has been unsubscribed from email notifications related to:
+                    </span>
+                                            <br/>
+                                            <br/>
+
+                                            <span style="font-weight: bold; color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:18px;">${NOTIFICATION_DESCRIPTIONS[notificationSubscriptionType].detailed}.</span>
+                                        </p>
+                                        <br/>
+                                        <br/>
+                                        <br/>
+                    <span>Click
+                    <a href=${optOutAllUrl}>here</a>
+                       to unsubscribe from all unnecessary emails.
+                      </span>
+                                        <br/>
+                                        <br/>
+                    <span>Click
+                    <a href='https://manifold.markets/notifications?tab=settings'>here</a>
+                       to manage the rest of your notification settings.
+                      </span>
+                                    </div>
+
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <p></p>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+</body>
 </html>
 `
-    )
+      )
+    }
   },
 }
 
diff --git a/functions/src/update-metrics.ts b/functions/src/update-metrics.ts
index 12f41453..6a01318b 100644
--- a/functions/src/update-metrics.ts
+++ b/functions/src/update-metrics.ts
@@ -1,10 +1,11 @@
 import * as functions from 'firebase-functions'
 import * as admin from 'firebase-admin'
-import { groupBy, isEmpty, keyBy, last, sortBy } from 'lodash'
+import { groupBy, keyBy, sortBy } from 'lodash'
+import fetch from 'node-fetch'
+
 import { getValues, log, logMemory, writeAsync } from './utils'
 import { Bet } from '../../common/bet'
 import { Contract, CPMM } from '../../common/contract'
-
 import { PortfolioMetrics, User } from '../../common/user'
 import { DAY_MS } from '../../common/util/time'
 import { getLoanUpdates } from '../../common/loans'
@@ -14,18 +15,44 @@ import {
   calculateNewPortfolioMetrics,
   calculateNewProfit,
   calculateProbChanges,
+  calculateMetricsByContract,
+  computeElasticity,
   computeVolume,
 } from '../../common/calculate-metrics'
 import { getProbability } from '../../common/calculate'
 import { Group } from '../../common/group'
 import { batchedWaitAll } from '../../common/util/promise'
+import { newEndpointNoAuth } from './api'
+import { getFunctionUrl } from '../../common/api'
+import { filterDefined } from '../../common/util/array'
 
 const firestore = admin.firestore()
+export const scheduleUpdateMetrics = functions.pubsub
+  .schedule('every 15 minutes')
+  .onRun(async () => {
+    const url = getFunctionUrl('updatemetrics')
+    console.log('Scheduling update metrics', url)
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+      body: JSON.stringify({}),
+    })
 
-export const updateMetrics = functions
-  .runWith({ memory: '8GB', timeoutSeconds: 540 })
-  .pubsub.schedule('every 15 minutes')
-  .onRun(updateMetricsCore)
+    const json = await response.json()
+
+    if (response.ok) console.log(json)
+    else console.error(json)
+  })
+
+export const updatemetrics = newEndpointNoAuth(
+  { timeoutSeconds: 2000, memory: '8GiB', minInstances: 0 },
+  async (_req) => {
+    await updateMetricsCore()
+    return { success: true }
+  }
+)
 
 export async function updateMetricsCore() {
   console.log('Loading users')
@@ -35,11 +62,7 @@ export async function updateMetricsCore() {
   const contracts = await getValues<Contract>(firestore.collection('contracts'))
 
   console.log('Loading portfolio history')
-  const allPortfolioHistories = await getValues<PortfolioMetrics>(
-    firestore
-      .collectionGroup('portfolioHistory')
-      .where('timestamp', '>', Date.now() - 31 * DAY_MS) // so it includes just over a month ago
-  )
+  const userPortfolioHistory = await loadPortfolioHistory(users)
 
   console.log('Loading groups')
   const groups = await getValues<Group>(firestore.collection('groups'))
@@ -103,6 +126,7 @@ export async function updateMetricsCore() {
         fields: {
           volume24Hours: computeVolume(contractBets, now - DAY_MS),
           volume7Days: computeVolume(contractBets, now - DAY_MS * 7),
+          elasticity: computeElasticity(contractBets, contract),
           ...cpmmFields,
         },
       }
@@ -115,11 +139,10 @@ export async function updateMetricsCore() {
   )
   const contractsByUser = groupBy(contracts, (contract) => contract.creatorId)
   const betsByUser = groupBy(bets, (bet) => bet.userId)
-  const portfolioHistoryByUser = groupBy(allPortfolioHistories, (p) => p.userId)
 
   const userMetrics = users.map((user) => {
     const currentBets = betsByUser[user.id] ?? []
-    const portfolioHistory = portfolioHistoryByUser[user.id] ?? []
+    const portfolioHistory = userPortfolioHistory[user.id] ?? []
     const userContracts = contractsByUser[user.id] ?? []
     const newCreatorVolume = calculateCreatorVolume(userContracts)
     const newPortfolio = calculateNewPortfolioMetrics(
@@ -127,21 +150,51 @@ export async function updateMetricsCore() {
       contractsById,
       currentBets
     )
-    const lastPortfolio = last(portfolioHistory)
+    const currPortfolio = portfolioHistory.current
     const didPortfolioChange =
-      lastPortfolio === undefined ||
-      lastPortfolio.balance !== newPortfolio.balance ||
-      lastPortfolio.totalDeposits !== newPortfolio.totalDeposits ||
-      lastPortfolio.investmentValue !== newPortfolio.investmentValue
+      currPortfolio === undefined ||
+      currPortfolio.balance !== newPortfolio.balance ||
+      currPortfolio.totalDeposits !== newPortfolio.totalDeposits ||
+      currPortfolio.investmentValue !== newPortfolio.investmentValue
 
     const newProfit = calculateNewProfit(portfolioHistory, newPortfolio)
 
+    const metricsByContract = calculateMetricsByContract(
+      currentBets,
+      contractsById
+    )
+
+    const contractRatios = userContracts
+      .map((contract) => {
+        if (
+          !contract.flaggedByUsernames ||
+          contract.flaggedByUsernames?.length === 0
+        ) {
+          return 0
+        }
+        const contractRatio =
+          contract.flaggedByUsernames.length / (contract.uniqueBettorCount || 1)
+
+        return contractRatio
+      })
+      .filter((ratio) => ratio > 0)
+    const badResolutions = contractRatios.filter(
+      (ratio) => ratio > BAD_RESOLUTION_THRESHOLD
+    )
+    let newFractionResolvedCorrectly = 1
+    if (userContracts.length > 0) {
+      newFractionResolvedCorrectly =
+        (userContracts.length - badResolutions.length) / userContracts.length
+    }
+
     return {
       user,
       newCreatorVolume,
       newPortfolio,
       newProfit,
       didPortfolioChange,
+      newFractionResolvedCorrectly,
+      metricsByContract,
     }
   })
 
@@ -157,61 +210,61 @@ export async function updateMetricsCore() {
   const nextLoanByUser = keyBy(userPayouts, (payout) => payout.user.id)
 
   const userUpdates = userMetrics.map(
-    ({
-      user,
-      newCreatorVolume,
-      newPortfolio,
-      newProfit,
-      didPortfolioChange,
-    }) => {
+    ({ user, newCreatorVolume, newProfit, newFractionResolvedCorrectly }) => {
       const nextLoanCached = nextLoanByUser[user.id]?.payout ?? 0
       return {
-        fieldUpdates: {
-          doc: firestore.collection('users').doc(user.id),
-          fields: {
-            creatorVolumeCached: newCreatorVolume,
-            profitCached: newProfit,
-            nextLoanCached,
-          },
-        },
-
-        subcollectionUpdates: {
-          doc: firestore
-            .collection('users')
-            .doc(user.id)
-            .collection('portfolioHistory')
-            .doc(),
-          fields: didPortfolioChange ? newPortfolio : {},
+        doc: firestore.collection('users').doc(user.id),
+        fields: {
+          creatorVolumeCached: newCreatorVolume,
+          profitCached: newProfit,
+          nextLoanCached,
+          fractionResolvedCorrectly: newFractionResolvedCorrectly,
         },
       }
     }
   )
-  await writeAsync(
-    firestore,
-    userUpdates.map((u) => u.fieldUpdates)
+  await writeAsync(firestore, userUpdates)
+
+  const portfolioHistoryUpdates = filterDefined(
+    userMetrics.map(({ user, newPortfolio, didPortfolioChange }) => {
+      return didPortfolioChange
+        ? {
+            doc: firestore
+              .collection('users')
+              .doc(user.id)
+              .collection('portfolioHistory')
+              .doc(),
+            fields: newPortfolio,
+          }
+        : null
+    })
   )
-  await writeAsync(
-    firestore,
-    userUpdates
-      .filter((u) => !isEmpty(u.subcollectionUpdates.fields))
-      .map((u) => u.subcollectionUpdates),
-    'set'
+  await writeAsync(firestore, portfolioHistoryUpdates, 'set')
+
+  const contractMetricsUpdates = userMetrics.flatMap(
+    ({ user, metricsByContract }) => {
+      const collection = firestore
+        .collection('users')
+        .doc(user.id)
+        .collection('contract-metrics')
+      return metricsByContract.map((metrics) => ({
+        doc: collection.doc(metrics.contractId),
+        fields: metrics,
+      }))
+    }
   )
+
+  await writeAsync(firestore, contractMetricsUpdates, 'set')
+
   log(`Updated metrics for ${users.length} users.`)
 
   try {
     const groupUpdates = groups.map((group, index) => {
       const groupContractIds = contractsByGroup[index] as GroupContractDoc[]
-      const groupContracts = groupContractIds
-        .map((e) => contractsById[e.contractId])
-        .filter((e) => e !== undefined) as Contract[]
-      const bets = groupContracts.map((e) => {
-        if (e != null && e.id in betsByContract) {
-          return betsByContract[e.id] ?? []
-        } else {
-          return []
-        }
-      })
+      const groupContracts = filterDefined(
+        groupContractIds.map((e) => contractsById[e.contractId])
+      )
+      const bets = groupContracts.map((e) => betsByContract[e.id] ?? [])
 
       const creatorScores = scoreCreators(groupContracts)
       const traderScores = scoreTraders(groupContracts, bets)
@@ -243,3 +296,46 @@ const topUserScores = (scores: { [userId: string]: number }) => {
 }
 
 type GroupContractDoc = { contractId: string; createdTime: number }
+
+const BAD_RESOLUTION_THRESHOLD = 0.1
+
+const loadPortfolioHistory = async (users: User[]) => {
+  const now = Date.now()
+  const userPortfolioHistory = await batchedWaitAll(
+    users.map((user) => async () => {
+      const query = firestore
+        .collection('users')
+        .doc(user.id)
+        .collection('portfolioHistory')
+        .orderBy('timestamp', 'desc')
+        .limit(1)
+
+      const portfolioMetrics = await Promise.all([
+        getValues<PortfolioMetrics>(query),
+        getValues<PortfolioMetrics>(
+          query.where('timestamp', '<', now - DAY_MS)
+        ),
+        getValues<PortfolioMetrics>(
+          query.where('timestamp', '<', now - 7 * DAY_MS)
+        ),
+        getValues<PortfolioMetrics>(
+          query.where('timestamp', '<', now - 30 * DAY_MS)
+        ),
+      ])
+      const [current, day, week, month] = portfolioMetrics.map(
+        (p) => p[0] as PortfolioMetrics | undefined
+      )
+
+      return {
+        userId: user.id,
+        current,
+        day,
+        week,
+        month,
+      }
+    }),
+    100
+  )
+
+  return keyBy(userPortfolioHistory, (p) => p.userId)
+}
diff --git a/functions/src/utils.ts b/functions/src/utils.ts
index efc22e53..e0cd269a 100644
--- a/functions/src/utils.ts
+++ b/functions/src/utils.ts
@@ -47,7 +47,7 @@ export const writeAsync = async (
     const batch = db.batch()
     for (const { doc, fields } of chunks[i]) {
       if (operationType === 'update') {
-        batch.update(doc, fields)
+        batch.update(doc, fields as any)
       } else {
         batch.set(doc, fields)
       }
@@ -112,6 +112,12 @@ export const getAllPrivateUsers = async () => {
   return users.docs.map((doc) => doc.data() as PrivateUser)
 }
 
+export const getAllUsers = async () => {
+  const firestore = admin.firestore()
+  const users = await firestore.collection('users').get()
+  return users.docs.map((doc) => doc.data() as User)
+}
+
 export const getUserByUsername = async (username: string) => {
   const firestore = admin.firestore()
   const snap = await firestore
diff --git a/functions/src/weekly-markets-emails.ts b/functions/src/weekly-markets-emails.ts
index 7c6f21a4..3d5ab3ac 100644
--- a/functions/src/weekly-markets-emails.ts
+++ b/functions/src/weekly-markets-emails.ts
@@ -4,21 +4,24 @@ import * as admin from 'firebase-admin'
 import { Contract } from '../../common/contract'
 import {
   getAllPrivateUsers,
+  getGroup,
   getPrivateUser,
   getUser,
   getValues,
   isProd,
   log,
 } from './utils'
-import { sendInterestingMarketsEmail } from './emails'
 import { createRNG, shuffle } from '../../common/util/random'
-import { DAY_MS } from '../../common/util/time'
+import { DAY_MS, HOUR_MS } from '../../common/util/time'
 import { filterDefined } from '../../common/util/array'
+import { Follow } from '../../common/follow'
+import { countBy, uniq, uniqBy } from 'lodash'
+import { sendInterestingMarketsEmail } from './emails'
 
 export const weeklyMarketsEmails = functions
   .runWith({ secrets: ['MAILGUN_KEY'], memory: '4GB' })
-  // every minute on Monday for an hour at 12pm PT (UTC -07:00)
-  .pubsub.schedule('* 19 * * 1')
+  // every minute on Monday for 2 hours starting at 12pm PT (UTC -07:00)
+  .pubsub.schedule('* 19-20 * * 1')
   .timeZone('Etc/UTC')
   .onRun(async () => {
     await sendTrendingMarketsEmailsToAllUsers()
@@ -40,20 +43,30 @@ export async function getTrendingContracts() {
   )
 }
 
-async function sendTrendingMarketsEmailsToAllUsers() {
+export async function sendTrendingMarketsEmailsToAllUsers() {
   const numContractsToSend = 6
   const privateUsers = isProd()
     ? await getAllPrivateUsers()
-    : filterDefined([await getPrivateUser('6hHpzvRG0pMq8PNJs7RZj2qlZGn2')])
-  // get all users that haven't unsubscribed from weekly emails
+    : filterDefined([
+        await getPrivateUser('6hHpzvRG0pMq8PNJs7RZj2qlZGn2'), // dev Ian
+      ])
   const privateUsersToSendEmailsTo = privateUsers
-    .filter((user) => {
-      return (
+    // Get all users that haven't unsubscribed from weekly emails
+    .filter(
+      (user) =>
         user.notificationPreferences.trending_markets.includes('email') &&
         !user.weeklyTrendingEmailSent
-      )
-    })
-    .slice(150) // Send the emails out in batches
+    )
+    .slice(0, 90) // Send the emails out in batches
+
+  // For testing different users on prod: (only send ian an email though)
+  // const privateUsersToSendEmailsTo = filterDefined([
+  //   await getPrivateUser('AJwLWoo3xue32XIiAVrL5SyR1WB2'), // prod Ian
+  //   // isProd()
+  //   await getPrivateUser('FptiiMZZ6dQivihLI8MYFQ6ypSw1'), // prod Mik
+  //   //   : await getPrivateUser('6hHpzvRG0pMq8PNJs7RZj2qlZGn2'), // dev Ian
+  // ])
+
   log(
     'Sending weekly trending emails to',
     privateUsersToSendEmailsTo.length,
@@ -70,42 +83,358 @@ async function sendTrendingMarketsEmailsToAllUsers() {
         !contract.groupSlugs?.includes('manifold-features') &&
         !contract.groupSlugs?.includes('manifold-6748e065087e')
     )
-    .slice(0, 20)
-  log(
-    `Found ${trendingContracts.length} trending contracts:\n`,
-    trendingContracts.map((c) => c.question).join('\n ')
-  )
+    .slice(0, 50)
 
-  // TODO: convert to Promise.all
-  for (const privateUser of privateUsersToSendEmailsTo) {
-    if (!privateUser.email) {
-      log(`No email for ${privateUser.username}`)
-      continue
-    }
-    const contractsAvailableToSend = trendingContracts.filter((contract) => {
-      return !contract.uniqueBettorIds?.includes(privateUser.id)
-    })
-    if (contractsAvailableToSend.length < numContractsToSend) {
-      log('not enough new, unbet-on contracts to send to user', privateUser.id)
-      await firestore.collection('private-users').doc(privateUser.id).update({
+  const uniqueTrendingContracts = removeSimilarQuestions(
+    trendingContracts,
+    trendingContracts,
+    true
+  ).slice(0, 20)
+
+  await Promise.all(
+    privateUsersToSendEmailsTo.map(async (privateUser) => {
+      if (!privateUser.email) {
+        log(`No email for ${privateUser.username}`)
+        return
+      }
+
+      const unbetOnFollowedMarkets = await getUserUnBetOnFollowsMarkets(
+        privateUser.id
+      )
+      const unBetOnGroupMarkets = await getUserUnBetOnGroupsMarkets(
+        privateUser.id,
+        unbetOnFollowedMarkets
+      )
+      const similarBettorsMarkets = await getSimilarBettorsMarkets(
+        privateUser.id,
+        unBetOnGroupMarkets
+      )
+
+      const marketsAvailableToSend = uniqBy(
+        [
+          ...chooseRandomSubset(unbetOnFollowedMarkets, 2),
+          // // Most people will belong to groups but may not follow other users,
+          // so choose more from the other subsets if the followed markets is sparse
+          ...chooseRandomSubset(
+            unBetOnGroupMarkets,
+            unbetOnFollowedMarkets.length < 2 ? 3 : 2
+          ),
+          ...chooseRandomSubset(
+            similarBettorsMarkets,
+            unbetOnFollowedMarkets.length < 2 ? 3 : 2
+          ),
+        ],
+        (contract) => contract.id
+      )
+      // // at least send them trending contracts if nothing else
+      if (marketsAvailableToSend.length < numContractsToSend) {
+        const trendingMarketsToSend =
+          numContractsToSend - marketsAvailableToSend.length
+        log(
+          `not enough personalized markets, sending ${trendingMarketsToSend} trending`
+        )
+        marketsAvailableToSend.push(
+          ...removeSimilarQuestions(
+            uniqueTrendingContracts,
+            marketsAvailableToSend,
+            false
+          )
+            .filter(
+              (contract) => !contract.uniqueBettorIds?.includes(privateUser.id)
+            )
+            .slice(0, trendingMarketsToSend)
+        )
+      }
+
+      if (marketsAvailableToSend.length < numContractsToSend) {
+        log(
+          'not enough new, unbet-on contracts to send to user',
+          privateUser.id
+        )
+        await firestore.collection('private-users').doc(privateUser.id).update({
+          weeklyTrendingEmailSent: true,
+        })
+        return
+      }
+      // choose random subset of contracts to send to user
+      const contractsToSend = chooseRandomSubset(
+        marketsAvailableToSend,
+        numContractsToSend
+      )
+
+      const user = await getUser(privateUser.id)
+      if (!user) return
+
+      log(
+        'sending contracts:',
+        contractsToSend.map((c) => c.question + ' ' + c.popularityScore)
+      )
+      // if they don't have enough markets, find user bets and get the other bettor ids who most overlap on those markets, then do the same thing as above for them
+      await sendInterestingMarketsEmail(user, privateUser, contractsToSend)
+      await firestore.collection('private-users').doc(user.id).update({
         weeklyTrendingEmailSent: true,
       })
-      continue
-    }
-    // choose random subset of contracts to send to user
-    const contractsToSend = chooseRandomSubset(
-      contractsAvailableToSend,
-      numContractsToSend
-    )
-
-    const user = await getUser(privateUser.id)
-    if (!user) continue
-
-    await sendInterestingMarketsEmail(user, privateUser, contractsToSend)
-    await firestore.collection('private-users').doc(user.id).update({
-      weeklyTrendingEmailSent: true,
     })
-  }
+  )
+}
+
+const MINIMUM_POPULARITY_SCORE = 10
+
+const getUserUnBetOnFollowsMarkets = async (userId: string) => {
+  const follows = await getValues<Follow>(
+    firestore.collection('users').doc(userId).collection('follows')
+  )
+
+  const unBetOnContractsFromFollows = await Promise.all(
+    follows.map(async (follow) => {
+      const unresolvedContracts = await getValues<Contract>(
+        firestore
+          .collection('contracts')
+          .where('isResolved', '==', false)
+          .where('visibility', '==', 'public')
+          .where('creatorId', '==', follow.userId)
+          // can't use multiple inequality (/orderBy) operators on different fields,
+          // so have to filter for closed contracts separately
+          .orderBy('popularityScore', 'desc')
+          .limit(50)
+      )
+      // filter out contracts that have close times less than 6 hours from now
+      const openContracts = unresolvedContracts.filter(
+        (contract) => (contract?.closeTime ?? 0) > Date.now() + 6 * HOUR_MS
+      )
+
+      return openContracts.filter(
+        (contract) => !contract.uniqueBettorIds?.includes(userId)
+      )
+    })
+  )
+
+  const sortedMarkets = uniqBy(
+    unBetOnContractsFromFollows.flat(),
+    (contract) => contract.id
+  )
+    .filter(
+      (contract) =>
+        contract.popularityScore !== undefined &&
+        contract.popularityScore > MINIMUM_POPULARITY_SCORE
+    )
+    .sort((a, b) => (b.popularityScore ?? 0) - (a.popularityScore ?? 0))
+
+  const uniqueSortedMarkets = removeSimilarQuestions(
+    sortedMarkets,
+    sortedMarkets,
+    true
+  )
+
+  const topSortedMarkets = uniqueSortedMarkets.slice(0, 10)
+  // log(
+  //   'top 10 sorted markets by followed users',
+  //   topSortedMarkets.map((c) => c.question + ' ' + c.popularityScore)
+  // )
+  return topSortedMarkets
+}
+
+const getUserUnBetOnGroupsMarkets = async (
+  userId: string,
+  differentThanTheseContracts: Contract[]
+) => {
+  const snap = await firestore
+    .collectionGroup('groupMembers')
+    .where('userId', '==', userId)
+    .get()
+
+  const groupIds = filterDefined(
+    snap.docs.map((doc) => doc.ref.parent.parent?.id)
+  )
+  const groups = filterDefined(
+    await Promise.all(groupIds.map(async (groupId) => await getGroup(groupId)))
+  )
+  if (groups.length === 0) return []
+
+  const unBetOnContractsFromGroups = await Promise.all(
+    groups.map(async (group) => {
+      const unresolvedContracts = await getValues<Contract>(
+        firestore
+          .collection('contracts')
+          .where('isResolved', '==', false)
+          .where('visibility', '==', 'public')
+          .where('groupSlugs', 'array-contains', group.slug)
+          // can't use multiple inequality (/orderBy) operators on different fields,
+          // so have to filter for closed contracts separately
+          .orderBy('popularityScore', 'desc')
+          .limit(50)
+      )
+      // filter out contracts that have close times less than 6 hours from now
+      const openContracts = unresolvedContracts.filter(
+        (contract) => (contract?.closeTime ?? 0) > Date.now() + 6 * HOUR_MS
+      )
+
+      return openContracts.filter(
+        (contract) => !contract.uniqueBettorIds?.includes(userId)
+      )
+    })
+  )
+
+  const sortedMarkets = uniqBy(
+    unBetOnContractsFromGroups.flat(),
+    (contract) => contract.id
+  )
+    .filter(
+      (contract) =>
+        contract.popularityScore !== undefined &&
+        contract.popularityScore > MINIMUM_POPULARITY_SCORE
+    )
+    .sort((a, b) => (b.popularityScore ?? 0) - (a.popularityScore ?? 0))
+
+  const uniqueSortedMarkets = removeSimilarQuestions(
+    sortedMarkets,
+    sortedMarkets,
+    true
+  )
+  const topSortedMarkets = removeSimilarQuestions(
+    uniqueSortedMarkets,
+    differentThanTheseContracts,
+    false
+  ).slice(0, 10)
+
+  // log(
+  //   'top 10 sorted group markets',
+  //   topSortedMarkets.map((c) => c.question + ' ' + c.popularityScore)
+  // )
+  return topSortedMarkets
+}
+
+// Gets markets followed by similar bettors and bet on by similar bettors
+const getSimilarBettorsMarkets = async (
+  userId: string,
+  differentThanTheseContracts: Contract[]
+) => {
+  // get contracts with unique bettor ids with this user
+  const contractsUserHasBetOn = await getValues<Contract>(
+    firestore
+      .collection('contracts')
+      .where('uniqueBettorIds', 'array-contains', userId)
+  )
+  if (contractsUserHasBetOn.length === 0) return []
+  // count the number of times each unique bettor id appears on those contracts
+  const bettorIdsToCounts = countBy(
+    contractsUserHasBetOn.map((contract) => contract.uniqueBettorIds).flat(),
+    (bettorId) => bettorId
+  )
+
+  // sort by number of times they appear with at least 2 appearances
+  const sortedBettorIds = Object.entries(bettorIdsToCounts)
+    .sort((a, b) => b[1] - a[1])
+    .filter((bettorId) => bettorId[1] > 2)
+    .map((entry) => entry[0])
+    .filter((bettorId) => bettorId !== userId)
+
+  // get the top 10 most similar bettors (excluding this user)
+  const similarBettorIds = sortedBettorIds.slice(0, 10)
+  if (similarBettorIds.length === 0) return []
+
+  // get contracts with unique bettor ids with this user
+  const contractsSimilarBettorsHaveBetOn = uniqBy(
+    (
+      await getValues<Contract>(
+        firestore
+          .collection('contracts')
+          .where(
+            'uniqueBettorIds',
+            'array-contains-any',
+            similarBettorIds.slice(0, 10)
+          )
+          .orderBy('popularityScore', 'desc')
+          .limit(200)
+      )
+    ).filter(
+      (contract) =>
+        !contract.uniqueBettorIds?.includes(userId) &&
+        (contract.popularityScore ?? 0) > MINIMUM_POPULARITY_SCORE
+    ),
+    (contract) => contract.id
+  )
+
+  // sort the contracts by how many times similar bettor ids are in their unique bettor ids array
+  const sortedContractsInSimilarBettorsBets = contractsSimilarBettorsHaveBetOn
+    .map((contract) => {
+      const appearances = contract.uniqueBettorIds?.filter((bettorId) =>
+        similarBettorIds.includes(bettorId)
+      ).length
+      return [contract, appearances] as [Contract, number]
+    })
+    .sort((a, b) => b[1] - a[1])
+    .map((entry) => entry[0])
+
+  const uniqueSortedContractsInSimilarBettorsBets = removeSimilarQuestions(
+    sortedContractsInSimilarBettorsBets,
+    sortedContractsInSimilarBettorsBets,
+    true
+  )
+
+  const topMostSimilarContracts = removeSimilarQuestions(
+    uniqueSortedContractsInSimilarBettorsBets,
+    differentThanTheseContracts,
+    false
+  ).slice(0, 10)
+
+  // log(
+  //   'top 10 sorted contracts other similar bettors have bet on',
+  //   topMostSimilarContracts.map((c) => c.question)
+  // )
+
+  return topMostSimilarContracts
+}
+
+// search contract array by question and remove contracts with 3 matching words in the question
+const removeSimilarQuestions = (
+  contractsToFilter: Contract[],
+  byContracts: Contract[],
+  allowExactSameContracts: boolean
+) => {
+  // log(
+  //   'contracts to filter by',
+  //   byContracts.map((c) => c.question + ' ' + c.popularityScore)
+  // )
+  let contractsToRemove: Contract[] = []
+  byContracts.length > 0 &&
+    byContracts.forEach((contract) => {
+      const contractQuestion = stripNonAlphaChars(
+        contract.question.toLowerCase()
+      )
+      const contractQuestionWords = uniq(contractQuestion.split(' ')).filter(
+        (w) => !IGNORE_WORDS.includes(w)
+      )
+      contractsToRemove = contractsToRemove.concat(
+        contractsToFilter.filter(
+          // Remove contracts with more than 2 matching (uncommon) words and a lower popularity score
+          (c2) => {
+            const significantOverlap =
+              // TODO: we should probably use a library for comparing strings/sentiments
+              uniq(
+                stripNonAlphaChars(c2.question.toLowerCase()).split(' ')
+              ).filter((word) => contractQuestionWords.includes(word)).length >
+              2
+            const lessPopular =
+              (c2.popularityScore ?? 0) < (contract.popularityScore ?? 0)
+            return (
+              (significantOverlap && lessPopular) ||
+              (allowExactSameContracts ? false : c2.id === contract.id)
+            )
+          }
+        )
+      )
+    })
+  // log(
+  //   'contracts to filter out',
+  //   contractsToRemove.map((c) => c.question)
+  // )
+
+  const returnContracts = contractsToFilter.filter(
+    (cf) => !contractsToRemove.map((c) => c.id).includes(cf.id)
+  )
+
+  return returnContracts
 }
 
 const fiveMinutes = 5 * 60 * 1000
@@ -116,3 +445,40 @@ function chooseRandomSubset(contracts: Contract[], count: number) {
   shuffle(contracts, rng)
   return contracts.slice(0, count)
 }
+
+function stripNonAlphaChars(str: string) {
+  return str.replace(/[^\w\s']|_/g, '').replace(/\s+/g, ' ')
+}
+
+const IGNORE_WORDS = [
+  'the',
+  'a',
+  'an',
+  'and',
+  'or',
+  'of',
+  'to',
+  'in',
+  'on',
+  'will',
+  'be',
+  'is',
+  'are',
+  'for',
+  'by',
+  'at',
+  'from',
+  'what',
+  'when',
+  'which',
+  'that',
+  'it',
+  'as',
+  'if',
+  'then',
+  'than',
+  'but',
+  'have',
+  'has',
+  'had',
+]
diff --git a/functions/src/weekly-portfolio-emails.ts b/functions/src/weekly-portfolio-emails.ts
index bcf6da17..215694eb 100644
--- a/functions/src/weekly-portfolio-emails.ts
+++ b/functions/src/weekly-portfolio-emails.ts
@@ -112,13 +112,12 @@ export async function sendPortfolioUpdateEmailsToAllUsers() {
       )
     )
   )
-  log('Found', contractsUsersBetOn.length, 'contracts')
-  let count = 0
   await Promise.all(
     privateUsersToSendEmailsTo.map(async (privateUser) => {
       const user = await getUser(privateUser.id)
       // Don't send to a user unless they're over 5 days old
-      if (!user || user.createdTime > Date.now() - 5 * DAY_MS) return
+      if (!user || user.createdTime > Date.now() - 5 * DAY_MS)
+        return await setEmailFlagAsSent(privateUser.id)
       const userBets = usersBets[privateUser.id] as Bet[]
       const contractsUserBetOn = contractsUsersBetOn.filter((contract) =>
         userBets.some((bet) => bet.contractId === contract.id)
@@ -219,13 +218,6 @@ export async function sendPortfolioUpdateEmailsToAllUsers() {
         (differences) => Math.abs(differences.profit)
       ).reverse()
 
-      log(
-        'Found',
-        investmentValueDifferences.length,
-        'investment differences for user',
-        privateUser.id
-      )
-
       const [winningInvestments, losingInvestments] = partition(
         investmentValueDifferences.filter(
           (diff) => diff.pastValue > 0.01 && Math.abs(diff.profit) > 1
@@ -245,29 +237,28 @@ export async function sendPortfolioUpdateEmailsToAllUsers() {
         usersToContractsCreated[privateUser.id].length === 0
       ) {
         log(
-          'No bets in last week, no market movers, no markets created. Not sending an email.'
+          `No bets in last week, no market movers, no markets created. Not sending an email to ${privateUser.email} .`
         )
-        await firestore.collection('private-users').doc(privateUser.id).update({
-          weeklyPortfolioUpdateEmailSent: true,
-        })
-        return
+        return await setEmailFlagAsSent(privateUser.id)
       }
+      // Set the flag beforehand just to be safe
+      await setEmailFlagAsSent(privateUser.id)
       await sendWeeklyPortfolioUpdateEmail(
         user,
         privateUser,
         topInvestments.concat(worstInvestments) as PerContractInvestmentsData[],
         performanceData
       )
-      await firestore.collection('private-users').doc(privateUser.id).update({
-        weeklyPortfolioUpdateEmailSent: true,
-      })
-      log('Sent weekly portfolio update email to', privateUser.email)
-      count++
-      log('sent out emails to users:', count)
     })
   )
 }
 
+async function setEmailFlagAsSent(privateUserId: string) {
+  await firestore.collection('private-users').doc(privateUserId).update({
+    weeklyPortfolioUpdateEmailSent: true,
+  })
+}
+
 export type PerContractInvestmentsData = {
   questionTitle: string
   questionUrl: string
diff --git a/functions/src/withdraw-liquidity.ts b/functions/src/withdraw-liquidity.ts
deleted file mode 100644
index 53974f7d..00000000
--- a/functions/src/withdraw-liquidity.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as admin from 'firebase-admin'
-import { z } from 'zod'
-
-import { CPMMContract } from '../../common/contract'
-import { User } from '../../common/user'
-import { subtractObjects } from '../../common/util/object'
-import { LiquidityProvision } from '../../common/liquidity-provision'
-import { getUserLiquidityShares } from '../../common/calculate-cpmm'
-import { Bet } from '../../common/bet'
-import { getProbability } from '../../common/calculate'
-import { noFees } from '../../common/fees'
-
-import { APIError, newEndpoint, validate } from './api'
-import { redeemShares } from './redeem-shares'
-
-const bodySchema = z.object({
-  contractId: z.string(),
-})
-
-export const withdrawliquidity = newEndpoint({}, async (req, auth) => {
-  const { contractId } = validate(bodySchema, req.body)
-
-  return await firestore
-    .runTransaction(async (trans) => {
-      const lpDoc = firestore.doc(`users/${auth.uid}`)
-      const lpSnap = await trans.get(lpDoc)
-      if (!lpSnap.exists) throw new APIError(400, 'User not found.')
-      const lp = lpSnap.data() as User
-
-      const contractDoc = firestore.doc(`contracts/${contractId}`)
-      const contractSnap = await trans.get(contractDoc)
-      if (!contractSnap.exists) throw new APIError(400, 'Contract not found.')
-      const contract = contractSnap.data() as CPMMContract
-
-      const liquidityCollection = firestore.collection(
-        `contracts/${contractId}/liquidity`
-      )
-
-      const liquiditiesSnap = await trans.get(liquidityCollection)
-
-      const liquidities = liquiditiesSnap.docs.map(
-        (doc) => doc.data() as LiquidityProvision
-      )
-
-      const userShares = getUserLiquidityShares(
-        auth.uid,
-        contract,
-        liquidities,
-        true
-      )
-
-      // zero all added amounts for now
-      // can add support for partial withdrawals in the future
-      liquiditiesSnap.docs
-        .filter(
-          (_, i) => !liquidities[i].isAnte && liquidities[i].userId === auth.uid
-        )
-        .forEach((doc) => trans.update(doc.ref, { amount: 0 }))
-
-      const payout = Math.min(...Object.values(userShares))
-      if (payout <= 0) return {}
-
-      const newBalance = lp.balance + payout
-      const newTotalDeposits = lp.totalDeposits + payout
-      trans.update(lpDoc, {
-        balance: newBalance,
-        totalDeposits: newTotalDeposits,
-      } as Partial<User>)
-
-      const newPool = subtractObjects(contract.pool, userShares)
-
-      const minPoolShares = Math.min(...Object.values(newPool))
-      const adjustedTotal = contract.totalLiquidity - payout
-
-      // total liquidity is a bogus number; use minPoolShares to prevent from going negative
-      const newTotalLiquidity = Math.max(adjustedTotal, minPoolShares)
-
-      trans.update(contractDoc, {
-        pool: newPool,
-        totalLiquidity: newTotalLiquidity,
-      })
-
-      const prob = getProbability(contract)
-
-      // surplus shares become user's bets
-      const bets = Object.entries(userShares)
-        .map(([outcome, shares]) =>
-          shares - payout < 1 // don't create bet if less than 1 share
-            ? undefined
-            : ({
-                userId: auth.uid,
-                contractId: contract.id,
-                amount:
-                  (outcome === 'YES' ? prob : 1 - prob) * (shares - payout),
-                shares: shares - payout,
-                outcome,
-                probBefore: prob,
-                probAfter: prob,
-                createdTime: Date.now(),
-                isLiquidityProvision: true,
-                fees: noFees,
-              } as Omit<Bet, 'id'>)
-        )
-        .filter((x) => x !== undefined)
-
-      for (const bet of bets) {
-        const doc = firestore.collection(`contracts/${contract.id}/bets`).doc()
-        trans.create(doc, { id: doc.id, ...bet })
-      }
-
-      return userShares
-    })
-    .then(async (result) => {
-      // redeem surplus bet with pre-existing bets
-      await redeemShares(auth.uid, contractId)
-      console.log('userid', auth.uid, 'withdraws', result)
-      return result
-    })
-})
-
-const firestore = admin.firestore()
diff --git a/og-image/api/_lib/template.ts b/og-image/api/_lib/template.ts
index f8e235b7..caba2657 100644
--- a/og-image/api/_lib/template.ts
+++ b/og-image/api/_lib/template.ts
@@ -14,11 +14,6 @@ export function getHtml(parsedReq: ParsedRequest) {
     numericValue,
     resolution,
   } = parsedReq
-  const MAX_QUESTION_CHARS = 100
-  const truncatedQuestion =
-    question.length > MAX_QUESTION_CHARS
-      ? question.slice(0, MAX_QUESTION_CHARS) + '...'
-      : question
   const hideAvatar = creatorAvatarUrl ? '' : 'hidden'
 
   let resolutionColor = 'text-primary'
@@ -69,7 +64,7 @@ export function getHtml(parsedReq: ParsedRequest) {
         <meta charset="utf-8">
         <title>Generated Image</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://cdn.tailwindcss.com"></script>
+        <script src="https://cdn.tailwindcss.com?plugins=line-clamp"></script>
     </head>
     <style>
         ${getTemplateCss(theme, fontSize)}
@@ -109,8 +104,8 @@ export function getHtml(parsedReq: ParsedRequest) {
       </div>
 
       <div class="flex flex-row justify-between gap-12 pt-36">
-        <div class="text-indigo-700 text-6xl leading-tight">
-          ${truncatedQuestion}
+        <div class="text-indigo-700 text-6xl leading-tight line-clamp-4">
+          ${question}
         </div>
         <div class="flex flex-col">
                     ${
@@ -127,7 +122,7 @@ export function getHtml(parsedReq: ParsedRequest) {
 
       <!-- Metadata -->
       <div class="absolute bottom-16">
-        <div class="text-gray-500 text-3xl max-w-[80vw]">
+        <div class="text-gray-500 text-3xl max-w-[80vw] line-clamp-2">
           ${metadata}
         </div>
       </div>
diff --git a/package.json b/package.json
index dd60d92b..dd721db6 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,5 @@
     "prettier": "2.7.1",
     "ts-node": "10.9.1",
     "typescript": "4.8.2"
-  },
-  "resolutions": {
-    "@types/react": "17.0.43"
   }
 }
diff --git a/web/components/NoSEO.tsx b/web/components/NoSEO.tsx
new file mode 100644
index 00000000..53437b10
--- /dev/null
+++ b/web/components/NoSEO.tsx
@@ -0,0 +1,10 @@
+import Head from 'next/head'
+
+/** Exclude page from search results */
+export function NoSEO() {
+  return (
+    <Head>
+      <meta name="robots" content="noindex,follow" />
+    </Head>
+  )
+}
diff --git a/web/components/SEO.tsx b/web/components/SEO.tsx
index 2c9327ec..6071a557 100644
--- a/web/components/SEO.tsx
+++ b/web/components/SEO.tsx
@@ -15,7 +15,7 @@ export function SEO(props: {
 
   return (
     <Head>
-      <title>{title} | Manifold Markets</title>
+      <title>{`${title} | Manifold Markets`}</title>
 
       <meta
         property="og:title"
diff --git a/web/components/add-funds-button.tsx b/web/components/add-funds-button.tsx
deleted file mode 100644
index b610bfee..00000000
--- a/web/components/add-funds-button.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import clsx from 'clsx'
-import { useEffect, useState } from 'react'
-
-import { useUser } from 'web/hooks/use-user'
-import { checkoutURL } from 'web/lib/service/stripe'
-import { FundsSelector } from './yes-no-selector'
-
-export function AddFundsButton(props: { className?: string }) {
-  const { className } = props
-  const user = useUser()
-
-  const [amountSelected, setAmountSelected] = useState<1000 | 2500 | 10000>(
-    2500
-  )
-
-  const location = useLocation()
-
-  return (
-    <>
-      <label
-        htmlFor="add-funds"
-        className={clsx(
-          'btn btn-xs btn-outline modal-button font-normal normal-case',
-          className
-        )}
-      >
-        Get M$
-      </label>
-      <input type="checkbox" id="add-funds" className="modal-toggle" />
-
-      <div className="modal">
-        <div className="modal-box">
-          <div className="mb-6 text-xl">Get Mana</div>
-
-          <div className="mb-6 text-gray-500">
-            Buy mana (M$) to trade in your favorite markets. <br /> (Not
-            redeemable for cash.)
-          </div>
-
-          <div className="mb-2 text-sm text-gray-500">Amount</div>
-          <FundsSelector
-            selected={amountSelected}
-            onSelect={setAmountSelected}
-          />
-
-          <div className="mt-6">
-            <div className="mb-1 text-sm text-gray-500">Price USD</div>
-            <div className="text-xl">
-              ${Math.round(amountSelected / 100)}.00
-            </div>
-          </div>
-
-          <div className="modal-action">
-            <label htmlFor="add-funds" className={clsx('btn btn-ghost')}>
-              Back
-            </label>
-
-            <form
-              action={checkoutURL(user?.id || '', amountSelected, location)}
-              method="POST"
-            >
-              <button
-                type="submit"
-                className="btn btn-primary bg-gradient-to-r from-indigo-500 to-blue-500 px-10 font-medium hover:from-indigo-600 hover:to-blue-600"
-              >
-                Checkout
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-// needed in next js
-// window not loaded at runtime
-const useLocation = () => {
-  const [href, setHref] = useState('')
-  useEffect(() => {
-    setHref(window.location.href)
-  }, [])
-  return href
-}
diff --git a/web/components/add-funds-modal.tsx b/web/components/add-funds-modal.tsx
new file mode 100644
index 00000000..cac21f96
--- /dev/null
+++ b/web/components/add-funds-modal.tsx
@@ -0,0 +1,58 @@
+import { manaToUSD } from 'common/util/format'
+import { useState } from 'react'
+import { useUser } from 'web/hooks/use-user'
+import { checkoutURL } from 'web/lib/service/stripe'
+import { Button } from './button'
+import { Modal } from './layout/modal'
+import { FundsSelector } from './yes-no-selector'
+
+export function AddFundsModal(props: {
+  open: boolean
+  setOpen(open: boolean): void
+}) {
+  const { open, setOpen } = props
+
+  const user = useUser()
+
+  const [amountSelected, setAmountSelected] = useState<1000 | 2500 | 10000>(
+    2500
+  )
+
+  return (
+    <Modal open={open} setOpen={setOpen} className="rounded-md bg-white p-8">
+      <div className="mb-6 text-xl text-indigo-700">Get Mana</div>
+
+      <div className="mb-6 text-gray-700">
+        Buy mana (M$) to trade in your favorite markets. <br /> (Not redeemable
+        for cash.)
+      </div>
+
+      <div className="mb-2 text-sm text-gray-500">Amount</div>
+      <FundsSelector selected={amountSelected} onSelect={setAmountSelected} />
+
+      <div className="mt-6">
+        <div className="mb-1 text-sm text-gray-500">Price USD</div>
+        <div className="text-xl">{manaToUSD(amountSelected)}</div>
+      </div>
+
+      <div className="modal-action">
+        <Button color="gray-white" onClick={() => setOpen(false)}>
+          Back
+        </Button>
+
+        <form
+          action={checkoutURL(
+            user?.id || '',
+            amountSelected,
+            window.location.href
+          )}
+          method="POST"
+        >
+          <Button type="submit" color="gradient">
+            Checkout
+          </Button>
+        </form>
+      </div>
+    </Modal>
+  )
+}
diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index 45c73c5e..8cd43369 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -1,11 +1,12 @@
 import clsx from 'clsx'
-import React from 'react'
+import React, { useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
-import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { Row } from './layout/row'
+import { AddFundsModal } from './add-funds-modal'
+import { Input } from './input'
 
 export function AmountInput(props: {
   amount: number | undefined
@@ -35,6 +36,8 @@ export function AmountInput(props: {
     onChange(isInvalid ? undefined : amount)
   }
 
+  const [addFundsModalOpen, setAddFundsModalOpen] = useState(false)
+
   return (
     <>
       <Col className={className}>
@@ -42,9 +45,9 @@ export function AmountInput(props: {
           <span className="text-greyscale-4 absolute top-1/2 my-auto ml-2 -translate-y-1/2">
             {label}
           </span>
-          <input
+          <Input
             className={clsx(
-              'placeholder:text-greyscale-4 border-greyscale-2 rounded-md pl-9',
+              'pl-9',
               error && 'input-error',
               'w-24 md:w-auto',
               inputClassName
@@ -66,9 +69,16 @@ export function AmountInput(props: {
             {error === 'Insufficient balance' ? (
               <>
                 Not enough funds.
-                <span className="ml-1 text-indigo-500">
-                  <SiteLink href="/add-funds">Buy more?</SiteLink>
-                </span>
+                <button
+                  className="ml-1 text-indigo-500 hover:underline hover:decoration-indigo-400"
+                  onClick={() => setAddFundsModalOpen(true)}
+                >
+                  Buy more?
+                </button>
+                <AddFundsModal
+                  open={addFundsModalOpen}
+                  setOpen={setAddFundsModalOpen}
+                />
               </>
             ) : (
               error
diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index 9867abab..cbe7bc1f 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -192,6 +192,7 @@ export function AnswerBetPanel(props: {
           isSubmitting={isSubmitting}
           disabled={!!betDisabled}
           color={'indigo'}
+          actionLabel="Buy"
         />
       ) : (
         <BetSignUpPrompt />
diff --git a/web/components/answers/answer-item.tsx b/web/components/answers/answer-item.tsx
index f1ab2f88..323a8b9b 100644
--- a/web/components/answers/answer-item.tsx
+++ b/web/components/answers/answer-item.tsx
@@ -10,6 +10,7 @@ import { formatPercent } from 'common/util/format'
 import { getDpmOutcomeProbability } from 'common/calculate-dpm'
 import { tradingAllowed } from 'web/lib/firebase/contracts'
 import { Linkify } from '../linkify'
+import { Input } from '../input'
 
 export function AnswerItem(props: {
   answer: Answer
@@ -74,8 +75,8 @@ export function AnswerItem(props: {
       <Row className="items-center justify-end gap-4 self-end sm:self-start">
         {!wasResolvedTo &&
           (showChoice === 'checkbox' ? (
-            <input
-              className="input input-bordered w-24 justify-self-end text-2xl"
+            <Input
+              className="w-24 justify-self-end !text-2xl"
               type="number"
               placeholder={`${roundedProb}`}
               maxLength={9}
diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
index a1cef4c3..6b35f74e 100644
--- a/web/components/answers/answers-panel.tsx
+++ b/web/components/answers/answers-panel.tsx
@@ -20,11 +20,11 @@ import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 import { Linkify } from 'web/components/linkify'
-import { BuyButton } from 'web/components/yes-no-selector'
-import { UserLink } from 'web/components/user-link'
 import { Button } from 'web/components/button'
 import { useAdmin } from 'web/hooks/use-admin'
 import { needsAdminToResolve } from 'web/pages/[username]/[contractSlug]'
+import { CATEGORY_COLORS } from '../charts/contract/choice'
+import { useChartAnswers } from '../charts/contract/choice'
 
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
@@ -38,6 +38,7 @@ export function AnswersPanel(props: {
   const answers = (useAnswers(contract.id) ?? contract.answers).filter(
     (a) => a.number != 0 || contract.outcomeType === 'MULTIPLE_CHOICE'
   )
+
   const hasZeroBetAnswers = answers.some((answer) => totalBets[answer.id] < 1)
 
   const [winningAnswers, losingAnswers] = partition(
@@ -104,6 +105,10 @@ export function AnswersPanel(props: {
     ? 'checkbox'
     : undefined
 
+  const colorSortedAnswer = useChartAnswers(contract).map(
+    (value, _index) => value.text
+  )
+
   return (
     <Col className="gap-3">
       {(resolveOption || resolution) &&
@@ -128,7 +133,12 @@ export function AnswersPanel(props: {
           )}
         >
           {answerItems.map((item) => (
-            <OpenAnswer key={item.id} answer={item} contract={contract} />
+            <OpenAnswer
+              key={item.id}
+              answer={item}
+              contract={contract}
+              colorIndex={colorSortedAnswer.indexOf(item.text)}
+            />
           ))}
           {hasZeroBetAnswers && !showAllAnswers && (
             <Button
@@ -147,11 +157,9 @@ export function AnswersPanel(props: {
         <div className="pb-4 text-gray-500">No answers yet...</div>
       )}
 
-      {outcomeType === 'FREE_RESPONSE' &&
-        tradingAllowed(contract) &&
-        (!resolveOption || resolveOption === 'CANCEL') && (
-          <CreateAnswerPanel contract={contract} />
-        )}
+      {outcomeType === 'FREE_RESPONSE' && tradingAllowed(contract) && (
+        <CreateAnswerPanel contract={contract} />
+      )}
 
       {(user?.id === creatorId || (isAdmin && needsAdminToResolve(contract))) &&
         !resolution && (
@@ -174,15 +182,18 @@ export function AnswersPanel(props: {
 function OpenAnswer(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   answer: Answer
+  colorIndex: number | undefined
 }) {
-  const { answer, contract } = props
-  const { username, avatarUrl, name, text } = answer
+  const { answer, contract, colorIndex } = props
+  const { username, avatarUrl, text } = answer
   const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
   const probPercent = formatPercent(prob)
   const [open, setOpen] = useState(false)
+  const color =
+    colorIndex != undefined ? CATEGORY_COLORS[colorIndex] : '#B1B1C7'
 
   return (
-    <Col className="border-base-200 bg-base-200 relative flex-1 rounded-md px-2">
+    <Col className="my-1 px-2">
       <Modal open={open} setOpen={setOpen} position="center">
         <AnswerBetPanel
           answer={answer}
@@ -193,40 +204,44 @@ function OpenAnswer(props: {
         />
       </Modal>
 
-      <div
-        className="pointer-events-none absolute -mx-2 h-full rounded-tl-md bg-green-600 bg-opacity-10"
-        style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
-      />
-
-      <Row className="my-4 gap-3">
-        <Avatar className="mx-1" username={username} avatarUrl={avatarUrl} />
-        <Col className="min-w-0 flex-1 lg:gap-1">
-          <div className="text-sm text-gray-500">
-            <UserLink username={username} name={name} /> answered
-          </div>
-
-          <Col className="align-items justify-between gap-4 sm:flex-row">
-            <Linkify className="whitespace-pre-line text-lg" text={text} />
-            <Row className="align-items items-center justify-end gap-4">
-              <span
-                className={clsx(
-                  'text-2xl',
-                  tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
-                )}
-              >
-                {probPercent}
-              </span>
-              <BuyButton
-                className={clsx(
-                  'btn-sm flex-initial !px-6 sm:flex',
-                  tradingAllowed(contract) ? '' : '!hidden'
-                )}
+      <Col
+        className={clsx(
+          'bg-greyscale-1 relative w-full rounded-lg transition-all',
+          tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5'
+        )}
+      >
+        <Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">
+          <Row>
+            <Avatar
+              className="mt-0.5 mr-2 inline h-5 w-5 border border-transparent transition-transform hover:border-none"
+              username={username}
+              avatarUrl={avatarUrl}
+            />
+            <Linkify
+              className="text-md cursor-pointer whitespace-pre-line"
+              text={text}
+            />
+          </Row>
+          <Row className="gap-2">
+            <div className="my-auto text-xl">{probPercent}</div>
+            {tradingAllowed(contract) && (
+              <Button
+                size="2xs"
+                color="gray-outline"
                 onClick={() => setOpen(true)}
-              />
-            </Row>
-          </Col>
-        </Col>
-      </Row>
+                className="my-auto"
+              >
+                BUY
+              </Button>
+            )}
+          </Row>
+        </Row>
+        <hr
+          color={color}
+          className="absolute z-0 h-full w-full rounded-l-lg border-none opacity-30"
+          style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
+        />
+      </Col>
     </Col>
   )
 }
diff --git a/web/components/answers/create-answer-panel.tsx b/web/components/answers/create-answer-panel.tsx
index 58f55327..4012e587 100644
--- a/web/components/answers/create-answer-panel.tsx
+++ b/web/components/answers/create-answer-panel.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx'
 import React, { useState } from 'react'
-import Textarea from 'react-expanding-textarea'
 import { findBestMatch } from 'string-similarity'
 
 import { FreeResponseContract } from 'common/contract'
@@ -26,6 +25,7 @@ import { MAX_ANSWER_LENGTH } from 'common/answer'
 import { withTracking } from 'web/lib/service/analytics'
 import { lowerCase } from 'lodash'
 import { Button } from '../button'
+import { ExpandingInput } from '../expanding-input'
 
 export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
   const { contract } = props
@@ -122,10 +122,10 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
     <Col className="gap-4 rounded">
       <Col className="flex-1 gap-2 px-4 xl:px-0">
         <div className="mb-1">Add your answer</div>
-        <Textarea
+        <ExpandingInput
           value={text}
           onChange={(e) => changeAnswer(e.target.value)}
-          className="textarea textarea-bordered w-full resize-none"
+          className="w-full"
           placeholder="Type your answer..."
           rows={1}
           maxLength={MAX_ANSWER_LENGTH}
diff --git a/web/components/answers/multiple-choice-answers.tsx b/web/components/answers/multiple-choice-answers.tsx
index c2857eb2..bdc61022 100644
--- a/web/components/answers/multiple-choice-answers.tsx
+++ b/web/components/answers/multiple-choice-answers.tsx
@@ -1,8 +1,8 @@
 import { MAX_ANSWER_LENGTH } from 'common/answer'
-import Textarea from 'react-expanding-textarea'
 import { XIcon } from '@heroicons/react/solid'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
+import { ExpandingInput } from '../expanding-input'
 
 export function MultipleChoiceAnswers(props: {
   answers: string[]
@@ -27,10 +27,10 @@ export function MultipleChoiceAnswers(props: {
       {answers.map((answer, i) => (
         <Row className="mb-2 items-center gap-2 align-middle">
           {i + 1}.{' '}
-          <Textarea
+          <ExpandingInput
             value={answer}
             onChange={(e) => setAnswer(i, e.target.value)}
-            className="textarea textarea-bordered ml-2 w-full resize-none"
+            className="ml-2 w-full"
             placeholder="Type your answer..."
             rows={1}
             maxLength={MAX_ANSWER_LENGTH}
diff --git a/web/components/arrange-home.tsx b/web/components/arrange-home.tsx
index 45c8a588..740e24ed 100644
--- a/web/components/arrange-home.tsx
+++ b/web/components/arrange-home.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx'
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 import { MenuIcon } from '@heroicons/react/solid'
 import { toast } from 'react-hot-toast'
+import { XCircleIcon } from '@heroicons/react/outline'
 
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Subtitle } from 'web/components/subtitle'
 import { keyBy } from 'lodash'
-import { XCircleIcon } from '@heroicons/react/outline'
 import { Button } from './button'
 import { updateUser } from 'web/lib/firebase/users'
 import { leaveGroup } from 'web/lib/firebase/groups'
diff --git a/web/components/auth-context.tsx b/web/components/auth-context.tsx
index 19ced0b2..223fe123 100644
--- a/web/components/auth-context.tsx
+++ b/web/components/auth-context.tsx
@@ -68,11 +68,11 @@ export function AuthProvider(props: {
   }, [setAuthUser, serverUser])
 
   useEffect(() => {
-    if (authUser != null) {
+    if (authUser) {
       // Persist to local storage, to reduce login blink next time.
       // Note: Cap on localStorage size is ~5mb
       localStorage.setItem(CACHED_USER_KEY, JSON.stringify(authUser))
-    } else {
+    } else if (authUser === null) {
       localStorage.removeItem(CACHED_USER_KEY)
     }
   }, [authUser])
diff --git a/web/components/badge-display.tsx b/web/components/badge-display.tsx
new file mode 100644
index 00000000..df101c7d
--- /dev/null
+++ b/web/components/badge-display.tsx
@@ -0,0 +1,62 @@
+import { User } from 'common/user'
+import { useEffect, useState } from 'react'
+import { getBadgesByRarity } from 'common/badge'
+import { Row } from 'web/components/layout/row'
+import clsx from 'clsx'
+import { BadgesModal } from 'web/components/profile/badges-modal'
+import { ParsedUrlQuery } from 'querystring'
+
+export const goldClassName = 'text-amber-400'
+export const silverClassName = 'text-gray-500'
+export const bronzeClassName = 'text-amber-900'
+
+export function BadgeDisplay(props: {
+  user: User | undefined | null
+  query: ParsedUrlQuery
+}) {
+  const { user, query } = props
+  const [showBadgesModal, setShowBadgesModal] = useState(false)
+
+  useEffect(() => {
+    const showBadgesModal = query['show'] == 'badges'
+    setShowBadgesModal(showBadgesModal)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  // get number of badges of each rarity type
+  const badgesByRarity = getBadgesByRarity(user)
+  const badgesByRarityItems = Object.entries(badgesByRarity).map(
+    ([rarity, numBadges]) => {
+      return (
+        <Row
+          key={rarity}
+          className={clsx(
+            'items-center gap-2',
+            rarity === 'bronze'
+              ? bronzeClassName
+              : rarity === 'silver'
+              ? silverClassName
+              : goldClassName
+          )}
+        >
+          <span className={clsx('-m-0.5 text-lg')}>•</span>
+          <span className="text-xs">{numBadges}</span>
+        </Row>
+      )
+    }
+  )
+  return (
+    <Row
+      className={'cursor-pointer gap-2'}
+      onClick={() => setShowBadgesModal(true)}
+    >
+      {badgesByRarityItems}
+      {user && (
+        <BadgesModal
+          isOpen={showBadgesModal}
+          setOpen={setShowBadgesModal}
+          user={user}
+        />
+      )}
+    </Row>
+  )
+}
diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index 3c401767..82f1789d 100644
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@@ -16,7 +16,7 @@ import { Button } from 'web/components/button'
 import { BetSignUpPrompt } from './sign-up-prompt'
 import { User } from 'web/lib/firebase/users'
 import { SellRow } from './sell-row'
-import { useUnfilledBets } from 'web/hooks/use-bets'
+import { useUnfilledBetsAndBalanceByUserId } from 'web/hooks/use-bets'
 import { PlayMoneyDisclaimer } from './play-money-disclaimer'
 
 /** Button that opens BetPanel in a new modal */
@@ -100,7 +100,9 @@ export function SignedInBinaryMobileBetting(props: {
   user: User
 }) {
   const { contract, user } = props
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
+  const { unfilledBets, balanceByUserId } = useUnfilledBetsAndBalanceByUserId(
+    contract.id
+  )
 
   return (
     <>
@@ -111,6 +113,7 @@ export function SignedInBinaryMobileBetting(props: {
             contract={contract as CPMMBinaryContract}
             user={user}
             unfilledBets={unfilledBets}
+            balanceByUserId={balanceByUserId}
             mobileView={true}
           />
         </Col>
diff --git a/web/components/bet-inline.tsx b/web/components/bet-inline.tsx
index a8f4d718..7362f144 100644
--- a/web/components/bet-inline.tsx
+++ b/web/components/bet-inline.tsx
@@ -10,7 +10,7 @@ import { BuyAmountInput } from './amount-input'
 import { Button } from './button'
 import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
-import { useUnfilledBets } from 'web/hooks/use-bets'
+import { useUnfilledBetsAndBalanceByUserId } from 'web/hooks/use-bets'
 import { useUser } from 'web/hooks/use-user'
 import { BetSignUpPrompt } from './sign-up-prompt'
 import { getCpmmProbability } from 'common/calculate-cpmm'
@@ -34,14 +34,17 @@ export function BetInline(props: {
   const [error, setError] = useState<string>()
 
   const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
+  const { unfilledBets, balanceByUserId } = useUnfilledBetsAndBalanceByUserId(
+    contract.id
+  )
 
   const { newPool, newP } = getBinaryCpmmBetInfo(
     outcome ?? 'YES',
     amount ?? 0,
     contract,
     undefined,
-    unfilledBets
+    unfilledBets,
+    balanceByUserId
   )
   const resultProb = getCpmmProbability(newPool, newP)
   useEffect(() => setProbAfter(resultProb), [setProbAfter, resultProb])
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index beb7168a..72a4fec3 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -25,7 +25,7 @@ import {
   NoLabel,
   YesLabel,
 } from './outcome-label'
-import { getProbability } from 'common/calculate'
+import { getContractBetMetrics, getProbability } from 'common/calculate'
 import { useFocus } from 'web/hooks/use-focus'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { calculateCpmmSale, getCpmmProbability } from 'common/calculate-cpmm'
@@ -35,7 +35,7 @@ import { useSaveBinaryShares } from './use-save-binary-shares'
 import { BetSignUpPrompt } from './sign-up-prompt'
 import { ProbabilityOrNumericInput } from './probability-input'
 import { track } from 'web/lib/service/analytics'
-import { useUnfilledBets } from 'web/hooks/use-bets'
+import { useUnfilledBetsAndBalanceByUserId } from 'web/hooks/use-bets'
 import { LimitBets } from './limit-bets'
 import { PillButton } from './buttons/pill-button'
 import { YesNoSelector } from './yes-no-selector'
@@ -55,7 +55,9 @@ export function BetPanel(props: {
   const { contract, className } = props
   const user = useUser()
   const userBets = useUserContractBets(user?.id, contract.id)
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
+  const { unfilledBets, balanceByUserId } = useUnfilledBetsAndBalanceByUserId(
+    contract.id
+  )
   const { sharesOutcome } = useSaveBinaryShares(contract, userBets)
 
   const [isLimitOrder, setIsLimitOrder] = useState(false)
@@ -86,12 +88,14 @@ export function BetPanel(props: {
               contract={contract}
               user={user}
               unfilledBets={unfilledBets}
+              balanceByUserId={balanceByUserId}
             />
             <LimitOrderPanel
               hidden={!isLimitOrder}
               contract={contract}
               user={user}
               unfilledBets={unfilledBets}
+              balanceByUserId={balanceByUserId}
             />
           </>
         ) : (
@@ -117,7 +121,9 @@ export function SimpleBetPanel(props: {
   const user = useUser()
   const [isLimitOrder, setIsLimitOrder] = useState(false)
 
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
+  const { unfilledBets, balanceByUserId } = useUnfilledBetsAndBalanceByUserId(
+    contract.id
+  )
 
   return (
     <Col className={className}>
@@ -142,6 +148,7 @@ export function SimpleBetPanel(props: {
           contract={contract}
           user={user}
           unfilledBets={unfilledBets}
+          balanceByUserId={balanceByUserId}
           onBuySuccess={onBetSuccess}
         />
         <LimitOrderPanel
@@ -149,6 +156,7 @@ export function SimpleBetPanel(props: {
           contract={contract}
           user={user}
           unfilledBets={unfilledBets}
+          balanceByUserId={balanceByUserId}
           onBuySuccess={onBetSuccess}
         />
 
@@ -167,13 +175,21 @@ export function SimpleBetPanel(props: {
 export function BuyPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   user: User | null | undefined
-  unfilledBets: Bet[]
+  unfilledBets: LimitBet[]
+  balanceByUserId: { [userId: string]: number }
   hidden: boolean
   onBuySuccess?: () => void
   mobileView?: boolean
 }) {
-  const { contract, user, unfilledBets, hidden, onBuySuccess, mobileView } =
-    props
+  const {
+    contract,
+    user,
+    unfilledBets,
+    balanceByUserId,
+    hidden,
+    onBuySuccess,
+    mobileView,
+  } = props
 
   const initialProb = getProbability(contract)
   const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
@@ -261,7 +277,8 @@ export function BuyPanel(props: {
     betAmount ?? 0,
     contract,
     undefined,
-    unfilledBets as LimitBet[]
+    unfilledBets,
+    balanceByUserId
   )
 
   const [seeLimit, setSeeLimit] = useState(false)
@@ -395,6 +412,7 @@ export function BuyPanel(props: {
             disabled={!!betDisabled || outcome === undefined}
             size="xl"
             color={outcome === 'NO' ? 'red' : 'green'}
+            actionLabel="Wager"
           />
         )}
         <button
@@ -415,6 +433,7 @@ export function BuyPanel(props: {
             contract={contract}
             user={user}
             unfilledBets={unfilledBets}
+            balanceByUserId={balanceByUserId}
           />
           <LimitBets
             contract={contract}
@@ -430,11 +449,19 @@ export function BuyPanel(props: {
 function LimitOrderPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   user: User | null | undefined
-  unfilledBets: Bet[]
+  unfilledBets: LimitBet[]
+  balanceByUserId: { [userId: string]: number }
   hidden: boolean
   onBuySuccess?: () => void
 }) {
-  const { contract, user, unfilledBets, hidden, onBuySuccess } = props
+  const {
+    contract,
+    user,
+    unfilledBets,
+    balanceByUserId,
+    hidden,
+    onBuySuccess,
+  } = props
 
   const initialProb = getProbability(contract)
   const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
@@ -580,7 +607,8 @@ function LimitOrderPanel(props: {
     yesAmount,
     contract,
     yesLimitProb ?? initialProb,
-    unfilledBets as LimitBet[]
+    unfilledBets,
+    balanceByUserId
   )
   const yesReturnPercent = formatPercent(yesReturn)
 
@@ -594,7 +622,8 @@ function LimitOrderPanel(props: {
     noAmount,
     contract,
     noLimitProb ?? initialProb,
-    unfilledBets as LimitBet[]
+    unfilledBets,
+    balanceByUserId
   )
   const noReturnPercent = formatPercent(noReturn)
 
@@ -829,15 +858,25 @@ export function SellPanel(props: {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [wasSubmitted, setWasSubmitted] = useState(false)
 
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
+  const { unfilledBets, balanceByUserId } = useUnfilledBetsAndBalanceByUserId(
+    contract.id
+  )
 
-  const betDisabled = isSubmitting || !amount || error
+  const betDisabled = isSubmitting || !amount || error !== undefined
 
   // Sell all shares if remaining shares would be < 1
   const isSellingAllShares = amount === Math.floor(shares)
 
   const sellQuantity = isSellingAllShares ? shares : amount
 
+  const loanAmount = sumBy(userBets, (bet) => bet.loanAmount ?? 0)
+  const soldShares = Math.min(sellQuantity ?? 0, shares)
+  const saleFrac = soldShares / shares
+  const loanPaid = saleFrac * loanAmount
+
+  const { invested } = getContractBetMetrics(contract, userBets)
+  const costBasis = invested * saleFrac
+
   async function submitSell() {
     if (!user || !amount) return
 
@@ -880,10 +919,26 @@ export function SellPanel(props: {
     contract,
     sellQuantity ?? 0,
     sharesOutcome,
-    unfilledBets
+    unfilledBets,
+    balanceByUserId
   )
+  const netProceeds = saleValue - loanPaid
+  const profit = saleValue - costBasis
   const resultProb = getCpmmProbability(cpmmState.pool, cpmmState.p)
 
+  const getValue = getMappedValue(contract)
+  const rawDifference = Math.abs(getValue(resultProb) - getValue(initialProb))
+  const displayedDifference =
+    contract.outcomeType === 'PSEUDO_NUMERIC'
+      ? formatLargeNumber(rawDifference)
+      : formatPercent(rawDifference)
+  const probChange = Math.abs(resultProb - initialProb)
+
+  const warning =
+    probChange >= 0.3
+      ? `Are you sure you want to move the market by ${displayedDifference}?`
+      : undefined
+
   const openUserBets = userBets.filter((bet) => !bet.isSold && !bet.sale)
   const [yesBets, noBets] = partition(
     openUserBets,
@@ -923,14 +978,18 @@ export function SellPanel(props: {
         label="Qty"
         error={error}
         disabled={isSubmitting}
-        inputClassName="w-full"
+        inputClassName="w-full ml-1"
       />
 
       <Col className="mt-3 w-full gap-3 text-sm">
         <Row className="items-center justify-between gap-2 text-gray-500">
-          Sale proceeds
+          Sale amount
           <span className="text-neutral">{formatMoney(saleValue)}</span>
         </Row>
+        <Row className="items-center justify-between gap-2 text-gray-500">
+          Profit
+          <span className="text-neutral">{formatMoney(profit)}</span>
+        </Row>
         <Row className="items-center justify-between">
           <div className="text-gray-500">
             {isPseudoNumeric ? 'Estimated value' : 'Probability'}
@@ -941,24 +1000,33 @@ export function SellPanel(props: {
             {format(resultProb)}
           </div>
         </Row>
+        {loanPaid !== 0 && (
+          <>
+            <Row className="mt-6 items-center justify-between gap-2 text-gray-500">
+              Loan payment
+              <span className="text-neutral">{formatMoney(-loanPaid)}</span>
+            </Row>
+            <Row className="items-center justify-between gap-2 text-gray-500">
+              Net proceeds
+              <span className="text-neutral">{formatMoney(netProceeds)}</span>
+            </Row>
+          </>
+        )}
       </Col>
 
       <Spacer h={8} />
 
-      <button
-        className={clsx(
-          'btn flex-1',
-          betDisabled
-            ? 'btn-disabled'
-            : sharesOutcome === 'YES'
-            ? 'btn-primary'
-            : 'border-none bg-red-400 hover:bg-red-500',
-          isSubmitting ? 'loading' : ''
-        )}
-        onClick={betDisabled ? undefined : submitSell}
-      >
-        {isSubmitting ? 'Submitting...' : 'Submit sell'}
-      </button>
+      <WarningConfirmationButton
+        marketType="binary"
+        amount={undefined}
+        warning={warning}
+        isSubmitting={isSubmitting}
+        onSubmit={betDisabled ? undefined : submitSell}
+        disabled={!!betDisabled}
+        size="xl"
+        color="blue"
+        actionLabel={`Sell ${Math.floor(soldShares)} shares`}
+      />
 
       {wasSubmitted && <div className="mt-4">Sell submitted!</div>}
     </>
diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index c2773741..2b1f9243 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { useMemo, useState } from 'react'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
 
-import { Bet } from 'web/lib/firebase/bets'
+import { Bet, MAX_USER_BETS_LOADED } from 'web/lib/firebase/bets'
 import { User } from 'web/lib/firebase/users'
 import {
   formatMoney,
@@ -17,6 +17,7 @@ import {
   Contract,
   contractPath,
   getBinaryProbPercent,
+  MAX_USER_BET_CONTRACTS_LOADED,
 } from 'web/lib/firebase/contracts'
 import { Row } from './layout/row'
 import { sellBet } from 'web/lib/firebase/api'
@@ -37,7 +38,7 @@ import { NumericContract } from 'common/contract'
 import { formatNumericProbability } from 'common/pseudo-numeric'
 import { useUser } from 'web/hooks/use-user'
 import { useUserBets } from 'web/hooks/use-user-bets'
-import { useUnfilledBets } from 'web/hooks/use-bets'
+import { useUnfilledBetsAndBalanceByUserId } from 'web/hooks/use-bets'
 import { LimitBet } from 'common/bet'
 import { Pagination } from './pagination'
 import { LimitOrderTable } from './limit-bets'
@@ -50,6 +51,7 @@ import {
   usePersistentState,
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
+import { ExclamationIcon } from '@heroicons/react/outline'
 
 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
@@ -80,6 +82,10 @@ export function BetsList(props: { user: User }) {
     return contractList ? keyBy(contractList, 'id') : undefined
   }, [contractList])
 
+  const loadedPartialData =
+    userBets?.length === MAX_USER_BETS_LOADED ||
+    contractList?.length === MAX_USER_BET_CONTRACTS_LOADED
+
   const [sort, setSort] = usePersistentState<BetSort>('newest', {
     key: 'bets-list-sort',
     store: storageStore(safeLocalStorage()),
@@ -160,26 +166,38 @@ export function BetsList(props: { user: User }) {
     unsettled,
     (c) => contractsMetrics[c.id].payout
   )
-  const currentNetInvestment = sumBy(
-    unsettled,
-    (c) => contractsMetrics[c.id].netPayout
-  )
+  const currentLoan = sumBy(unsettled, (c) => contractsMetrics[c.id].loan)
 
   const investedProfitPercent =
     ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100
 
   return (
     <Col>
-      <Row className="justify-between gap-4 sm:flex-row">
-        <Col>
-          <div className="text-greyscale-6 text-xs sm:text-sm">
-            Investment value
-          </div>
-          <div className="text-lg">
-            {formatMoney(currentNetInvestment)}{' '}
-            <ProfitBadge profitPercent={investedProfitPercent} />
-          </div>
-        </Col>
+      {loadedPartialData && (
+        <Row className="my-4 items-center gap-2 self-start rounded bg-yellow-50 p-4">
+          <ExclamationIcon className="h-5 w-5" />
+          <div>Partial trade data only</div>
+        </Row>
+      )}
+
+      <Col className="justify-between gap-4 sm:flex-row">
+        <Row className="gap-4">
+          <Col>
+            <div className="text-greyscale-6 text-xs sm:text-sm">
+              Investment value
+            </div>
+            <div className="text-lg">
+              {formatMoney(currentBetsValue)}{' '}
+              <ProfitBadge profitPercent={investedProfitPercent} />
+            </div>
+          </Col>
+          <Col>
+            <div className="text-greyscale-6 text-xs sm:text-sm">
+              Total loans
+            </div>
+            <div className="text-lg">{formatMoney(currentLoan)}</div>
+          </Col>
+        </Row>
 
         <Row className="gap-2">
           <select
@@ -206,7 +224,7 @@ export function BetsList(props: { user: User }) {
             <option value="closeTime">Close date</option>
           </select>
         </Row>
-      </Row>
+      </Col>
 
       <Col className="mt-6 divide-y">
         {displayedContracts.length === 0 ? (
@@ -407,7 +425,9 @@ export function ContractBetsTable(props: {
   const isNumeric = outcomeType === 'NUMERIC'
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
 
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
+  const { unfilledBets, balanceByUserId } = useUnfilledBetsAndBalanceByUserId(
+    contract.id
+  )
 
   return (
     <div className="overflow-x-auto">
@@ -456,6 +476,7 @@ export function ContractBetsTable(props: {
               contract={contract}
               isYourBet={isYourBets}
               unfilledBets={unfilledBets}
+              balanceByUserId={balanceByUserId}
             />
           ))}
         </tbody>
@@ -470,8 +491,10 @@ function BetRow(props: {
   saleBet?: Bet
   isYourBet: boolean
   unfilledBets: LimitBet[]
+  balanceByUserId: { [userId: string]: number }
 }) {
-  const { bet, saleBet, contract, isYourBet, unfilledBets } = props
+  const { bet, saleBet, contract, isYourBet, unfilledBets, balanceByUserId } =
+    props
   const {
     amount,
     outcome,
@@ -499,9 +522,9 @@ function BetRow(props: {
     } else if (contract.isResolved) {
       return resolvedPayout(contract, bet)
     } else {
-      return calculateSaleAmount(contract, bet, unfilledBets)
+      return calculateSaleAmount(contract, bet, unfilledBets, balanceByUserId)
     }
-  }, [contract, bet, saleBet, unfilledBets])
+  }, [contract, bet, saleBet, unfilledBets, balanceByUserId])
 
   const saleDisplay = isAnte ? (
     'ANTE'
@@ -540,6 +563,7 @@ function BetRow(props: {
               contract={contract}
               bet={bet}
               unfilledBets={unfilledBets}
+              balanceByUserId={balanceByUserId}
             />
           )}
       </td>
@@ -585,8 +609,9 @@ function SellButton(props: {
   contract: Contract
   bet: Bet
   unfilledBets: LimitBet[]
+  balanceByUserId: { [userId: string]: number }
 }) {
-  const { contract, bet, unfilledBets } = props
+  const { contract, bet, unfilledBets, balanceByUserId } = props
   const { outcome, shares, loanAmount } = bet
 
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -600,10 +625,16 @@ function SellButton(props: {
     contract,
     outcome,
     shares,
-    unfilledBets
+    unfilledBets,
+    balanceByUserId
   )
 
-  const saleAmount = calculateSaleAmount(contract, bet, unfilledBets)
+  const saleAmount = calculateSaleAmount(
+    contract,
+    bet,
+    unfilledBets,
+    balanceByUserId
+  )
   const profit = saleAmount - bet.amount
 
   return (
@@ -612,7 +643,7 @@ function SellButton(props: {
         label: 'Sell',
         disabled: isSubmitting,
       }}
-      submitBtn={{ className: 'btn-primary', label: 'Sell' }}
+      submitBtn={{ label: 'Sell', color: 'green' }}
       onSubmit={async () => {
         setIsSubmitting(true)
         await sellBet({ contractId: contract.id, betId: bet.id })
diff --git a/web/components/button.tsx b/web/components/button.tsx
index ecd8e1c7..b64b8daf 100644
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactNode } from 'react'
 import clsx from 'clsx'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 
 export type SizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 export type ColorType =
@@ -9,18 +10,57 @@ export type ColorType =
   | 'indigo'
   | 'yellow'
   | 'gray'
+  | 'gray-outline'
   | 'gradient'
   | 'gray-white'
   | 'highlight-blue'
 
+const sizeClasses = {
+  '2xs': 'px-2 py-1 text-xs',
+  xs: 'px-2.5 py-1.5 text-sm',
+  sm: 'px-3 py-2 text-sm',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-4 py-2 text-base',
+  xl: 'px-6 py-2.5 text-base font-semibold',
+  '2xl': 'px-6 py-3 text-xl font-semibold',
+}
+
+export function buttonClass(size: SizeType, color: ColorType | 'override') {
+  return clsx(
+    'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
+    sizeClasses[size],
+    color === 'green' &&
+      'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
+    color === 'red' &&
+      'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
+    color === 'yellow' &&
+      'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
+    color === 'blue' &&
+      'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
+    color === 'indigo' &&
+      'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
+    color === 'gray' &&
+      'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
+    color === 'gray-outline' &&
+      'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
+    color === 'gradient' &&
+      'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
+    color === 'gray-white' &&
+      'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
+    color === 'highlight-blue' &&
+      'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
+  )
+}
+
 export function Button(props: {
   className?: string
   onClick?: MouseEventHandler<any> | undefined
   children?: ReactNode
   size?: SizeType
-  color?: ColorType
+  color?: ColorType | 'override'
   type?: 'button' | 'reset' | 'submit'
   disabled?: boolean
+  loading?: boolean
 }) {
   const {
     children,
@@ -30,47 +70,17 @@ export function Button(props: {
     color = 'indigo',
     type = 'button',
     disabled = false,
+    loading,
   } = props
 
-  const sizeClasses = {
-    '2xs': 'px-2 py-1 text-xs',
-    xs: 'px-2.5 py-1.5 text-sm',
-    sm: 'px-3 py-2 text-sm',
-    md: 'px-4 py-2 text-sm',
-    lg: 'px-4 py-2 text-base',
-    xl: 'px-6 py-2.5 text-base font-semibold',
-    '2xl': 'px-6 py-3 text-xl font-semibold',
-  }[size]
-
   return (
     <button
       type={type}
-      className={clsx(
-        'font-md items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
-        sizeClasses,
-        color === 'green' &&
-          'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
-        color === 'red' &&
-          'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
-        color === 'yellow' &&
-          'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
-        color === 'blue' &&
-          'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
-        color === 'indigo' &&
-          'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
-        color === 'gray' &&
-          'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
-        color === 'gradient' &&
-          'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
-        color === 'gray-white' &&
-          'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
-        color === 'highlight-blue' &&
-          'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none',
-        className
-      )}
-      disabled={disabled}
+      className={clsx(buttonClass(size, color), className)}
+      disabled={disabled || loading}
       onClick={onClick}
     >
+      {loading && <LoadingIndicator className={'mr-2 border-gray-500'} />}
       {children}
     </button>
   )
diff --git a/web/components/card.tsx b/web/components/card.tsx
new file mode 100644
index 00000000..ab0d692d
--- /dev/null
+++ b/web/components/card.tsx
@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+
+export function Card(props: JSX.IntrinsicElements['div']) {
+  const { children, className, ...rest } = props
+  return (
+    <div
+      className={clsx(
+        'cursor-pointer rounded-lg border bg-white transition-shadow hover:shadow-md focus:shadow-md',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/web/components/challenges/create-challenge-modal.tsx b/web/components/challenges/create-challenge-modal.tsx
index 6c810a44..f8d91a7b 100644
--- a/web/components/challenges/create-challenge-modal.tsx
+++ b/web/components/challenges/create-challenge-modal.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import React, { useEffect, useState } from 'react'
-import { LinkIcon, SwitchVerticalIcon } from '@heroicons/react/outline'
-import toast from 'react-hot-toast'
+import { SwitchVerticalIcon } from '@heroicons/react/outline'
 
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
@@ -16,16 +15,16 @@ import { SiteLink } from 'web/components/site-link'
 import { formatMoney } from 'common/util/format'
 import { NoLabel, YesLabel } from '../outcome-label'
 import { QRCode } from '../qr-code'
-import { copyToClipboard } from 'web/lib/util/copy'
 import { AmountInput } from '../amount-input'
 import { getProbability } from 'common/calculate'
 import { createMarket } from 'web/lib/firebase/api'
 import { removeUndefinedProps } from 'common/util/object'
 import { FIXED_ANTE } from 'common/economy'
-import Textarea from 'react-expanding-textarea'
 import { useTextEditor } from 'web/components/editor'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import { track } from 'web/lib/service/analytics'
+import { CopyLinkButton } from '../copy-link-button'
+import { ExpandingInput } from '../expanding-input'
 
 type challengeInfo = {
   amount: number
@@ -154,9 +153,9 @@ function CreateChallengeForm(props: {
             {contract ? (
               <span className="underline">{contract.question}</span>
             ) : (
-              <Textarea
+              <ExpandingInput
                 placeholder="e.g. Will a Democrat be the next president?"
-                className="input input-bordered mt-1 w-full resize-none"
+                className="mt-1 w-full"
                 autoFocus={true}
                 maxLength={MAX_QUESTION_LENGTH}
                 value={challengeInfo.question}
@@ -302,16 +301,7 @@ function CreateChallengeForm(props: {
           <Title className="!my-0" text="Challenge Created!" />
 
           <div>Share the challenge using the link.</div>
-          <button
-            onClick={() => {
-              copyToClipboard(challengeSlug)
-              toast('Link copied to clipboard!')
-            }}
-            className={'btn btn-outline mb-4 whitespace-nowrap normal-case'}
-          >
-            <LinkIcon className={'mr-2 h-5 w-5'} />
-            Copy link
-          </button>
+          <CopyLinkButton url={challengeSlug} />
 
           <QRCode url={challengeSlug} className="self-center" />
           <Row className={'gap-1 text-gray-500'}>
diff --git a/web/components/charity/charity-card.tsx b/web/components/charity/charity-card.tsx
index fc327b9f..5222f284 100644
--- a/web/components/charity/charity-card.tsx
+++ b/web/components/charity/charity-card.tsx
@@ -6,6 +6,8 @@ import { Charity } from 'common/charity'
 import { useCharityTxns } from 'web/hooks/use-charity-txns'
 import { manaToUSD } from '../../../common/util/format'
 import { Row } from '../layout/row'
+import { Col } from '../layout/col'
+import { Card } from '../card'
 
 export function CharityCard(props: { charity: Charity; match?: number }) {
   const { charity } = props
@@ -15,43 +17,44 @@ export function CharityCard(props: { charity: Charity; match?: number }) {
   const raised = sumBy(txns, (txn) => txn.amount)
 
   return (
-    <Link href={`/charity/${slug}`} passHref>
-      <div className="card card-compact transition:shadow flex-1 cursor-pointer border-2 bg-white hover:shadow-md">
-        <Row className="mt-6 mb-2">
-          {tags?.includes('Featured') && <FeaturedBadge />}
-        </Row>
-        <div className="px-8">
-          <figure className="relative h-32">
-            {photo ? (
-              <Image src={photo} alt="" layout="fill" objectFit="contain" />
-            ) : (
-              <div className="h-full w-full bg-gradient-to-r from-slate-300 to-indigo-200" />
-            )}
-          </figure>
-        </div>
-        <div className="card-body">
-          {/* <h3 className="card-title line-clamp-3">{name}</h3> */}
-          <div className="line-clamp-4 text-sm">{preview}</div>
-          {raised > 0 && (
-            <>
-              <Row className="mt-4 flex-1 items-end justify-center gap-6 text-gray-900">
-                <Row className="items-baseline gap-1">
-                  <span className="text-3xl font-semibold">
-                    {formatUsd(raised)}
-                  </span>
-                  raised
-                </Row>
-                {/* {match && (
+    <Link href={`/charity/${slug}`}>
+      <a className="flex-1">
+        <Card className="!rounded-2xl">
+          <Row className="mt-6 mb-2">
+            {tags?.includes('Featured') && <FeaturedBadge />}
+          </Row>
+          <div className="px-8">
+            <figure className="relative h-32">
+              {photo ? (
+                <Image src={photo} alt="" layout="fill" objectFit="contain" />
+              ) : (
+                <div className="h-full w-full bg-gradient-to-r from-slate-300 to-indigo-200" />
+              )}
+            </figure>
+          </div>
+          <Col className="p-8">
+            <div className="line-clamp-4 text-sm">{preview}</div>
+            {raised > 0 && (
+              <>
+                <Row className="mt-4 flex-1 items-end justify-center gap-6 text-gray-900">
+                  <Row className="items-baseline gap-1">
+                    <span className="text-3xl font-semibold">
+                      {formatUsd(raised)}
+                    </span>
+                    raised
+                  </Row>
+                  {/* {match && (
                   <Col className="text-gray-500">
                     <span className="text-xl">+{formatUsd(match)}</span>
                     <span className="">match</span>
                   </Col>
                 )} */}
-              </Row>
-            </>
-          )}
-        </div>
-      </div>
+                </Row>
+              </>
+            )}
+          </Col>
+        </Card>
+      </a>
     </Link>
   )
 }
diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx
index c9b3bb0b..ab3c7ab9 100644
--- a/web/components/charts/contract/binary.tsx
+++ b/web/components/charts/contract/binary.tsx
@@ -9,8 +9,6 @@ import { BinaryContract } from 'common/contract'
 import { DAY_MS } from 'common/util/time'
 import {
   TooltipProps,
-  MARGIN_X,
-  MARGIN_Y,
   getDateRange,
   getRightmostVisibleDate,
   formatDateInRange,
@@ -20,6 +18,10 @@ import { HistoryPoint, SingleValueHistoryChart } from '../generic-charts'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 const getBetPoints = (bets: Bet[]) => {
   return sortBy(bets, (b) => b.createdTime).map((b) => ({
     x: new Date(b.createdTime),
@@ -29,9 +31,9 @@ const getBetPoints = (bets: Bet[]) => {
 }
 
 const BinaryChartTooltip = (props: TooltipProps<Date, HistoryPoint<Bet>>) => {
-  const { data, mouseX, xScale } = props
+  const { data, x, xScale } = props
   const [start, end] = xScale.domain()
-  const d = xScale.invert(mouseX)
+  const d = xScale.invert(x)
   return (
     <Row className="items-center gap-2">
       {data.obj && <Avatar size="xs" avatarUrl={data.obj.userAvatarUrl} />}
@@ -73,14 +75,15 @@ export const BinaryContractChart = (props: {
     <SingleValueHistoryChart
       w={width}
       h={height}
+      margin={MARGIN}
       xScale={xScale}
       yScale={yScale}
+      yKind="percent"
       data={data}
       color="#11b981"
       curve={curveStepAfter}
       onMouseOver={onMouseOver}
       Tooltip={BinaryChartTooltip}
-      pct
     />
   )
 }
diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx
index 99e02fa8..0355b4b5 100644
--- a/web/components/charts/contract/choice.tsx
+++ b/web/components/charts/contract/choice.tsx
@@ -10,8 +10,6 @@ import { getOutcomeProbability } from 'common/calculate'
 import { DAY_MS } from 'common/util/time'
 import {
   TooltipProps,
-  MARGIN_X,
-  MARGIN_Y,
   getDateRange,
   getRightmostVisibleDate,
   formatPct,
@@ -21,64 +19,65 @@ import { MultiPoint, MultiValueHistoryChart } from '../generic-charts'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
-// thanks to https://observablehq.com/@jonhelfman/optimal-orders-for-choosing-categorical-colors
-const CATEGORY_COLORS = [
-  '#00b8dd',
-  '#eecafe',
-  '#874c62',
-  '#6457ca',
-  '#f773ba',
-  '#9c6bbc',
-  '#a87744',
-  '#af8a04',
-  '#bff9aa',
-  '#f3d89d',
-  '#c9a0f5',
-  '#ff00e5',
-  '#9dc6f7',
-  '#824475',
-  '#d973cc',
-  '#bc6808',
-  '#056e70',
-  '#677932',
-  '#00b287',
-  '#c8ab6c',
-  '#a2fb7a',
-  '#f8db68',
-  '#14675a',
-  '#8288f4',
-  '#fe1ca0',
-  '#ad6aff',
-  '#786306',
-  '#9bfbaf',
-  '#b00cf7',
-  '#2f7ec5',
-  '#4b998b',
-  '#42fa0e',
-  '#5b80a1',
-  '#962d9d',
-  '#3385ff',
-  '#48c5ab',
-  '#b2c873',
-  '#4cf9a4',
-  '#00ffff',
-  '#3cca73',
-  '#99ae17',
-  '#7af5cf',
-  '#52af45',
-  '#fbb80f',
-  '#29971b',
-  '#187c9a',
-  '#00d539',
-  '#bbfa1a',
-  '#61f55c',
-  '#cabc03',
-  '#ff9000',
-  '#779100',
-  '#bcfd6f',
-  '#70a560',
+export const CATEGORY_COLORS = [
+  '#7eb0d5',
+  '#fd7f6f',
+  '#b2e061',
+  '#bd7ebe',
+  '#ffb55a',
+  '#ffee65',
+  '#beb9db',
+  '#fdcce5',
+  '#8bd3c7',
+  '#bddfb7',
+  '#e2e3f3',
+  '#fafafa',
+  '#9fcdeb',
+  '#d3d3d3',
+  '#b1a296',
+  '#e1bdb6',
+  '#f2dbc0',
+  '#fae5d3',
+  '#c5e0ec',
+  '#e0f0ff',
+  '#ffddcd',
+  '#fbd5e2',
+  '#f2e7e5',
+  '#ffe7ba',
+  '#eed9c4',
+  '#ea9999',
+  '#f9cb9c',
+  '#ffe599',
+  '#b6d7a8',
+  '#a2c4c9',
+  '#9fc5e8',
+  '#b4a7d6',
+  '#d5a6bd',
+  '#e06666',
+  '#f6b26b',
+  '#ffd966',
+  '#93c47d',
+  '#76a5af',
+  '#6fa8dc',
+  '#8e7cc3',
+  '#c27ba0',
+  '#cc0000',
+  '#e69138',
+  '#f1c232',
+  '#6aa84f',
+  '#45818e',
+  '#3d85c6',
+  '#674ea7',
+  '#a64d79',
+  '#990000',
+  '#b45f06',
+  '#bf9000',
 ]
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 const getTrackedAnswers = (
   contract: FreeResponseContract | MultipleChoiceContract,
   topN: number
@@ -142,6 +141,15 @@ const Legend = (props: { className?: string; items: LegendItem[] }) => {
   )
 }
 
+export function useChartAnswers(
+  contract: FreeResponseContract | MultipleChoiceContract
+) {
+  return useMemo(
+    () => getTrackedAnswers(contract, CATEGORY_COLORS.length),
+    [contract]
+  )
+}
+
 export const ChoiceContractChart = (props: {
   contract: FreeResponseContract | MultipleChoiceContract
   bets: Bet[]
@@ -151,10 +159,7 @@ export const ChoiceContractChart = (props: {
 }) => {
   const { contract, bets, width, height, onMouseOver } = props
   const [start, end] = getDateRange(contract)
-  const answers = useMemo(
-    () => getTrackedAnswers(contract, CATEGORY_COLORS.length),
-    [contract]
-  )
+  const answers = useChartAnswers(contract)
   const betPoints = useMemo(() => getBetPoints(answers, bets), [answers, bets])
   const data = useMemo(
     () => [
@@ -178,9 +183,9 @@ export const ChoiceContractChart = (props: {
 
   const ChoiceTooltip = useMemo(
     () => (props: TooltipProps<Date, MultiPoint<Bet>>) => {
-      const { data, mouseX, xScale } = props
+      const { data, x, xScale } = props
       const [start, end] = xScale.domain()
-      const d = xScale.invert(mouseX)
+      const d = xScale.invert(x)
       const legendItems = sortBy(
         data.y.map((p, i) => ({
           color: CATEGORY_COLORS[i],
@@ -211,14 +216,15 @@ export const ChoiceContractChart = (props: {
     <MultiValueHistoryChart
       w={width}
       h={height}
+      margin={MARGIN}
       xScale={xScale}
       yScale={yScale}
+      yKind="percent"
       data={data}
       colors={CATEGORY_COLORS}
       curve={curveStepAfter}
       onMouseOver={onMouseOver}
       Tooltip={ChoiceTooltip}
-      pct
     />
   )
 }
diff --git a/web/components/charts/contract/numeric.tsx b/web/components/charts/contract/numeric.tsx
index 2d62cb11..8c2e9388 100644
--- a/web/components/charts/contract/numeric.tsx
+++ b/web/components/charts/contract/numeric.tsx
@@ -6,9 +6,13 @@ import { formatLargeNumber } from 'common/util/format'
 import { getDpmOutcomeProbabilities } from 'common/calculate-dpm'
 import { NumericContract } from 'common/contract'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
-import { TooltipProps, MARGIN_X, MARGIN_Y, formatPct } from '../helpers'
+import { TooltipProps, formatPct } from '../helpers'
 import { DistributionPoint, DistributionChart } from '../generic-charts'
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 const getNumericChartData = (contract: NumericContract) => {
   const { totalShares, bucketCount, min, max } = contract
   const step = (max - min) / bucketCount
@@ -22,11 +26,11 @@ const getNumericChartData = (contract: NumericContract) => {
 const NumericChartTooltip = (
   props: TooltipProps<number, DistributionPoint>
 ) => {
-  const { data, mouseX, xScale } = props
-  const x = xScale.invert(mouseX)
+  const { data, x, xScale } = props
+  const amount = xScale.invert(x)
   return (
     <>
-      <span className="text-semibold">{formatLargeNumber(x)}</span>
+      <span className="text-semibold">{formatLargeNumber(amount)}</span>
       <span className="text-greyscale-6">{formatPct(data.y, 2)}</span>
     </>
   )
@@ -48,6 +52,7 @@ export const NumericContractChart = (props: {
     <DistributionChart
       w={width}
       h={height}
+      margin={MARGIN}
       xScale={xScale}
       yScale={yScale}
       data={data}
diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx
index e3edb11f..93e3d32f 100644
--- a/web/components/charts/contract/pseudo-numeric.tsx
+++ b/web/components/charts/contract/pseudo-numeric.tsx
@@ -11,8 +11,6 @@ import { PseudoNumericContract } from 'common/contract'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
 import {
   TooltipProps,
-  MARGIN_X,
-  MARGIN_Y,
   getDateRange,
   getRightmostVisibleDate,
   formatDateInRange,
@@ -21,6 +19,10 @@ import { HistoryPoint, SingleValueHistoryChart } from '../generic-charts'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 // mqp: note that we have an idiosyncratic version of 'log scale'
 // contracts. the values are stored "linearly" and can include zero.
 // as a result, we have to do some weird-looking stuff in this code
@@ -43,9 +45,9 @@ const getBetPoints = (bets: Bet[], scaleP: (p: number) => number) => {
 const PseudoNumericChartTooltip = (
   props: TooltipProps<Date, HistoryPoint<Bet>>
 ) => {
-  const { data, mouseX, xScale } = props
+  const { data, x, xScale } = props
   const [start, end] = xScale.domain()
-  const d = xScale.invert(mouseX)
+  const d = xScale.invert(x)
   return (
     <Row className="items-center gap-2">
       {data.obj && <Avatar size="xs" avatarUrl={data.obj.userAvatarUrl} />}
@@ -95,6 +97,7 @@ export const PseudoNumericContractChart = (props: {
     <SingleValueHistoryChart
       w={width}
       h={height}
+      margin={MARGIN}
       xScale={xScale}
       yScale={yScale}
       data={data}
diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx
index cb930484..d9a561e6 100644
--- a/web/components/charts/generic-charts.tsx
+++ b/web/components/charts/generic-charts.tsx
@@ -7,6 +7,8 @@ import {
   CurveFactory,
   SeriesPoint,
   curveLinear,
+  curveStepBefore,
+  curveStepAfter,
   stack,
   stackOrderReverse,
 } from 'd3-shape'
@@ -14,34 +16,62 @@ import { range } from 'lodash'
 
 import {
   ContinuousScale,
+  Margin,
   SVGChart,
   AreaPath,
   AreaWithTopStroke,
   Point,
+  SliceMarker,
+  TooltipParams,
   TooltipComponent,
+  computeColorStops,
   formatPct,
 } from './helpers'
 import { useEvent } from 'web/hooks/use-event'
+import { formatMoney } from 'common/util/format'
+import { nanoid } from 'nanoid'
 
 export type MultiPoint<T = unknown> = Point<Date, number[], T>
 export type HistoryPoint<T = unknown> = Point<Date, number, T>
 export type DistributionPoint<T = unknown> = Point<number, number, T>
+export type ValueKind = 'm$' | 'percent' | 'amount'
+
+type SliceExtent = { y0: number; y1: number }
+
+const interpolateY = (
+  curve: CurveFactory,
+  x: number,
+  x0: number,
+  x1: number,
+  y0: number,
+  y1: number
+) => {
+  if (curve === curveLinear) {
+    const p = (x - x0) / (x1 - x0)
+    return y0 * (1 - p) + y1 * p
+  } else if (curve === curveStepAfter) {
+    return y0
+  } else if (curve === curveStepBefore) {
+    return y1
+  }
+}
 
 const getTickValues = (min: number, max: number, n: number) => {
   const step = (max - min) / (n - 1)
   return [min, ...range(1, n - 1).map((i) => min + step * i), max]
 }
 
-const betAtPointSelector = <X, Y, P extends Point<X, Y>>(
+const dataAtPointSelector = <X, Y, P extends Point<X, Y>>(
   data: P[],
   xScale: ContinuousScale<X>
 ) => {
   const bisect = bisector((p: P) => p.x)
   return (posX: number) => {
     const x = xScale.invert(posX)
-    const item = data[bisect.left(data, x) - 1]
-    const result = item ? { ...item, x: posX } : undefined
-    return result
+    const i = bisect.left(data, x)
+    const prev = data[i - 1] as P | undefined
+    const next = data[i] as P | undefined
+    return { prev, next, x: posX }
   }
 }
 
@@ -50,14 +80,16 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   w: number
   h: number
   color: string
+  margin: Margin
   xScale: ScaleContinuousNumeric<number, number>
   yScale: ScaleContinuousNumeric<number, number>
   curve?: CurveFactory
   onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<number, P>
 }) => {
-  const { color, data, yScale, w, h, curve, Tooltip } = props
+  const { data, w, h, color, margin, yScale, curve, Tooltip } = props
 
+  const [ttParams, setTTParams] = useState<TooltipParams<P>>()
   const [viewXScale, setViewXScale] =
     useState<ScaleContinuousNumeric<number, number>>()
   const xScale = viewXScale ?? props.xScale
@@ -72,7 +104,18 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
     return { xAxis, yAxis }
   }, [w, xScale, yScale])
 
-  const onMouseOver = useEvent(betAtPointSelector(data, xScale))
+  const selector = dataAtPointSelector(data, xScale)
+  const onMouseOver = useEvent((mouseX: number, mouseY: number) => {
+    const p = selector(mouseX)
+    props.onMouseOver?.(p.prev)
+    if (p.prev) {
+      setTTParams({ x: mouseX, y: mouseY, data: p.prev })
+    } else {
+      setTTParams(undefined)
+    }
+  })
+
+  const onMouseLeave = useEvent(() => setTTParams(undefined))
 
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
@@ -89,10 +132,13 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
     <SVGChart
       w={w}
       h={h}
+      margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
+      ttParams={ttParams}
       onSelect={onSelect}
       onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
       Tooltip={Tooltip}
     >
       <AreaWithTopStroke
@@ -112,15 +158,17 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   w: number
   h: number
   colors: readonly string[]
+  margin: Margin
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  yKind?: ValueKind
   curve?: CurveFactory
   onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<Date, P>
-  pct?: boolean
 }) => {
-  const { colors, data, yScale, w, h, curve, Tooltip, pct } = props
+  const { data, w, h, colors, margin, yScale, yKind, curve, Tooltip } = props
 
+  const [ttParams, setTTParams] = useState<TooltipParams<P>>()
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
 
@@ -131,29 +179,47 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
 
   const { xAxis, yAxis } = useMemo(() => {
     const [min, max] = yScale.domain()
-    const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
+    const nTicks = h < 200 ? 3 : 5
+    const pctTickValues = getTickValues(min, max, nTicks)
     const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
-    const yAxis = pct
-      ? axisLeft<number>(yScale)
-          .tickValues(pctTickValues)
-          .tickFormat((n) => formatPct(n))
-      : axisLeft<number>(yScale)
+    const yAxis =
+      yKind === 'percent'
+        ? axisLeft<number>(yScale)
+            .tickValues(pctTickValues)
+            .tickFormat((n) => formatPct(n))
+        : yKind === 'm$'
+        ? axisLeft<number>(yScale)
+            .ticks(nTicks)
+            .tickFormat((n) => formatMoney(n))
+        : axisLeft<number>(yScale).ticks(nTicks)
     return { xAxis, yAxis }
-  }, [w, h, pct, xScale, yScale])
+  }, [w, h, yKind, xScale, yScale])
 
   const series = useMemo(() => {
     const d3Stack = stack<P, number>()
       .keys(range(0, Math.max(...data.map(({ y }) => y.length))))
-      .value(({ y }, o) => y[o])
+      .value(({ y }, k) => y[k])
       .order(stackOrderReverse)
     return d3Stack(data)
   }, [data])
 
-  const onMouseOver = useEvent(betAtPointSelector(data, xScale))
+  const selector = dataAtPointSelector(data, xScale)
+  const onMouseOver = useEvent((mouseX: number, mouseY: number) => {
+    const p = selector(mouseX)
+    props.onMouseOver?.(p.prev)
+    if (p.prev) {
+      setTTParams({ x: mouseX, y: mouseY, data: p.prev })
+    } else {
+      setTTParams(undefined)
+    }
+  })
+
+  const onMouseLeave = useEvent(() => setTTParams(undefined))
 
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
       const [mouseX0, mouseX1] = ev.selection as [number, number]
+
       setViewXScale(() =>
         xScale.copy().domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
       )
@@ -166,10 +232,13 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
     <SVGChart
       w={w}
       h={h}
+      margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
+      ttParams={ttParams}
       onSelect={onSelect}
       onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
       Tooltip={Tooltip}
     >
       {series.map((s, i) => (
@@ -191,66 +260,137 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   data: P[]
   w: number
   h: number
-  color: string
+  color: string | ((p: P) => string)
+  margin: Margin
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  yKind?: ValueKind
   curve?: CurveFactory
   onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<Date, P>
   pct?: boolean
 }) => {
-  const { color, data, yScale, w, h, curve, Tooltip, pct } = props
+  const { data, w, h, color, margin, yScale, yKind, Tooltip } = props
+  const curve = props.curve ?? curveLinear
 
+  const [mouse, setMouse] = useState<TooltipParams<P> & SliceExtent>()
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
 
   const px = useCallback((p: P) => xScale(p.x), [xScale])
-  const py0 = yScale(yScale.domain()[0])
+  const py0 = yScale(0)
   const py1 = useCallback((p: P) => yScale(p.y), [yScale])
 
   const { xAxis, yAxis } = useMemo(() => {
     const [min, max] = yScale.domain()
-    const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
+    const nTicks = h < 200 ? 3 : 5
+    const pctTickValues = getTickValues(min, max, nTicks)
     const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
-    const yAxis = pct
-      ? axisLeft<number>(yScale)
-          .tickValues(pctTickValues)
-          .tickFormat((n) => formatPct(n))
-      : axisLeft<number>(yScale)
+    const yAxis =
+      yKind === 'percent'
+        ? axisLeft<number>(yScale)
+            .tickValues(pctTickValues)
+            .tickFormat((n) => formatPct(n))
+        : yKind === 'm$'
+        ? axisLeft<number>(yScale)
+            .ticks(nTicks)
+            .tickFormat((n) => formatMoney(n))
+        : axisLeft<number>(yScale).ticks(nTicks)
     return { xAxis, yAxis }
-  }, [w, h, pct, xScale, yScale])
+  }, [w, h, yKind, xScale, yScale])
 
-  const onMouseOver = useEvent(betAtPointSelector(data, xScale))
+  const selector = dataAtPointSelector(data, xScale)
+  const onMouseOver = useEvent((mouseX: number) => {
+    const p = selector(mouseX)
+    props.onMouseOver?.(p.prev)
+    const x0 = p.prev ? xScale(p.prev.x) : xScale.range()[0]
+    const x1 = p.next ? xScale(p.next.x) : xScale.range()[1]
+    const y0 = p.prev ? yScale(p.prev.y) : yScale.range()[0]
+    const y1 = p.next ? yScale(p.next.y) : yScale.range()[1]
+    const markerY = interpolateY(curve, mouseX, x0, x1, y0, y1)
+    if (p.prev && markerY) {
+      setMouse({
+        x: mouseX,
+        y: markerY,
+        y0: py0,
+        y1: markerY,
+        data: p.prev,
+      })
+    } else {
+      setMouse(undefined)
+    }
+  })
+
+  const onMouseLeave = useEvent(() => setMouse(undefined))
 
   const onSelect = useEvent((ev: D3BrushEvent<P>) => {
     if (ev.selection) {
       const [mouseX0, mouseX1] = ev.selection as [number, number]
-      setViewXScale(() =>
-        xScale.copy().domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
-      )
+      const newViewXScale = xScale
+        .copy()
+        .domain([xScale.invert(mouseX0), xScale.invert(mouseX1)])
+      setViewXScale(() => newViewXScale)
+
+      const dataInView = data.filter((p) => {
+        const x = newViewXScale(p.x)
+        return x >= 0 && x <= w
+      })
+      const yMin = Math.min(...dataInView.map((p) => p.y))
+      const yMax = Math.max(...dataInView.map((p) => p.y))
+
+      // Prevents very small selections from being too zoomed in
+      if (yMax - yMin > 0.05) {
+        // adds a little padding to the top and bottom of the selection
+        yScale.domain([yMin - (yMax - yMin) * 0.1, yMax + (yMax - yMin) * 0.1])
+      }
     } else {
       setViewXScale(undefined)
+      yScale.domain([0, 1])
     }
   })
 
+  const gradientId = useMemo(() => nanoid(), [])
+  const stops = useMemo(
+    () =>
+      typeof color !== 'string' ? computeColorStops(data, color, px) : null,
+    [color, data, px]
+  )
+
   return (
     <SVGChart
       w={w}
       h={h}
+      margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
+      ttParams={
+        mouse ? { x: mouse.x, y: mouse.y, data: mouse.data } : undefined
+      }
       onSelect={onSelect}
       onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
       Tooltip={Tooltip}
     >
+      {stops && (
+        <defs>
+          <linearGradient gradientUnits="userSpaceOnUse" id={gradientId}>
+            {stops.map((s, i) => (
+              <stop key={i} offset={`${s.x / w}`} stopColor={s.color} />
+            ))}
+          </linearGradient>
+        </defs>
+      )}
       <AreaWithTopStroke
-        color={color}
+        color={typeof color === 'string' ? color : `url(#${gradientId})`}
         data={data}
         px={px}
         py0={py0}
         py1={py1}
         curve={curve ?? curveLinear}
       />
+      {mouse && (
+        <SliceMarker color="#5BCEFF" x={mouse.x} y0={mouse.y0} y1={mouse.y1} />
+      )}
     </SVGChart>
   )
 }
diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx
index b40ab7db..684f6d76 100644
--- a/web/components/charts/helpers.tsx
+++ b/web/components/charts/helpers.tsx
@@ -1,12 +1,4 @@
-import {
-  ReactNode,
-  SVGProps,
-  memo,
-  useRef,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import { ReactNode, SVGProps, memo, useRef, useEffect, useMemo } from 'react'
 import { pointer, select } from 'd3-selection'
 import { Axis, AxisScale } from 'd3-axis'
 import { brushX, D3BrushEvent } from 'd3-brush'
@@ -17,6 +9,7 @@ import clsx from 'clsx'
 
 import { Contract } from 'common/contract'
 import { useMeasureSize } from 'web/hooks/use-measure-size'
+import { useIsMobile } from 'web/hooks/use-is-mobile'
 
 export type Point<X, Y, T = unknown> = { x: X; y: Y; obj?: T }
 
@@ -27,11 +20,12 @@ export interface ContinuousScale<T> extends AxisScale<T> {
 export type XScale<P> = P extends Point<infer X, infer _> ? AxisScale<X> : never
 export type YScale<P> = P extends Point<infer _, infer Y> ? AxisScale<Y> : never
 
-export const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
-export const MARGIN_X = MARGIN.right + MARGIN.left
-export const MARGIN_Y = MARGIN.top + MARGIN.bottom
-const MARGIN_STYLE = `${MARGIN.top}px ${MARGIN.right}px ${MARGIN.bottom}px ${MARGIN.left}px`
-const MARGIN_XFORM = `translate(${MARGIN.left}, ${MARGIN.top})`
+export type Margin = {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
 
 export const XAxis = <X,>(props: { w: number; h: number; axis: Axis<X> }) => {
   const { h, axis } = props
@@ -55,8 +49,6 @@ export const YAxis = <Y,>(props: { w: number; h: number; axis: Axis<Y> }) => {
   useEffect(() => {
     if (axisRef.current != null) {
       select(axisRef.current)
-        .transition()
-        .duration(250)
         .call(axis)
         .call((g) =>
           g.selectAll('.tick line').attr('x2', w).attr('stroke-opacity', 0.1)
@@ -100,14 +92,14 @@ const AreaPathInternal = <P,>(
 export const AreaPath = memo(AreaPathInternal) as typeof AreaPathInternal
 
 export const AreaWithTopStroke = <P,>(props: {
-  color: string
   data: P[]
+  color: string
   px: number | ((p: P) => number)
   py0: number | ((p: P) => number)
   py1: number | ((p: P) => number)
   curve: CurveFactory
 }) => {
-  const { color, data, px, py0, py1, curve } = props
+  const { data, color, px, py0, py1, curve } = props
   return (
     <g>
       <AreaPath
@@ -124,23 +116,60 @@ export const AreaWithTopStroke = <P,>(props: {
   )
 }
 
+export const SliceMarker = (props: {
+  color: string
+  x: number
+  y0: number
+  y1: number
+}) => {
+  const { color, x, y0, y1 } = props
+  return (
+    <g>
+      <line stroke="white" strokeWidth={1} x1={x} x2={x} y1={y0} y2={y1} />
+      <circle
+        stroke="white"
+        strokeWidth={1}
+        fill={color}
+        cx={x}
+        cy={y1}
+        r={5}
+      />
+    </g>
+  )
+}
+
 export const SVGChart = <X, TT>(props: {
   children: ReactNode
   w: number
   h: number
+  margin: Margin
   xAxis: Axis<X>
   yAxis: Axis<number>
+  ttParams: TooltipParams<TT> | undefined
   onSelect?: (ev: D3BrushEvent<any>) => void
-  onMouseOver?: (mouseX: number, mouseY: number) => TT | undefined
+  onMouseOver?: (mouseX: number, mouseY: number) => void
+  onMouseLeave?: () => void
   Tooltip?: TooltipComponent<X, TT>
 }) => {
-  const { children, w, h, xAxis, yAxis, onMouseOver, onSelect, Tooltip } = props
-  const [mouse, setMouse] = useState<{ x: number; y: number; data: TT }>()
+  const {
+    children,
+    w,
+    h,
+    margin,
+    xAxis,
+    yAxis,
+    ttParams,
+    onSelect,
+    onMouseOver,
+    onMouseLeave,
+    Tooltip,
+  } = props
   const tooltipMeasure = useMeasureSize()
   const overlayRef = useRef<SVGGElement>(null)
-  const innerW = w - MARGIN_X
-  const innerH = h - MARGIN_Y
+  const innerW = w - (margin.left + margin.right)
+  const innerH = h - (margin.top + margin.bottom)
   const clipPathId = useMemo(() => nanoid(), [])
+  const isMobile = useIsMobile()
 
   const justSelected = useRef(false)
   useEffect(() => {
@@ -155,7 +184,7 @@ export const SVGChart = <X, TT>(props: {
         if (!justSelected.current) {
           justSelected.current = true
           onSelect(ev)
-          setMouse(undefined)
+          onMouseLeave?.()
           if (overlayRef.current) {
             select(overlayRef.current).call(brush.clear)
           }
@@ -171,43 +200,49 @@ export const SVGChart = <X, TT>(props: {
         .select('.selection')
         .attr('shape-rendering', 'null')
     }
-  }, [innerW, innerH, onSelect])
+  }, [innerW, innerH, onSelect, onMouseLeave])
 
   const onPointerMove = (ev: React.PointerEvent) => {
     if (ev.pointerType === 'mouse' && onMouseOver) {
       const [x, y] = pointer(ev)
-      const data = onMouseOver(x, y)
-      if (data !== undefined) {
-        setMouse({ x, y, data })
-      } else {
-        setMouse(undefined)
-      }
+      onMouseOver(x, y)
+    }
+  }
+
+  const onTouchMove = (ev: React.TouchEvent) => {
+    if (onMouseOver) {
+      const touch = ev.touches[0]
+      const x = touch.pageX - ev.currentTarget.getBoundingClientRect().left
+      const y = touch.pageY - ev.currentTarget.getBoundingClientRect().top
+      onMouseOver(x, y)
     }
   }
 
   const onPointerLeave = () => {
-    setMouse(undefined)
+    onMouseLeave?.()
   }
 
   return (
     <div className="relative overflow-hidden">
-      {mouse && Tooltip && (
+      {ttParams && Tooltip && (
         <TooltipContainer
           setElem={tooltipMeasure.setElem}
+          margin={margin}
           pos={getTooltipPosition(
-            mouse.x,
-            mouse.y,
+            ttParams.x,
+            ttParams.y,
             innerW,
             innerH,
-            tooltipMeasure.width,
-            tooltipMeasure.height
+            tooltipMeasure.width ?? 140,
+            tooltipMeasure.height ?? 35,
+            isMobile ?? false
           )}
         >
           <Tooltip
             xScale={xAxis.scale()}
-            mouseX={mouse.x}
-            mouseY={mouse.y}
-            data={mouse.data}
+            x={ttParams.x}
+            y={ttParams.y}
+            data={ttParams.data}
           />
         </TooltipContainer>
       )}
@@ -215,22 +250,34 @@ export const SVGChart = <X, TT>(props: {
         <clipPath id={clipPathId}>
           <rect x={0} y={0} width={innerW} height={innerH} />
         </clipPath>
-        <g transform={MARGIN_XFORM}>
+        <g transform={`translate(${margin.left}, ${margin.top})`}>
           <XAxis axis={xAxis} w={innerW} h={innerH} />
           <YAxis axis={yAxis} w={innerW} h={innerH} />
           <g clipPath={`url(#${clipPathId})`}>{children}</g>
-          <g
-            ref={overlayRef}
-            x="0"
-            y="0"
-            width={innerW}
-            height={innerH}
-            fill="none"
-            pointerEvents="all"
-            onPointerEnter={onPointerMove}
-            onPointerMove={onPointerMove}
-            onPointerLeave={onPointerLeave}
-          />
+          {!isMobile ? (
+            <g
+              ref={overlayRef}
+              x="0"
+              y="0"
+              width={innerW}
+              height={innerH}
+              fill="none"
+              pointerEvents="all"
+              onPointerEnter={onPointerMove}
+              onPointerMove={onPointerMove}
+              onPointerLeave={onPointerLeave}
+            />
+          ) : (
+            <rect
+              x="0"
+              y="0"
+              width={innerW}
+              height={innerH}
+              fill="transparent"
+              onTouchMove={onTouchMove}
+              onTouchEnd={onPointerLeave}
+            />
+          )}
         </g>
       </svg>
     </div>
@@ -244,41 +291,45 @@ export const getTooltipPosition = (
   mouseY: number,
   containerWidth: number,
   containerHeight: number,
-  tooltipWidth?: number,
-  tooltipHeight?: number
+  tooltipWidth: number,
+  tooltipHeight: number,
+  isMobile: boolean
 ) => {
   let left = mouseX + 12
-  let bottom = containerHeight - mouseY + 12
+  let bottom = !isMobile
+    ? containerHeight - mouseY + 12
+    : containerHeight - tooltipHeight + 12
   if (tooltipWidth != null) {
     const overflow = left + tooltipWidth - containerWidth
     if (overflow > 0) {
       left -= overflow
     }
   }
+
   if (tooltipHeight != null) {
     const overflow = tooltipHeight - mouseY
     if (overflow > 0) {
       bottom -= overflow
     }
   }
+
   return { left, bottom }
 }
 
-export type TooltipProps<X, T> = {
-  mouseX: number
-  mouseY: number
+export type TooltipParams<T> = { x: number; y: number; data: T }
+export type TooltipProps<X, T> = TooltipParams<T> & {
   xScale: ContinuousScale<X>
-  data: T
 }
 
 export type TooltipComponent<X, T> = React.ComponentType<TooltipProps<X, T>>
 export const TooltipContainer = (props: {
   setElem: (e: HTMLElement | null) => void
   pos: TooltipPosition
+  margin: Margin
   className?: string
   children: React.ReactNode
 }) => {
-  const { setElem, pos, className, children } = props
+  const { setElem, pos, margin, className, children } = props
   return (
     <div
       ref={setElem}
@@ -286,13 +337,43 @@ export const TooltipContainer = (props: {
         className,
         'pointer-events-none absolute z-10 whitespace-pre rounded border border-gray-200 bg-white/80 p-2 px-4 py-2 text-xs sm:text-sm'
       )}
-      style={{ margin: MARGIN_STYLE, ...pos }}
+      style={{
+        margin: `${margin.top}px ${margin.right}px ${margin.bottom}px ${margin.left}px`,
+        ...pos,
+      }}
     >
       {children}
     </div>
   )
 }
 
+export const computeColorStops = <P,>(
+  data: P[],
+  pc: (p: P) => string,
+  px: (p: P) => number
+) => {
+  const segments: { x: number; color: string }[] = []
+  let currOffset = 0
+  let currColor = pc(data[0])
+  for (const p of data) {
+    const c = pc(p)
+    if (c !== currColor) {
+      segments.push({ x: currOffset, color: currColor })
+      currOffset = px(p)
+      currColor = c
+    }
+  }
+  segments.push({ x: currOffset, color: currColor })
+
+  const stops: { x: number; color: string }[] = []
+  stops.push({ x: segments[0].x, color: segments[0].color })
+  for (const s of segments.slice(1)) {
+    stops.push({ x: s.x, color: stops[stops.length - 1].color })
+    stops.push({ x: s.x, color: s.color })
+  }
+  return stops
+}
+
 export const getDateRange = (contract: Contract) => {
   const { createdTime, closeTime, resolutionTime } = contract
   const isClosed = !!closeTime && Date.now() > closeTime
diff --git a/web/components/charts/stats.tsx b/web/components/charts/stats.tsx
index a630657a..d43fcb98 100644
--- a/web/components/charts/stats.tsx
+++ b/web/components/charts/stats.tsx
@@ -6,9 +6,13 @@ import dayjs from 'dayjs'
 import { formatPercent } from 'common/util/format'
 import { Row } from '../layout/row'
 import { HistoryPoint, SingleValueHistoryChart } from './generic-charts'
-import { TooltipProps, MARGIN_X, MARGIN_Y } from './helpers'
+import { TooltipProps } from './helpers'
 import { SizedContainer } from 'web/components/sized-container'
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 const getPoints = (startDate: number, dailyValues: number[]) => {
   const startDateDayJs = dayjs(startDate)
   return dailyValues.map((y, i) => ({
@@ -18,8 +22,8 @@ const getPoints = (startDate: number, dailyValues: number[]) => {
 }
 
 const DailyCountTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
-  const { data, mouseX, xScale } = props
-  const d = xScale.invert(mouseX)
+  const { data, x, xScale } = props
+  const d = xScale.invert(x)
   return (
     <Row className="items-center gap-2">
       <span className="font-semibold">{dayjs(d).format('MMM DD')}</span>
@@ -29,8 +33,8 @@ const DailyCountTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
 }
 
 const DailyPercentTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
-  const { data, mouseX, xScale } = props
-  const d = xScale.invert(mouseX)
+  const { data, x, xScale } = props
+  const d = xScale.invert(x)
   return (
     <Row className="items-center gap-2">
       <span className="font-semibold">{dayjs(d).format('MMM DD')}</span>
@@ -63,12 +67,13 @@ export function DailyChart(props: {
         <SingleValueHistoryChart
           w={width}
           h={height}
+          margin={MARGIN}
           xScale={scaleTime([minDate, maxDate], [0, width - MARGIN_X])}
           yScale={scaleLinear([0, maxValue], [height - MARGIN_Y, 0])}
+          yKind={pct ? 'percent' : 'amount'}
           data={data}
           Tooltip={pct ? DailyPercentTooltip : DailyCountTooltip}
           color="#11b981"
-          pct={pct}
         />
       )}
     </SizedContainer>
diff --git a/web/components/comment-input.tsx b/web/components/comment-input.tsx
index 6304b58d..65a697fe 100644
--- a/web/components/comment-input.tsx
+++ b/web/components/comment-input.tsx
@@ -138,16 +138,6 @@ export function CommentInputTextArea(props: {
           <LoadingIndicator spinnerClassName="border-gray-500" />
         )}
       </TextEditor>
-      <Row>
-        {!user && (
-          <button
-            className="btn btn-outline btn-sm mt-2 normal-case"
-            onClick={submitComment}
-          >
-            Add my comment
-          </button>
-        )}
-      </Row>
     </>
   )
 }
diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx
index 2ad0cb3d..ded155f8 100644
--- a/web/components/confirmation-button.tsx
+++ b/web/components/confirmation-button.tsx
@@ -16,16 +16,18 @@ export function ConfirmationButton(props: {
   }
   cancelBtn?: {
     label?: string
-    className?: string
+    color?: ColorType
   }
   submitBtn?: {
     label?: string
-    className?: string
+    color?: ColorType
+    isSubmitting?: boolean
   }
   children: ReactNode
   onSubmit?: () => void
   onOpenChanged?: (isOpen: boolean) => void
   onSubmitWithSuccess?: () => Promise<boolean>
+  disabled?: boolean
 }) {
   const {
     openModalBtn,
@@ -35,6 +37,7 @@ export function ConfirmationButton(props: {
     children,
     onOpenChanged,
     onSubmitWithSuccess,
+    disabled,
   } = props
 
   const [open, setOpen] = useState(false)
@@ -50,14 +53,14 @@ export function ConfirmationButton(props: {
         <Col className="gap-4 rounded-md bg-white px-8 py-6">
           {children}
           <Row className="gap-4">
-            <div
-              className={clsx('btn', cancelBtn?.className)}
+            <Button
+              color={cancelBtn?.color ?? 'gray-white'}
               onClick={() => updateOpen(false)}
             >
               {cancelBtn?.label ?? 'Cancel'}
-            </div>
-            <div
-              className={clsx('btn', submitBtn?.className)}
+            </Button>
+            <Button
+              color={submitBtn?.color ?? 'blue'}
               onClick={
                 onSubmitWithSuccess
                   ? () =>
@@ -66,15 +69,22 @@ export function ConfirmationButton(props: {
                       )
                   : onSubmit
               }
+              loading={submitBtn?.isSubmitting}
             >
               {submitBtn?.label ?? 'Submit'}
-            </div>
+            </Button>
           </Row>
         </Col>
       </Modal>
+
       <Button
-        className={clsx(openModalBtn.className)}
-        onClick={() => updateOpen(true)}
+        className={openModalBtn.className}
+        onClick={() => {
+          if (disabled) {
+            return
+          }
+          updateOpen(true)
+        }}
         disabled={openModalBtn.disabled}
         color={openModalBtn.color}
         size={openModalBtn.size}
@@ -90,18 +100,11 @@ export function ResolveConfirmationButton(props: {
   onResolve: () => void
   isSubmitting: boolean
   openModalButtonClass?: string
-  submitButtonClass?: string
   color?: ColorType
   disabled?: boolean
 }) {
-  const {
-    onResolve,
-    isSubmitting,
-    openModalButtonClass,
-    submitButtonClass,
-    color,
-    disabled,
-  } = props
+  const { onResolve, isSubmitting, openModalButtonClass, color, disabled } =
+    props
   return (
     <ConfirmationButton
       openModalBtn={{
@@ -116,7 +119,8 @@ export function ResolveConfirmationButton(props: {
       }}
       submitBtn={{
         label: 'Resolve',
-        className: clsx('border-none', submitButtonClass),
+        color: color,
+        isSubmitting,
       }}
       onSubmit={onResolve}
     >
diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index 43f17599..8365e83b 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -41,12 +41,15 @@ import { AdjustmentsIcon } from '@heroicons/react/solid'
 import { Button } from './button'
 import { Modal } from './layout/modal'
 import { Title } from './title'
+import { Input } from './input'
 
 export const SORTS = [
   { label: 'Newest', value: 'newest' },
   { label: 'Trending', value: 'score' },
   { label: 'Daily trending', value: 'daily-score' },
   { label: '24h volume', value: '24-hour-vol' },
+  { label: 'Most popular', value: 'most-popular' },
+  { label: 'Liquidity', value: 'liquidity' },
   { label: 'Last updated', value: 'last-updated' },
   { label: 'Closing soon', value: 'close-date' },
   { label: 'Resolve date', value: 'resolve-date' },
@@ -436,16 +439,16 @@ function ContractSearchControls(props: {
   return (
     <Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
       <Row className="gap-1 sm:gap-2">
-        <input
+        <Input
           type="text"
           value={query}
           onChange={(e) => updateQuery(e.target.value)}
           onBlur={trackCallback('search', { query: query })}
-          placeholder={'Search'}
-          className="input input-bordered w-full"
+          placeholder="Search"
+          className="w-full"
           autoFocus={autoFocus}
         />
-        {!isMobile && (
+        {!isMobile && !query && (
           <SearchFilters
             filter={filter}
             selectFilter={selectFilter}
@@ -456,7 +459,7 @@ function ContractSearchControls(props: {
             includeProbSorts={includeProbSorts}
           />
         )}
-        {isMobile && (
+        {isMobile && !query && (
           <>
             <MobileSearchBar
               children={
diff --git a/web/components/contract/bountied-contract-badge.tsx b/web/components/contract/bountied-contract-badge.tsx
index 79589990..27901cf0 100644
--- a/web/components/contract/bountied-contract-badge.tsx
+++ b/web/components/contract/bountied-contract-badge.tsx
@@ -1,12 +1,16 @@
+import clsx from 'clsx'
+import { useState } from 'react'
+
 import { CurrencyDollarIcon } from '@heroicons/react/outline'
 import { Contract } from 'common/contract'
-import { Tooltip } from 'web/components/tooltip'
-import { formatMoney } from 'common/util/format'
 import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
+import { formatMoney } from 'common/util/format'
+import { Tooltip } from 'web/components/tooltip'
+import { CommentBountyDialog } from './comment-bounty-dialog'
 
 export function BountiedContractBadge() {
   return (
-    <span className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3  py-0.5 text-sm font-medium text-blue-800">
+    <span className="inline-flex items-center gap-1 rounded-full bg-indigo-300 px-3  py-0.5 text-sm font-medium text-white">
       <CurrencyDollarIcon className={'h4 w-4'} /> Bounty
     </span>
   )
@@ -18,30 +22,59 @@ export function BountiedContractSmallBadge(props: {
 }) {
   const { contract, showAmount } = props
   const { openCommentBounties } = contract
-  if (!openCommentBounties) return <div />
 
-  return (
-    <Tooltip
-      text={CommentBountiesTooltipText(
-        contract.creatorName,
-        openCommentBounties
-      )}
-      placement="bottom"
-    >
-      <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
-        <CurrencyDollarIcon className={'h3 w-3'} />
-        {showAmount && formatMoney(openCommentBounties)} Bounty
-      </span>
-    </Tooltip>
+  const [open, setOpen] = useState(false)
+
+  if (!openCommentBounties && !showAmount) return <></>
+
+  const modal = (
+    <CommentBountyDialog open={open} setOpen={setOpen} contract={contract} />
   )
-}
 
-export const CommentBountiesTooltipText = (
-  creator: string,
-  openCommentBounties: number
-) =>
-  `${creator} may award ${formatMoney(
+  const bountiesClosed =
+    contract.isResolved || (contract.closeTime ?? Infinity) < Date.now()
+
+  if (!openCommentBounties) {
+    if (bountiesClosed) return <></>
+
+    return (
+      <>
+        {modal}
+        <SmallBadge text="Add bounty" onClick={() => setOpen(true)} />
+      </>
+    )
+  }
+
+  const tooltip = `${contract.creatorName} may award ${formatMoney(
     COMMENT_BOUNTY_AMOUNT
   )} for good comments. ${formatMoney(
     openCommentBounties
   )} currently available.`
+
+  return (
+    <Tooltip text={tooltip} placement="bottom">
+      {modal}
+      <SmallBadge
+        text={`${formatMoney(openCommentBounties)} bounty`}
+        onClick={bountiesClosed ? undefined : () => setOpen(true)}
+      />
+    </Tooltip>
+  )
+}
+
+function SmallBadge(props: { text: string; onClick?: () => void }) {
+  const { text, onClick } = props
+
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(
+        'inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white',
+        !onClick && 'cursor-default'
+      )}
+    >
+      <CurrencyDollarIcon className={'h4 w-4'} />
+      {text}
+    </button>
+  )
+}
diff --git a/web/components/contract/add-comment-bounty.tsx b/web/components/contract/comment-bounty-dialog.tsx
similarity index 52%
rename from web/components/contract/add-comment-bounty.tsx
rename to web/components/contract/comment-bounty-dialog.tsx
index 8b716e71..e5ae4c39 100644
--- a/web/components/contract/add-comment-bounty.tsx
+++ b/web/components/contract/comment-bounty-dialog.tsx
@@ -8,9 +8,16 @@ import clsx from 'clsx'
 import { formatMoney } from 'common/util/format'
 import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
 import { Button } from 'web/components/button'
+import { Title } from '../title'
+import { Col } from '../layout/col'
+import { Modal } from '../layout/modal'
 
-export function AddCommentBountyPanel(props: { contract: Contract }) {
-  const { contract } = props
+export function CommentBountyDialog(props: {
+  contract: Contract
+  open: boolean
+  setOpen: (open: boolean) => void
+}) {
+  const { contract, open, setOpen } = props
   const { id: contractId, slug } = contract
 
   const user = useUser()
@@ -45,30 +52,34 @@ export function AddCommentBountyPanel(props: { contract: Contract }) {
   }
 
   return (
-    <>
-      <div className="mb-4 text-gray-500">
-        Add a {formatMoney(amount)} bounty for good comments that the creator
-        can award.{' '}
-        {totalAdded > 0 && `(${formatMoney(totalAdded)} currently added)`}
-      </div>
+    <Modal open={open} setOpen={setOpen}>
+      <Col className="gap-4 rounded bg-white p-6">
+        <Title className="!mt-0 !mb-0" text="Comment bounty" />
 
-      <Row className={'items-center gap-2'}>
-        <Button
-          className={clsx('ml-2', isLoading && 'btn-disabled')}
-          onClick={submit}
-          disabled={isLoading}
-          color={'blue'}
-        >
-          Add {formatMoney(amount)} bounty
-        </Button>
-        <span className={'text-error'}>{error}</span>
-      </Row>
+        <div className="mb-4 text-gray-500">
+          Add a {formatMoney(amount)} bounty for good comments that the creator
+          can award.{' '}
+          {totalAdded > 0 && `(${formatMoney(totalAdded)} currently added)`}
+        </div>
 
-      {isSuccess && amount && (
-        <div>Success! Added {formatMoney(amount)} in bounties.</div>
-      )}
+        <Row className={'items-center gap-2'}>
+          <Button
+            className={clsx('ml-2', isLoading && 'btn-disabled')}
+            onClick={submit}
+            disabled={isLoading}
+            color={'blue'}
+          >
+            Add {formatMoney(amount)} bounty
+          </Button>
+          <span className={'text-error'}>{error}</span>
+        </Row>
 
-      {isLoading && <div>Processing...</div>}
-    </>
+        {isSuccess && amount && (
+          <div>Success! Added {formatMoney(amount)} in bounties.</div>
+        )}
+
+        {isLoading && <div>Processing...</div>}
+      </Col>
+    </Modal>
   )
 }
diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index a8caf7bd..d0672f27 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -1,13 +1,18 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 import { Row } from '../layout/row'
-import { formatLargeNumber, formatPercent } from 'common/util/format'
+import {
+  formatLargeNumber,
+  formatMoney,
+  formatPercent,
+} from 'common/util/format'
 import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import {
   BinaryContract,
   Contract,
   CPMMBinaryContract,
+  CPMMContract,
   FreeResponseContract,
   MultipleChoiceContract,
   NumericContract,
@@ -16,6 +21,7 @@ import {
 import {
   AnswerLabel,
   BinaryContractOutcomeLabel,
+  BinaryOutcomeLabel,
   CancelLabel,
   FreeResponseOutcomeLabel,
 } from '../outcome-label'
@@ -28,13 +34,15 @@ import { AvatarDetails, MiscDetails, ShowTime } from './contract-details'
 import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
 import { getColor, ProbBar, QuickBet } from './quick-bet'
 import { useContractWithPreload } from 'web/hooks/use-contract'
-import { useUser } from 'web/hooks/use-user'
+import { useUser, useUserContractMetrics } from 'web/hooks/use-user'
 import { track } from '@amplitude/analytics-browser'
 import { trackCallback } from 'web/lib/service/analytics'
 import { getMappedValue } from 'common/pseudo-numeric'
 import { Tooltip } from '../tooltip'
 import { SiteLink } from '../site-link'
 import { ProbChange } from './prob-change-table'
+import { Card } from '../card'
+import { ProfitBadgeMana } from '../profit-badge'
 
 export function ContractCard(props: {
   contract: Contract
@@ -75,12 +83,7 @@ export function ContractCard(props: {
     !hideQuickBet
 
   return (
-    <Row
-      className={clsx(
-        'group  relative gap-3 rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
-        className
-      )}
-    >
+    <Card className={clsx('group relative flex gap-3', className)}>
       <Col className="relative flex-1 gap-3 py-4 pb-12  pl-6">
         <AvatarDetails
           contract={contract}
@@ -195,7 +198,7 @@ export function ContractCard(props: {
           />
         </Link>
       )}
-    </Row>
+    </Card>
   )
 }
 
@@ -218,17 +221,19 @@ export function BinaryResolutionOrChance(props: {
       className={clsx('items-end', large ? 'text-4xl' : 'text-3xl', className)}
     >
       {resolution ? (
-        <>
-          <div
-            className={clsx('text-gray-500', large ? 'text-xl' : 'text-base')}
-          >
-            Resolved
+        <Row className="flex items-start">
+          <div>
+            <div
+              className={clsx('text-gray-500', large ? 'text-xl' : 'text-base')}
+            >
+              Resolved
+            </div>
+            <BinaryContractOutcomeLabel
+              contract={contract}
+              resolution={resolution}
+            />
           </div>
-          <BinaryContractOutcomeLabel
-            contract={contract}
-            resolution={resolution}
-          />
-        </>
+        </Row>
       ) : (
         <>
           {probAfter && probChanged ? (
@@ -389,18 +394,22 @@ export function PseudoNumericResolutionOrExpectation(props: {
 }
 
 export function ContractCardProbChange(props: {
-  contract: CPMMBinaryContract
+  contract: CPMMContract
   noLinkAvatar?: boolean
+  showPosition?: boolean
   className?: string
 }) {
-  const { contract, noLinkAvatar, className } = props
+  const { noLinkAvatar, showPosition, className } = props
+  const contract = useContractWithPreload(props.contract) as CPMMBinaryContract
+
+  const user = useUser()
+  const metrics = useUserContractMetrics(user?.id, contract.id)
+  const dayMetrics = metrics && metrics.from && metrics.from.day
+  const outcome =
+    metrics && metrics.hasShares && metrics.totalShares.YES ? 'YES' : 'NO'
+
   return (
-    <Col
-      className={clsx(
-        className,
-        'mb-4 rounded-lg bg-white shadow hover:bg-gray-100 hover:shadow-lg'
-      )}
-    >
+    <Card className={clsx(className, 'mb-4')}>
       <AvatarDetails
         contract={contract}
         className={'px-6 pt-4'}
@@ -415,6 +424,28 @@ export function ContractCardProbChange(props: {
         </SiteLink>
         <ProbChange className="py-2 pr-4" contract={contract} />
       </Row>
-    </Col>
+      {showPosition && metrics && (
+        <Row
+          className={clsx(
+            'items-center justify-between gap-4 pl-6 pr-4 pb-2 text-sm'
+          )}
+        >
+          <Row className="gap-1">
+            <div className="text-gray-500">Position</div>
+            {formatMoney(metrics.payout)}
+            <BinaryOutcomeLabel outcome={outcome} />
+          </Row>
+
+          {dayMetrics && (
+            <>
+              <Row className="items-center">
+                <div className="mr-1 text-gray-500">Daily profit</div>
+                <ProfitBadgeMana amount={dayMetrics.profit} />
+              </Row>
+            </>
+          )}
+        </Row>
+      )}
+    </Card>
   )
 }
diff --git a/web/components/contract/contract-description.tsx b/web/components/contract/contract-description.tsx
index 53557305..40532c21 100644
--- a/web/components/contract/contract-description.tsx
+++ b/web/components/contract/contract-description.tsx
@@ -1,20 +1,22 @@
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { useState } from 'react'
-import Textarea from 'react-expanding-textarea'
-
 import { Contract, MAX_DESCRIPTION_LENGTH } from 'common/contract'
-import { exhibitExts, parseTags } from 'common/util/parse'
 import { useAdmin } from 'web/hooks/use-admin'
 import { useUser } from 'web/hooks/use-user'
 import { updateContract } from 'web/lib/firebase/contracts'
 import { Row } from '../layout/row'
 import { Content } from '../editor'
-import { TextEditor, useTextEditor } from 'web/components/editor'
+import {
+  TextEditor,
+  editorExtensions,
+  useTextEditor,
+} from 'web/components/editor'
 import { Button } from '../button'
 import { Spacer } from '../layout/spacer'
 import { Editor, Content as ContentType } from '@tiptap/react'
 import { insertContent } from '../editor/utils'
+import { ExpandingInput } from '../expanding-input'
 
 export function ContractDescription(props: {
   contract: Contract
@@ -53,17 +55,7 @@ function RichEditContract(props: { contract: Contract; isAdmin?: boolean }) {
 
   async function saveDescription() {
     if (!editor) return
-
-    const tags = parseTags(
-      `${editor.getText()} ${contract.tags.map((tag) => `#${tag}`).join(' ')}`
-    )
-    const lowercaseTags = tags.map((tag) => tag.toLowerCase())
-
-    await updateContract(contract.id, {
-      description: editor.getJSON(),
-      tags,
-      lowercaseTags,
-    })
+    await updateContract(contract.id, { description: editor.getJSON() })
   }
 
   return editing ? (
@@ -129,7 +121,10 @@ function EditQuestion(props: {
   }
 
   function joinContent(oldContent: ContentType, newContent: string) {
-    const editor = new Editor({ content: oldContent, extensions: exhibitExts })
+    const editor = new Editor({
+      content: oldContent,
+      extensions: editorExtensions(),
+    })
     editor.commands.focus('end')
     insertContent(editor, newContent)
     return editor.getJSON()
@@ -148,8 +143,8 @@ function EditQuestion(props: {
 
   return editing ? (
     <div className="mt-4">
-      <Textarea
-        className="textarea textarea-bordered mb-1 h-24 w-full resize-none"
+      <ExpandingInput
+        className="mb-1 h-24 w-full"
         rows={2}
         value={text}
         onChange={(e) => setText(e.target.value || '')}
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index d0aa0ee9..a277ae4d 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -1,9 +1,13 @@
 import { ClockIcon } from '@heroicons/react/outline'
+import {
+  ExclamationIcon,
+  PencilIcon,
+  PlusCircleIcon,
+} from '@heroicons/react/solid'
 import clsx from 'clsx'
 import { Editor } from '@tiptap/react'
 import dayjs from 'dayjs'
 import Link from 'next/link'
-
 import { Row } from '../layout/row'
 import { formatMoney } from 'common/util/format'
 import { Contract, updateContract } from 'web/lib/firebase/contracts'
@@ -14,8 +18,7 @@ import { useState } from 'react'
 import NewContractBadge from '../new-contract-badge'
 import { MiniUserFollowButton } from '../follow-button'
 import { DAY_MS } from 'common/util/time'
-import { useUser } from 'web/hooks/use-user'
-import { exhibitExts } from 'common/util/parse'
+import { useUser, useUserById } from 'web/hooks/use-user'
 import { Button } from 'web/components/button'
 import { Modal } from 'web/components/layout/modal'
 import { Col } from 'web/components/layout/col'
@@ -28,7 +31,6 @@ import { UserLink } from 'web/components/user-link'
 import { FeaturedContractBadge } from 'web/components/contract/featured-contract-badge'
 import { Tooltip } from 'web/components/tooltip'
 import { ExtraContractActionsRow } from './extra-contract-actions-row'
-import { PlusCircleIcon } from '@heroicons/react/solid'
 import { GroupLink } from 'common/group'
 import { Subtitle } from '../subtitle'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
@@ -36,6 +38,8 @@ import {
   BountiedContractBadge,
   BountiedContractSmallBadge,
 } from 'web/components/contract/bountied-contract-badge'
+import { Input } from '../input'
+import { editorExtensions } from '../editor'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -149,6 +153,8 @@ export function MarketSubheader(props: {
   const { creatorName, creatorUsername, creatorId, creatorAvatarUrl } = contract
   const { resolvedDate } = contractMetrics(contract)
   const user = useUser()
+  const creator = useUserById(creatorId)
+  const correctResolutionPercentage = creator?.fractionResolvedCorrectly
   const isCreator = user?.id === creatorId
   const isMobile = useIsMobile()
   return (
@@ -160,23 +166,32 @@ export function MarketSubheader(props: {
         size={9}
         className="mr-1.5"
       />
+
       {!disabled && (
         <div className="absolute mt-3 ml-[11px]">
           <MiniUserFollowButton userId={creatorId} />
         </div>
       )}
       <Col className="text-greyscale-6 ml-2 flex-1 flex-wrap text-sm">
-        <Row className="w-full justify-between ">
+        <Row className="w-full space-x-1 ">
           {disabled ? (
             creatorName
           ) : (
-            <UserLink
-              className="my-auto whitespace-nowrap"
-              name={creatorName}
-              username={creatorUsername}
-              short={isMobile}
-            />
+            <Row className={'gap-2'}>
+              <UserLink
+                className="my-auto whitespace-nowrap"
+                name={creatorName}
+                username={creatorUsername}
+              />
+              {/*<BadgeDisplay user={creator} />*/}
+            </Row>
           )}
+          {correctResolutionPercentage != null &&
+            correctResolutionPercentage < BAD_CREATOR_THRESHOLD && (
+              <Tooltip text="This creator has a track record of creating contracts that are resolved incorrectly.">
+                <ExclamationIcon className="h-6 w-6 text-yellow-500" />
+              </Tooltip>
+            )}
         </Row>
         <Row className="text-2xs text-greyscale-4 flex-wrap gap-2 sm:text-xs">
           <CloseOrResolveTime
@@ -344,7 +359,7 @@ export function GroupDisplay(props: {
     const groupSection = (
       <a
         className={clsx(
-          'bg-greyscale-4 max-w-[140px] truncate whitespace-nowrap rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]',
+          'bg-greyscale-4 max-w-[200px] truncate whitespace-nowrap rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]',
           !disabled && 'hover:bg-greyscale-3 cursor-pointer'
         )}
       >
@@ -405,7 +420,7 @@ function EditableCloseDate(props: {
       const content = contract.description
       const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a')
 
-      const editor = new Editor({ content, extensions: exhibitExts })
+      const editor = new Editor({ content, extensions: editorExtensions() })
       editor.commands.focus('end')
       insertContent(
         editor,
@@ -424,46 +439,42 @@ function EditableCloseDate(props: {
   return (
     <>
       <Modal
-        size="sm"
+        size="md"
         open={isEditingCloseTime}
         setOpen={setIsEditingCloseTime}
         position="top"
       >
         <Col className="rounded bg-white px-8 pb-8">
-          <Subtitle text="Edit Close Date" />
-          <Row className="z-10 mr-2 w-full shrink-0 flex-wrap items-center gap-2">
-            <input
+          <Subtitle text="Edit market close time" />
+          <Row className="z-10 mr-2 mt-4 w-full shrink-0 flex-wrap items-center gap-2">
+            <Input
               type="date"
-              className="input input-bordered w-full shrink-0 sm:w-fit"
+              className="w-full shrink-0 sm:w-fit"
               onClick={(e) => e.stopPropagation()}
               onChange={(e) => setCloseDate(e.target.value)}
               min={Date.now()}
               value={closeDate}
             />
-            <input
+            <Input
               type="time"
-              className="input input-bordered w-full shrink-0 sm:w-max"
+              className="w-full shrink-0 sm:w-max"
               onClick={(e) => e.stopPropagation()}
               onChange={(e) => setCloseHoursMinutes(e.target.value)}
               min="00:00"
               value={closeHoursMinutes}
             />
+            <Button size={'xs'} color={'indigo'} onClick={() => onSave()}>
+              Set
+            </Button>
           </Row>
+
           <Button
-            className="mt-4"
+            className="mt-8"
             size={'xs'}
-            color={'indigo'}
-            onClick={() => onSave()}
-          >
-            Done
-          </Button>
-          <Button
-            className="mt-4"
-            size={'xs'}
-            color={'gray-white'}
+            color="red"
             onClick={() => onSave(Date.now())}
           >
-            Close Now
+            Close market now
           </Button>
         </Col>
       </Modal>
@@ -471,8 +482,8 @@ function EditableCloseDate(props: {
         text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
         time={closeTime}
       >
-        <span
-          className={!disabled && isCreator ? 'cursor-pointer' : ''}
+        <Row
+          className={clsx(!disabled && isCreator ? 'cursor-pointer' : '')}
           onClick={() => !disabled && isCreator && setIsEditingCloseTime(true)}
         >
           {isSameDay ? (
@@ -482,8 +493,11 @@ function EditableCloseDate(props: {
           ) : (
             dayJsCloseTime.format('MMM D, YYYY')
           )}
-        </span>
+          {isCreator && !disabled && <PencilIcon className="ml-1 h-4 w-4" />}
+        </Row>
       </DateTimeTooltip>
     </>
   )
 }
+
+const BAD_CREATOR_THRESHOLD = 0.8
diff --git a/web/components/contract/contract-info-dialog.tsx b/web/components/contract/contract-info-dialog.tsx
index df6695ed..e1c36901 100644
--- a/web/components/contract/contract-info-dialog.tsx
+++ b/web/components/contract/contract-info-dialog.tsx
@@ -5,9 +5,8 @@ import { useState } from 'react'
 import { capitalize } from 'lodash'
 
 import { Contract } from 'common/contract'
-import { formatMoney } from 'common/util/format'
+import { formatMoney, formatPercent } from 'common/util/format'
 import { contractPool, updateContract } from 'web/lib/firebase/contracts'
-import { LiquidityBountyPanel } from 'web/components/contract/liquidity-bounty-panel'
 import { Col } from '../layout/col'
 import { Modal } from '../layout/modal'
 import { Title } from '../title'
@@ -17,9 +16,9 @@ import { SiteLink } from '../site-link'
 import { firestoreConsolePath } from 'common/envs/constants'
 import { deleteField } from 'firebase/firestore'
 import ShortToggle from '../widgets/short-toggle'
-import { DuplicateContractButton } from '../copy-contract-button'
+import { DuplicateContractButton } from '../duplicate-contract-button'
 import { Row } from '../layout/row'
-import { BETTORS } from 'common/user'
+import { BETTORS, User } from 'common/user'
 import { Button } from '../button'
 
 export const contractDetailsButtonClassName =
@@ -27,9 +26,10 @@ export const contractDetailsButtonClassName =
 
 export function ContractInfoDialog(props: {
   contract: Contract
+  user: User | null | undefined
   className?: string
 }) {
-  const { contract, className } = props
+  const { contract, className, user } = props
 
   const [open, setOpen] = useState(false)
   const [featured, setFeatured] = useState(
@@ -37,6 +37,11 @@ export function ContractInfoDialog(props: {
   )
   const isDev = useDev()
   const isAdmin = useAdmin()
+  const isCreator = user?.id === contract.creatorId
+  const isUnlisted = contract.visibility === 'unlisted'
+  const wasUnlistedByCreator = contract.unlistedById
+    ? contract.unlistedById === contract.creatorId
+    : false
 
   const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a')
 
@@ -48,6 +53,8 @@ export function ContractInfoDialog(props: {
     mechanism,
     outcomeType,
     id,
+    elasticity,
+    pool,
   } = contract
 
   const typeDisplay =
@@ -136,7 +143,10 @@ export function ContractInfoDialog(props: {
               )}
 
               <tr>
-                <td>Volume</td>
+                <td>
+                  <span className="mr-1">Volume</span>
+                  <InfoTooltip text="Total amount bought or sold" />
+                </td>
                 <td>{formatMoney(contract.volume)}</td>
               </tr>
 
@@ -147,9 +157,40 @@ export function ContractInfoDialog(props: {
 
               <tr>
                 <td>
-                  {mechanism === 'cpmm-1' ? 'Liquidity pool' : 'Betting pool'}
+                  <Row>
+                    <span className="mr-1">Elasticity</span>
+                    <InfoTooltip
+                      text={
+                        mechanism === 'cpmm-1'
+                          ? 'Probability change between a M$50 bet on YES and NO'
+                          : 'Probability change from a M$100 bet'
+                      }
+                    />
+                  </Row>
+                </td>
+                <td>{formatPercent(elasticity)}</td>
+              </tr>
+
+              <tr>
+                <td>Liquidity subsidies</td>
+                <td>
+                  {mechanism === 'cpmm-1'
+                    ? formatMoney(contract.totalLiquidity)
+                    : formatMoney(100)}
+                </td>
+              </tr>
+
+              <tr>
+                <td>Pool</td>
+                <td>
+                  {mechanism === 'cpmm-1' && outcomeType === 'BINARY'
+                    ? `${Math.round(pool.YES)} YES, ${Math.round(pool.NO)} NO`
+                    : mechanism === 'cpmm-1' && outcomeType === 'PSEUDO_NUMERIC'
+                    ? `${Math.round(pool.YES)} HIGHER, ${Math.round(
+                        pool.NO
+                      )} LOWER`
+                    : contractPool(contract)}
                 </td>
-                <td>{contractPool(contract)}</td>
               </tr>
 
               {/* Show a path to Firebase if user is an admin, or we're on localhost */}
@@ -168,22 +209,28 @@ export function ContractInfoDialog(props: {
                   <td>[ADMIN] Featured</td>
                   <td>
                     <ShortToggle
-                      enabled={featured}
-                      setEnabled={setFeatured}
+                      on={featured}
+                      setOn={setFeatured}
                       onChange={onFeaturedToggle}
                     />
                   </td>
                 </tr>
               )}
-              {isAdmin && (
+              {user && (
                 <tr>
-                  <td>[ADMIN] Unlisted</td>
+                  <td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td>
                   <td>
                     <ShortToggle
-                      enabled={contract.visibility === 'unlisted'}
-                      setEnabled={(b) =>
+                      disabled={
+                        isUnlisted
+                          ? !(isAdmin || (isCreator && wasUnlistedByCreator))
+                          : !(isCreator || isAdmin)
+                      }
+                      on={contract.visibility === 'unlisted'}
+                      setOn={(b) =>
                         updateContract(id, {
                           visibility: b ? 'unlisted' : 'public',
+                          unlistedById: b ? user.id : '',
                         })
                       }
                     />
@@ -196,7 +243,6 @@ export function ContractInfoDialog(props: {
           <Row className="flex-wrap">
             <DuplicateContractButton contract={contract} />
           </Row>
-          {!contract.resolution && <LiquidityBountyPanel contract={contract} />}
         </Col>
       </Modal>
     </>
diff --git a/web/components/contract/contract-leaderboard.tsx b/web/components/contract/contract-leaderboard.tsx
index f984e3b6..b4669156 100644
--- a/web/components/contract/contract-leaderboard.tsx
+++ b/web/components/contract/contract-leaderboard.tsx
@@ -2,15 +2,17 @@ import { Bet } from 'common/bet'
 import { resolvedPayout } from 'common/calculate'
 import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
-import { groupBy, mapValues, sumBy, sortBy, keyBy } from 'lodash'
-import { memo } from 'react'
-import { useComments } from 'web/hooks/use-comments'
+
+import { groupBy, mapValues, sumBy } from 'lodash'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedComment } from '../feed/feed-comments'
 import { Spacer } from '../layout/spacer'
 import { Leaderboard } from '../leaderboard'
 import { Title } from '../title'
 import { BETTORS } from 'common/user'
+import { scoreCommentorsAndBettors } from 'common/scoring'
+import { ContractComment } from 'common/comment'
+import { memo } from 'react'
 
 export const ContractLeaderboard = memo(function ContractLeaderboard(props: {
   contract: Contract
@@ -50,47 +52,38 @@ export const ContractLeaderboard = memo(function ContractLeaderboard(props: {
   ) : null
 })
 
-export function ContractTopTrades(props: { contract: Contract; bets: Bet[] }) {
-  const { contract, bets } = props
-  // todo: this stuff should be calced in DB at resolve time
-  const comments = useComments(contract.id)
-  const betsById = keyBy(bets, 'id')
-
-  // If 'id2' is the sale of 'id1', both are logged with (id2 - id1) of profit
-  // Otherwise, we record the profit at resolution time
-  const profitById: Record<string, number> = {}
-  for (const bet of bets) {
-    if (bet.sale) {
-      const originalBet = betsById[bet.sale.betId]
-      const profit = bet.sale.amount - originalBet.amount
-      profitById[bet.id] = profit
-      profitById[originalBet.id] = profit
-    } else {
-      profitById[bet.id] = resolvedPayout(contract, bet) - bet.amount
-    }
-  }
-
-  // Now find the betId with the highest profit
-  const topBetId = sortBy(bets, (b) => -profitById[b.id])[0]?.id
-  const topBettor = betsById[topBetId]?.userName
-
-  // And also the comment with the highest profit
-  const topComment = sortBy(comments, (c) => c.betId && -profitById[c.betId])[0]
-
+export function ContractTopTrades(props: {
+  contract: Contract
+  bets: Bet[]
+  comments: ContractComment[]
+}) {
+  const { contract, bets, comments } = props
+  const {
+    topBetId,
+    topBettor,
+    profitById,
+    betsById,
+    topCommentId,
+    commentsById,
+    topCommentBetId,
+  } = scoreCommentorsAndBettors(contract, bets, comments)
   return (
     <div className="mt-12 max-w-sm">
-      {topComment && profitById[topComment.id] > 0 && (
+      {topCommentBetId && profitById[topCommentBetId] > 0 && (
         <>
           <Title text="💬 Proven correct" className="!mt-0" />
           <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
-            <FeedComment contract={contract} comment={topComment} />
+            <FeedComment
+              contract={contract}
+              comment={commentsById[topCommentId]}
+            />
           </div>
           <Spacer h={16} />
         </>
       )}
 
       {/* If they're the same, only show the comment; otherwise show both */}
-      {topBettor && topBetId !== topComment?.betId && profitById[topBetId] > 0 && (
+      {topBettor && topBetId !== topCommentId && profitById[topBetId] > 0 && (
         <>
           <Title text="💸 Best bet" className="!mt-0" />
           <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
diff --git a/web/components/contract/contract-mention.tsx b/web/components/contract/contract-mention.tsx
new file mode 100644
index 00000000..09e47c79
--- /dev/null
+++ b/web/components/contract/contract-mention.tsx
@@ -0,0 +1,54 @@
+import clsx from 'clsx'
+import { Contract } from 'common/contract'
+import { formatMoney } from 'common/util/format'
+import Link from 'next/link'
+import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
+import { fromNow } from 'web/lib/util/time'
+import { BinaryContractOutcomeLabel } from '../outcome-label'
+import { getColor } from './quick-bet'
+
+export function ContractMention(props: { contract: Contract }) {
+  const { contract } = props
+  const { outcomeType, resolution } = contract
+  const probTextColor = `text-${getColor(contract)}`
+
+  return (
+    <Link href={contractPath(contract)}>
+      <a
+        className="group inline whitespace-nowrap rounded-sm hover:bg-indigo-50 focus:bg-indigo-50"
+        title={tooltipLabel(contract)}
+      >
+        <span className="break-anywhere mr-0.5 whitespace-normal font-normal text-indigo-700">
+          {contract.question}
+        </span>
+        {outcomeType === 'BINARY' && (
+          <span
+            className={clsx(
+              probTextColor,
+              'rounded-full px-2 font-semibold ring-1 ring-inset ring-indigo-100 group-hover:ring-indigo-200'
+            )}
+          >
+            {resolution ? (
+              <BinaryContractOutcomeLabel
+                contract={contract}
+                resolution={resolution}
+              />
+            ) : (
+              getBinaryProbPercent(contract)
+            )}
+          </span>
+        )}
+        {/* TODO: numeric? */}
+      </a>
+    </Link>
+  )
+}
+
+function tooltipLabel(contract: Contract) {
+  const { resolutionTime, creatorName, volume, closeTime = 0 } = contract
+  const dateFormat = resolutionTime
+    ? `Resolved ${fromNow(resolutionTime)}`
+    : `${closeTime < Date.now() ? 'Closed' : 'Closes'} ${fromNow(closeTime)}`
+
+  return `By ${creatorName}. ${formatMoney(volume)} bet. ${dateFormat}`
+}
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index 95600a8e..b98a7ca6 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -22,6 +22,7 @@ import {
   BinaryContract,
 } from 'common/contract'
 import { ContractDetails } from './contract-details'
+import { ContractReportResolution } from './contract-report-resolution'
 import { SizedContainer } from 'web/components/sized-container'
 
 const OverviewQuestion = (props: { text: string }) => (
@@ -99,11 +100,16 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
         <ContractDetails contract={contract} />
         <Row className="justify-between gap-4">
           <OverviewQuestion text={contract.question} />
-          <BinaryResolutionOrChance
-            className="flex items-end"
-            contract={contract}
-            large
-          />
+          <Row>
+            <BinaryResolutionOrChance
+              className="flex items-end"
+              contract={contract}
+              large
+            />
+            {contract.isResolved && (
+              <ContractReportResolution contract={contract} />
+            )}
+          </Row>
         </Row>
       </Col>
       <SizedContractChart
@@ -133,7 +139,13 @@ const ChoiceOverview = (props: {
         <ContractDetails contract={contract} />
         <OverviewQuestion text={question} />
         {resolution && (
-          <FreeResponseResolutionOrChance contract={contract} truncate="none" />
+          <Row>
+            <FreeResponseResolutionOrChance
+              contract={contract}
+              truncate="none"
+            />
+            <ContractReportResolution contract={contract} />
+          </Row>
         )}
       </Col>
       <SizedContractChart
diff --git a/web/components/contract/contract-report-resolution.tsx b/web/components/contract/contract-report-resolution.tsx
new file mode 100644
index 00000000..4fc98ff5
--- /dev/null
+++ b/web/components/contract/contract-report-resolution.tsx
@@ -0,0 +1,70 @@
+import { Contract } from 'common/contract'
+import { useUser } from 'web/hooks/use-user'
+import clsx from 'clsx'
+import { updateContract } from 'web/lib/firebase/contracts'
+import { Tooltip } from '../tooltip'
+import { ConfirmationButton } from '../confirmation-button'
+import { Row } from '../layout/row'
+import { FlagIcon } from '@heroicons/react/solid'
+import { buildArray } from 'common/util/array'
+import { useState } from 'react'
+
+export function ContractReportResolution(props: { contract: Contract }) {
+  const { contract } = props
+  const user = useUser()
+  const [reporting, setReporting] = useState(false)
+  if (!user) {
+    return <></>
+  }
+  const userReported = contract.flaggedByUsernames?.includes(user.id)
+
+  const onSubmit = async () => {
+    if (!user || userReported) {
+      return true
+    }
+    setReporting(true)
+
+    await updateContract(contract.id, {
+      flaggedByUsernames: buildArray(contract.flaggedByUsernames, user.id),
+    })
+    setReporting(false)
+    return true
+  }
+
+  const flagClass = clsx(
+    'mx-2 flex flex-col items-center gap-1  w-6 h-6  rounded-md !bg-gray-100 px-2 py-1 hover:bg-gray-300',
+    userReported ? '!text-red-500' : '!text-gray-500'
+  )
+
+  return (
+    <Tooltip
+      text={
+        userReported
+          ? "You've reported this market as incorrectly resolved"
+          : 'Flag this market as incorrectly resolved '
+      }
+    >
+      <ConfirmationButton
+        openModalBtn={{
+          label: '',
+          icon: <FlagIcon className="h-5 w-5" />,
+          disabled: reporting,
+          className: clsx(flagClass),
+        }}
+        onSubmitWithSuccess={onSubmit}
+        disabled={userReported}
+      >
+        <div>
+          <Row className="items-center text-xl">
+            Flag this market as incorrectly resolved
+          </Row>
+          <Row className="text-sm text-gray-500">
+            Report that the market was not resolved according to its resolution
+            criteria. If a creator's markets get flagged too often, they'll be
+            marked as unreliable.
+          </Row>
+        </div>
+      </ConfirmationButton>
+    </Tooltip>
+  )
+}
diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index 33c66c57..8531697b 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -31,6 +31,11 @@ import { useUser } from 'web/hooks/use-user'
 import { Tooltip } from 'web/components/tooltip'
 import { BountiedContractSmallBadge } from 'web/components/contract/bountied-contract-badge'
 import { Row } from '../layout/row'
+import {
+  storageStore,
+  usePersistentState,
+} from 'web/hooks/use-persistent-state'
+import { safeLocalStorage } from 'web/lib/util/local'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -75,7 +80,10 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
   const { contract } = props
   const tips = useTipTxns({ contractId: contract.id })
   const comments = useComments(contract.id) ?? props.comments
-  const [sort, setSort] = useState<'Newest' | 'Best'>('Newest')
+  const [sort, setSort] = usePersistentState<'Newest' | 'Best'>('Newest', {
+    key: `contract-comments-sort`,
+    store: storageStore(safeLocalStorage()),
+  })
   const me = useUser()
 
   if (comments == null) {
@@ -85,24 +93,56 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
   const tipsOrBountiesAwarded =
     Object.keys(tips).length > 0 || comments.some((c) => c.bountiesAwarded)
 
-  const sortedComments = sortBy(comments, (c) =>
-    sort === 'Newest'
-      ? c.createdTime
-      : // Is this too magic? If there are tips/bounties, 'Best' shows your own comments made within the last 10 minutes first, then sorts by score
-      tipsOrBountiesAwarded &&
-        c.createdTime > Date.now() - 10 * MINUTE_MS &&
-        c.userId === me?.id
-      ? -Infinity
-      : -((c.bountiesAwarded ?? 0) + sum(Object.values(tips[c.id] ?? [])))
-  )
+  // replied to answers/comments are NOT newest, otherwise newest first
+  const shouldBeNewestFirst = (c: ContractComment) =>
+    c.replyToCommentId == undefined &&
+    (contract.outcomeType === 'FREE_RESPONSE'
+      ? c.betId === undefined && c.answerOutcome == undefined
+      : true)
+
+  // TODO: links to comments are broken because tips load after render and
+  //  comments will reorganize themselves if there are tips/bounties awarded
+  const sortedComments = sortBy(comments, [
+    sort === 'Best'
+      ? (c) =>
+          // Is this too magic? If there are tips/bounties, 'Best' shows your own comments made within the last 10 minutes first, then sorts by score
+          tipsOrBountiesAwarded &&
+          c.createdTime > Date.now() - 10 * MINUTE_MS &&
+          c.userId === me?.id &&
+          shouldBeNewestFirst(c)
+            ? -Infinity
+            : -((c.bountiesAwarded ?? 0) + sum(Object.values(tips[c.id] ?? [])))
+      : (c) => c,
+    (c) => (!shouldBeNewestFirst(c) ? c.createdTime : -c.createdTime),
+  ])
 
   const commentsByParent = groupBy(
     sortedComments,
     (c) => c.replyToCommentId ?? '_'
   )
   const topLevelComments = commentsByParent['_'] ?? []
-  // Top level comments are reverse-chronological, while replies are chronological
-  if (sort === 'Newest') topLevelComments.reverse()
+
+  const sortRow = comments.length > 0 && (
+    <Row className="mb-4 items-center">
+      <Button
+        size={'xs'}
+        color={'gray-white'}
+        onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
+      >
+        <Tooltip
+          text={
+            sort === 'Best'
+              ? 'Highest tips + bounties first. Your new comments briefly appear to you first.'
+              : ''
+          }
+        >
+          Sort by: {sort}
+        </Tooltip>
+      </Button>
+
+      <BountiedContractSmallBadge contract={contract} showAmount />
+    </Row>
+  )
 
   if (contract.outcomeType === 'FREE_RESPONSE') {
     const sortedAnswers = sortBy(
@@ -110,14 +150,16 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
       (a) => -getOutcomeProbability(contract, a.id)
     )
     const commentsByOutcome = groupBy(
-      comments,
+      sortedComments,
       (c) => c.answerOutcome ?? c.betOutcome ?? '_'
     )
     const generalTopLevelComments = topLevelComments.filter(
       (c) => c.answerOutcome === undefined && c.betId === undefined
     )
+
     return (
       <>
+        {sortRow}
         {sortedAnswers.map((answer) => (
           <div key={answer.id} className="relative pb-4">
             <span
@@ -127,10 +169,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
             <FeedAnswerCommentGroup
               contract={contract}
               answer={answer}
-              answerComments={sortBy(
-                commentsByOutcome[answer.number.toString()] ?? [],
-                (c) => c.createdTime
-              )}
+              answerComments={commentsByOutcome[answer.number.toString()] ?? []}
               tips={tips}
             />
           </div>
@@ -139,6 +178,8 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
           <div className="text-md mt-8 mb-2 text-left">General Comments</div>
           <div className="mb-4 w-full border-b border-gray-200" />
           <ContractCommentInput className="mb-5" contract={contract} />
+          {sortRow}
+
           {generalTopLevelComments.map((comment) => (
             <FeedCommentThread
               key={comment.id}
@@ -155,28 +196,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
     return (
       <>
         <ContractCommentInput className="mb-5" contract={contract} />
-
-        {comments.length > 0 && (
-          <Row className="mb-4 items-center">
-            <Button
-              size={'xs'}
-              color={'gray-white'}
-              onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
-            >
-              <Tooltip
-                text={
-                  sort === 'Best'
-                    ? 'Highest tips + bounties first. Your new comments briefly appear to you first.'
-                    : ''
-                }
-              >
-                Sort by: {sort}
-              </Tooltip>
-            </Button>
-
-            <BountiedContractSmallBadge contract={contract} showAmount />
-          </Row>
-        )}
+        {sortRow}
 
         {topLevelComments.map((parent) => (
           <FeedCommentThread
diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx
index d6206766..7f8a0a27 100644
--- a/web/components/contract/contracts-grid.tsx
+++ b/web/components/contract/contracts-grid.tsx
@@ -45,7 +45,7 @@ export function ContractsGrid(props: {
     cardUIOptions || {}
   const { itemIds: contractIds, highlightClassName } = highlightOptions || {}
   const onVisibilityUpdated = useCallback(
-    (visible) => {
+    (visible: boolean) => {
       if (visible && loadMore) {
         loadMore()
       }
@@ -81,6 +81,7 @@ export function ContractsGrid(props: {
             <ContractCardProbChange
               key={contract.id}
               contract={contract as CPMMBinaryContract}
+              showPosition
             />
           ) : (
             <ContractCard
diff --git a/web/components/contract/extra-contract-actions-row.tsx b/web/components/contract/extra-contract-actions-row.tsx
index d9474806..d81132b9 100644
--- a/web/components/contract/extra-contract-actions-row.tsx
+++ b/web/components/contract/extra-contract-actions-row.tsx
@@ -9,6 +9,7 @@ import { FollowMarketButton } from 'web/components/follow-market-button'
 import { LikeMarketButton } from 'web/components/contract/like-market-button'
 import { ContractInfoDialog } from 'web/components/contract/contract-info-dialog'
 import { Tooltip } from '../tooltip'
+import { LiquidityButton } from './liquidity-button'
 
 export function ExtraContractActionsRow(props: { contract: Contract }) {
   const { contract } = props
@@ -18,6 +19,9 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
   return (
     <Row>
       <FollowMarketButton contract={contract} user={user} />
+      {contract.mechanism === 'cpmm-1' && (
+        <LiquidityButton contract={contract} user={user} />
+      )}
       <LikeMarketButton contract={contract} user={user} />
       <Tooltip text="Share" placement="bottom" noTap noFade>
         <Button
@@ -35,7 +39,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
           />
         </Button>
       </Tooltip>
-      <ContractInfoDialog contract={contract} />
+      <ContractInfoDialog contract={contract} user={user} />
     </Row>
   )
 }
diff --git a/web/components/contract/liquidity-bounty-panel.tsx b/web/components/contract/liquidity-bounty-panel.tsx
deleted file mode 100644
index 4cc7fd70..00000000
--- a/web/components/contract/liquidity-bounty-panel.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import clsx from 'clsx'
-import { useEffect, useState } from 'react'
-
-import { Contract, CPMMContract } from 'common/contract'
-import { formatMoney } from 'common/util/format'
-import { useUser } from 'web/hooks/use-user'
-import { addLiquidity, withdrawLiquidity } from 'web/lib/firebase/api'
-import { AmountInput } from 'web/components/amount-input'
-import { Row } from 'web/components/layout/row'
-import { useUserLiquidity } from 'web/hooks/use-liquidity'
-import { Tabs } from 'web/components/layout/tabs'
-import { NoLabel, YesLabel } from 'web/components/outcome-label'
-import { Col } from 'web/components/layout/col'
-import { track } from 'web/lib/service/analytics'
-import { InfoTooltip } from 'web/components/info-tooltip'
-import { BETTORS, PRESENT_BET } from 'common/user'
-import { buildArray } from 'common/util/array'
-import { useAdmin } from 'web/hooks/use-admin'
-import { AddCommentBountyPanel } from 'web/components/contract/add-comment-bounty'
-
-export function LiquidityBountyPanel(props: { contract: Contract }) {
-  const { contract } = props
-
-  const isCPMM = contract.mechanism === 'cpmm-1'
-  const user = useUser()
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const lpShares = isCPMM && useUserLiquidity(contract, user?.id ?? '')
-
-  const [showWithdrawal, setShowWithdrawal] = useState(false)
-
-  useEffect(() => {
-    if (!showWithdrawal && lpShares && lpShares.YES && lpShares.NO)
-      setShowWithdrawal(true)
-  }, [showWithdrawal, lpShares])
-
-  const isCreator = user?.id === contract.creatorId
-  const isAdmin = useAdmin()
-
-  return (
-    <Tabs
-      tabs={buildArray(
-        {
-          title: 'Bounty Comments',
-          content: <AddCommentBountyPanel contract={contract} />,
-        },
-        (isCreator || isAdmin) &&
-          isCPMM && {
-            title: (isAdmin ? '[Admin] ' : '') + 'Subsidize',
-            content: <AddLiquidityPanel contract={contract} />,
-          },
-        showWithdrawal &&
-          isCPMM && {
-            title: 'Withdraw',
-            content: (
-              <WithdrawLiquidityPanel
-                contract={contract}
-                lpShares={lpShares as { YES: number; NO: number }}
-              />
-            ),
-          },
-
-        (isCreator || isAdmin) &&
-          isCPMM && {
-            title: 'Pool',
-            content: <ViewLiquidityPanel contract={contract} />,
-          }
-      )}
-    />
-  )
-}
-
-function AddLiquidityPanel(props: { contract: CPMMContract }) {
-  const { contract } = props
-  const { id: contractId, slug } = contract
-
-  const user = useUser()
-
-  const [amount, setAmount] = useState<number | undefined>(undefined)
-  const [error, setError] = useState<string | undefined>(undefined)
-  const [isSuccess, setIsSuccess] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-
-  const onAmountChange = (amount: number | undefined) => {
-    setIsSuccess(false)
-    setAmount(amount)
-
-    // Check for errors.
-    if (amount !== undefined) {
-      if (user && user.balance < amount) {
-        setError('Insufficient balance')
-      } else if (amount < 1) {
-        setError('Minimum amount: ' + formatMoney(1))
-      } else {
-        setError(undefined)
-      }
-    }
-  }
-
-  const submit = () => {
-    if (!amount) return
-
-    setIsLoading(true)
-    setIsSuccess(false)
-
-    addLiquidity({ amount, contractId })
-      .then((_) => {
-        setIsSuccess(true)
-        setError(undefined)
-        setIsLoading(false)
-      })
-      .catch((_) => setError('Server error'))
-
-    track('add liquidity', { amount, contractId, slug })
-  }
-
-  return (
-    <>
-      <div className="mb-4 text-gray-500">
-        Contribute your M$ to make this market more accurate.{' '}
-        <InfoTooltip
-          text={`More liquidity stabilizes the market, encouraging ${BETTORS} to ${PRESENT_BET}. You can withdraw your subsidy at any time.`}
-        />
-      </div>
-
-      <Row>
-        <AmountInput
-          amount={amount}
-          onChange={onAmountChange}
-          label="M$"
-          error={error}
-          disabled={isLoading}
-          inputClassName="w-28"
-        />
-        <button
-          className={clsx('btn btn-primary ml-2', isLoading && 'btn-disabled')}
-          onClick={submit}
-          disabled={isLoading}
-        >
-          Add
-        </button>
-      </Row>
-
-      {isSuccess && amount && (
-        <div>Success! Added {formatMoney(amount)} in liquidity.</div>
-      )}
-
-      {isLoading && <div>Processing...</div>}
-    </>
-  )
-}
-
-function ViewLiquidityPanel(props: { contract: CPMMContract }) {
-  const { contract } = props
-  const { pool } = contract
-  const { YES: yesShares, NO: noShares } = pool
-
-  return (
-    <Col className="mb-4">
-      <div className="mb-4 text-gray-500">
-        The liquidity pool for this market currently contains:
-      </div>
-      <span>
-        {yesShares.toFixed(2)} <YesLabel /> shares
-      </span>
-
-      <span>
-        {noShares.toFixed(2)} <NoLabel /> shares
-      </span>
-    </Col>
-  )
-}
-
-function WithdrawLiquidityPanel(props: {
-  contract: CPMMContract
-  lpShares: { YES: number; NO: number }
-}) {
-  const { contract, lpShares } = props
-  const { YES: yesShares, NO: noShares } = lpShares
-
-  const [_error, setError] = useState<string | undefined>(undefined)
-  const [isSuccess, setIsSuccess] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-
-  const submit = () => {
-    setIsLoading(true)
-    setIsSuccess(false)
-
-    withdrawLiquidity({ contractId: contract.id })
-      .then((_) => {
-        setIsSuccess(true)
-        setError(undefined)
-        setIsLoading(false)
-      })
-      .catch((_) => setError('Server error'))
-
-    track('withdraw liquidity')
-  }
-
-  if (isSuccess)
-    return (
-      <div className="text-gray-500">
-        Success! Your liquidity was withdrawn.
-      </div>
-    )
-
-  if (!yesShares && !noShares)
-    return (
-      <div className="text-gray-500">
-        You do not have any liquidity positions to withdraw.
-      </div>
-    )
-
-  return (
-    <Col>
-      <div className="mb-4 text-gray-500">
-        Your liquidity position is currently:
-      </div>
-
-      <span>
-        {yesShares.toFixed(2)} <YesLabel /> shares
-      </span>
-
-      <span>
-        {noShares.toFixed(2)} <NoLabel /> shares
-      </span>
-
-      <Row className="mt-4 mb-2">
-        <button
-          className={clsx(
-            'btn btn-outline btn-sm ml-2',
-            isLoading && 'btn-disabled'
-          )}
-          onClick={submit}
-          disabled={isLoading}
-        >
-          Withdraw
-        </button>
-      </Row>
-
-      {isLoading && <div>Processing...</div>}
-    </Col>
-  )
-}
diff --git a/web/components/contract/liquidity-button.tsx b/web/components/contract/liquidity-button.tsx
new file mode 100644
index 00000000..1447ee07
--- /dev/null
+++ b/web/components/contract/liquidity-button.tsx
@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import clsx from 'clsx'
+
+import { Button } from 'web/components/button'
+import { formatMoney, shortFormatNumber } from 'common/util/format'
+import { Col } from 'web/components/layout/col'
+import { Tooltip } from '../tooltip'
+import { CPMMContract } from 'common/contract'
+import { User } from 'common/user'
+import { useLiquidity } from 'web/hooks/use-liquidity'
+import { LiquidityModal } from './liquidity-modal'
+
+export function LiquidityButton(props: {
+  contract: CPMMContract
+  user: User | undefined | null
+}) {
+  const { contract, user } = props
+  const { totalLiquidity: total } = contract
+
+  const lp = useLiquidity(contract.id)
+  const userActive = lp?.find((l) => l.userId === user?.id) !== undefined
+
+  const [open, setOpen] = useState(false)
+
+  const disabled =
+    contract.isResolved || (contract.closeTime ?? Infinity) < Date.now()
+
+  return (
+    <Tooltip
+      text={`${formatMoney(total)} in liquidity subsidies`}
+      placement="bottom"
+      noTap
+      noFade
+    >
+      <LiquidityIconButton
+        total={total}
+        userActive={userActive}
+        onClick={() => setOpen(true)}
+        disabled={disabled}
+      />
+      <LiquidityModal contract={contract} isOpen={open} setOpen={setOpen} />
+    </Tooltip>
+  )
+}
+
+function LiquidityIconButton(props: {
+  total: number
+  onClick: () => void
+  userActive: boolean
+  isCompact?: boolean
+  disabled?: boolean
+}) {
+  const { total, userActive, isCompact, onClick, disabled } = props
+
+  return (
+    <Button
+      size={'sm'}
+      className={clsx(
+        'max-w-xs self-center pt-1',
+        isCompact && 'px-0 py-0',
+        disabled && 'hover:bg-inherit'
+      )}
+      color={'gray-white'}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Col className={'relative items-center sm:flex-row'}>
+        <span
+          className={clsx(
+            'text-xl sm:text-2xl',
+            total > 0 ? 'mr-2' : '',
+            userActive ? '' : 'grayscale'
+          )}
+        >
+          💧
+        </span>
+        {total > 0 && (
+          <div
+            className={clsx(
+              'bg-greyscale-5 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
+              total > 99
+                ? 'text-[0.4rem] sm:text-[0.5rem]'
+                : 'sm:text-2xs text-[0.5rem]'
+            )}
+          >
+            {shortFormatNumber(total)}
+          </div>
+        )}
+      </Col>
+    </Button>
+  )
+}
diff --git a/web/components/contract/liquidity-modal.tsx b/web/components/contract/liquidity-modal.tsx
new file mode 100644
index 00000000..1cc337cd
--- /dev/null
+++ b/web/components/contract/liquidity-modal.tsx
@@ -0,0 +1,108 @@
+import { CPMMContract } from 'common/contract'
+import { formatMoney } from 'common/util/format'
+import { useState } from 'react'
+import { useUser } from 'web/hooks/use-user'
+import { addSubsidy } from 'web/lib/firebase/api'
+import { track } from 'web/lib/service/analytics'
+import { AmountInput } from '../amount-input'
+import { Button } from '../button'
+import { InfoTooltip } from '../info-tooltip'
+import { Col } from '../layout/col'
+import { Modal } from '../layout/modal'
+import { Row } from '../layout/row'
+import { Title } from '../title'
+
+export function LiquidityModal(props: {
+  contract: CPMMContract
+  isOpen: boolean
+  setOpen: (open: boolean) => void
+}) {
+  const { contract, isOpen, setOpen } = props
+  const { totalLiquidity } = contract
+
+  return (
+    <Modal open={isOpen} setOpen={setOpen} size="sm">
+      <Col className="gap-2.5 rounded  bg-white p-4 pb-8 sm:gap-4">
+        <Title className="!mt-0 !mb-2" text="💧 Add a subsidy" />
+
+        <div>Total liquidity subsidies: {formatMoney(totalLiquidity)}</div>
+        <AddLiquidityPanel contract={contract as CPMMContract} />
+      </Col>
+    </Modal>
+  )
+}
+
+function AddLiquidityPanel(props: { contract: CPMMContract }) {
+  const { contract } = props
+  const { id: contractId, slug } = contract
+
+  const user = useUser()
+
+  const [amount, setAmount] = useState<number | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const onAmountChange = (amount: number | undefined) => {
+    setIsSuccess(false)
+    setAmount(amount)
+
+    // Check for errors.
+    if (amount !== undefined) {
+      if (user && user.balance < amount) {
+        setError('Insufficient balance')
+      } else if (amount < 1) {
+        setError('Minimum amount: ' + formatMoney(1))
+      } else {
+        setError(undefined)
+      }
+    }
+  }
+
+  const submit = () => {
+    if (!amount) return
+
+    setIsLoading(true)
+    setIsSuccess(false)
+
+    addSubsidy({ amount, contractId })
+      .then((_) => {
+        setIsSuccess(true)
+        setError(undefined)
+        setIsLoading(false)
+      })
+      .catch((_) => setError('Server error'))
+
+    track('add liquidity', { amount, contractId, slug })
+  }
+
+  return (
+    <>
+      <div className="mb-4 text-gray-500">
+        Contribute your M$ to make this market more accurate by subsidizing
+        trading.{' '}
+        <InfoTooltip text="Liquidity is how much money traders can make if they're right. The more traders can earn, the greater the incentive to find the correct probability." />
+      </div>
+
+      <Row>
+        <AmountInput
+          amount={amount}
+          onChange={onAmountChange}
+          label="M$"
+          error={error}
+          disabled={isLoading}
+          inputClassName="w-16 mr-4"
+        />
+        <Button size="md" color="blue" onClick={submit} disabled={isLoading}>
+          Add
+        </Button>
+      </Row>
+
+      {isSuccess && amount && (
+        <div>Success! Added {formatMoney(amount)} in liquidity.</div>
+      )}
+
+      {isLoading && <div>Processing...</div>}
+    </>
+  )
+}
diff --git a/web/components/contract/prob-change-table.tsx b/web/components/contract/prob-change-table.tsx
index 6b671830..48a39db1 100644
--- a/web/components/contract/prob-change-table.tsx
+++ b/web/components/contract/prob-change-table.tsx
@@ -1,13 +1,69 @@
-import { sortBy } from 'lodash'
 import clsx from 'clsx'
-import { contractPath } from 'web/lib/firebase/contracts'
-import { CPMMContract } from 'common/contract'
+import { sortBy } from 'lodash'
+import { filterDefined } from 'common/util/array'
+import { ContractMetrics } from 'common/calculate-metrics'
+import { CPMMBinaryContract, CPMMContract } from 'common/contract'
 import { formatPercent } from 'common/util/format'
-import { SiteLink } from '../site-link'
 import { Col } from '../layout/col'
-import { Row } from '../layout/row'
 import { LoadingIndicator } from '../loading-indicator'
-import { useContractWithPreload } from 'web/hooks/use-contract'
+import { ContractCardProbChange } from './contract-card'
+
+export function ProfitChangeTable(props: {
+  contracts: CPMMBinaryContract[]
+  metrics: ContractMetrics[]
+}) {
+  const { contracts, metrics } = props
+
+  const contractProfit = metrics.map(
+    (m) => [m.contractId, m.from?.day.profit ?? 0] as const
+  )
+
+  const positiveProfit = sortBy(
+    contractProfit.filter(([, profit]) => profit > 0),
+    ([, profit]) => profit
+  ).reverse()
+  const positive = filterDefined(
+    positiveProfit.map(([contractId]) =>
+      contracts.find((c) => c.id === contractId)
+    )
+  )
+
+  const negativeProfit = sortBy(
+    contractProfit.filter(([, profit]) => profit < 0),
+    ([, profit]) => profit
+  )
+  const negative = filterDefined(
+    negativeProfit.map(([contractId]) =>
+      contracts.find((c) => c.id === contractId)
+    )
+  )
+
+  if (positive.length === 0 && negative.length === 0)
+    return <div className="px-4 text-gray-500">None</div>
+
+  return (
+    <Col className="mb-4 w-full gap-4 rounded-lg md:flex-row">
+      <Col className="flex-1">
+        {positive.map((contract) => (
+          <ContractCardProbChange
+            key={contract.id}
+            contract={contract}
+            showPosition
+          />
+        ))}
+      </Col>
+      <Col className="flex-1">
+        {negative.map((contract) => (
+          <ContractCardProbChange
+            key={contract.id}
+            contract={contract}
+            showPosition
+          />
+        ))}
+      </Col>
+    </Col>
+  )
+}
 
 export function ProbChangeTable(props: {
   changes: CPMMContract[] | undefined
@@ -39,46 +95,29 @@ export function ProbChangeTable(props: {
   if (rows === 0) return <div className="px-4 text-gray-500">None</div>
 
   return (
-    <Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0">
-      <Col className="flex-1 divide-y">
+    <Col className="mb-4 w-full gap-4 rounded-lg md:flex-row">
+      <Col className="flex-1">
         {filteredPositiveChanges.map((contract) => (
-          <ProbChangeRow key={contract.id} contract={contract} />
+          <ContractCardProbChange
+            key={contract.id}
+            contract={contract}
+            showPosition
+          />
         ))}
       </Col>
-      <Col className="flex-1 divide-y">
+      <Col className="flex-1">
         {filteredNegativeChanges.map((contract) => (
-          <ProbChangeRow key={contract.id} contract={contract} />
+          <ContractCardProbChange
+            key={contract.id}
+            contract={contract}
+            showPosition
+          />
         ))}
       </Col>
     </Col>
   )
 }
 
-export function ProbChangeRow(props: {
-  contract: CPMMContract
-  className?: string
-}) {
-  const { className } = props
-  const contract =
-    (useContractWithPreload(props.contract) as CPMMContract) ?? props.contract
-  return (
-    <Row
-      className={clsx(
-        'items-center justify-between gap-4 hover:bg-gray-100',
-        className
-      )}
-    >
-      <SiteLink
-        className="p-4 pr-0 font-semibold text-indigo-700"
-        href={contractPath(contract)}
-      >
-        <span className="line-clamp-2">{contract.question}</span>
-      </SiteLink>
-      <ProbChange className="py-2 pr-4 text-xl" contract={contract} />
-    </Row>
-  )
-}
-
 export function ProbChange(props: {
   contract: CPMMContract
   className?: string
diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx
index a71b6c7d..e4a85139 100644
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@@ -33,7 +33,7 @@ import { sellShares } from 'web/lib/firebase/api'
 import { calculateCpmmSale, getCpmmProbability } from 'common/calculate-cpmm'
 import { track } from 'web/lib/service/analytics'
 import { formatNumericProbability } from 'common/pseudo-numeric'
-import { useUnfilledBets } from 'web/hooks/use-bets'
+import { useUnfilledBetsAndBalanceByUserId } from 'web/hooks/use-bets'
 import { getBinaryProb } from 'common/contract-details'
 
 const BET_SIZE = 10
@@ -48,7 +48,10 @@ export function QuickBet(props: {
   const isCpmm = mechanism === 'cpmm-1'
 
   const userBets = useUserContractBets(user.id, contract.id)
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
+  // TODO: Below hook fetches a decent amount of data. Maybe not worth it to show prob change on hover?
+  const { unfilledBets, balanceByUserId } = useUnfilledBetsAndBalanceByUserId(
+    contract.id
+  )
 
   const { hasYesShares, hasNoShares, yesShares, noShares } =
     useSaveBinaryShares(contract, userBets)
@@ -94,7 +97,8 @@ export function QuickBet(props: {
         contract,
         sharesSold,
         sellOutcome,
-        unfilledBets
+        unfilledBets,
+        balanceByUserId
       )
       saleAmount = saleValue
       previewProb = getCpmmProbability(cpmmState.pool, cpmmState.p)
diff --git a/web/components/contract/share-modal.tsx b/web/components/contract/share-modal.tsx
index 72c7aba3..4b72e350 100644
--- a/web/components/contract/share-modal.tsx
+++ b/web/components/contract/share-modal.tsx
@@ -1,6 +1,3 @@
-import { LinkIcon } from '@heroicons/react/outline'
-import toast from 'react-hot-toast'
-
 import { Contract } from 'common/contract'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
@@ -9,9 +6,7 @@ import { Row } from '../layout/row'
 import { ShareEmbedButton } from '../share-embed-button'
 import { Title } from '../title'
 import { TweetButton } from '../tweet-button'
-import { Button } from '../button'
-import { copyToClipboard } from 'web/lib/util/copy'
-import { track, withTracking } from 'web/lib/service/analytics'
+import { withTracking } from 'web/lib/service/analytics'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { User } from 'common/user'
 import { SiteLink } from '../site-link'
@@ -22,6 +17,8 @@ import { useState } from 'react'
 import { CHALLENGES_ENABLED } from 'common/challenge'
 import ChallengeIcon from 'web/lib/icons/challenge-icon'
 import { QRCode } from '../qr-code'
+import { CopyLinkButton } from '../copy-link-button'
+import { Button } from '../button'
 
 export function ShareModal(props: {
   contract: Contract
@@ -34,7 +31,6 @@ export function ShareModal(props: {
 
   const [openCreateChallengeModal, setOpenCreateChallengeModal] =
     useState(false)
-  const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
   const showChallenge =
     user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
 
@@ -61,40 +57,24 @@ export function ShareModal(props: {
           width={150}
           height={150}
         />
-        <Button
-          size="2xl"
-          color="indigo"
-          className={'mb-2 flex max-w-xs self-center'}
-          onClick={() => {
-            copyToClipboard(shareUrl)
-            toast.success('Link copied!', {
-              icon: linkIcon,
-            })
-            track('copy share link')
-          }}
-        >
-          {linkIcon} Copy link
-        </Button>
+        <CopyLinkButton url={shareUrl} tracking="copy share link" />
 
         <Row className="z-0 flex-wrap justify-center gap-4 self-center">
-          <TweetButton
-            className="self-start"
-            tweetText={getTweetText(contract, shareUrl)}
-          />
+          <TweetButton tweetText={getTweetText(contract, shareUrl)} />
 
           <ShareEmbedButton contract={contract} />
 
           {showChallenge && (
-            <button
-              className={
-                'btn btn-xs flex-nowrap border-2 !border-indigo-500 !bg-white normal-case text-indigo-500'
-              }
+            <Button
+              size="2xs"
+              color="override"
+              className="gap-1 border-2  border-indigo-500 text-indigo-500 hover:bg-indigo-500 hover:text-white"
               onClick={withTracking(
                 () => setOpenCreateChallengeModal(true),
                 'click challenge button'
               )}
             >
-              ️<ChallengeIcon className="mr-1 h-4 w-4" /> Challenge
+              <ChallengeIcon className="h-4 w-4" /> Challenge
               <CreateChallengeModal
                 isOpen={openCreateChallengeModal}
                 setOpen={(open) => {
@@ -106,7 +86,7 @@ export function ShareModal(props: {
                 user={user}
                 contract={contract}
               />
-            </button>
+            </Button>
           )}
         </Row>
       </Col>
diff --git a/web/components/contract/tip-button.tsx b/web/components/contract/tip-button.tsx
index 0315c676..c34f88ff 100644
--- a/web/components/contract/tip-button.tsx
+++ b/web/components/contract/tip-button.tsx
@@ -1,7 +1,8 @@
-import { HeartIcon } from '@heroicons/react/outline'
-import { Button } from 'web/components/button'
-import { formatMoney } from 'common/util/format'
 import clsx from 'clsx'
+import { HeartIcon } from '@heroicons/react/outline'
+
+import { Button } from 'web/components/button'
+import { formatMoney, shortFormatNumber } from 'common/util/format'
 import { Col } from 'web/components/layout/col'
 import { Tooltip } from '../tooltip'
 
@@ -16,9 +17,15 @@ export function TipButton(props: {
   const { tipAmount, totalTipped, userTipped, isCompact, onClick, disabled } =
     props
 
+  const tipDisplay = shortFormatNumber(Math.ceil(totalTipped / 10))
+
   return (
     <Tooltip
-      text={disabled ? 'Tips' : `Tip ${formatMoney(tipAmount)}`}
+      text={
+        disabled
+          ? `Tips (${formatMoney(totalTipped)})`
+          : `Tip ${formatMoney(tipAmount)}`
+      }
       placement="bottom"
       noTap
       noFade
@@ -46,12 +53,12 @@ export function TipButton(props: {
             <div
               className={clsx(
                 'bg-greyscale-5 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
-                totalTipped > 99
+                tipDisplay.length > 2
                   ? 'text-[0.4rem] sm:text-[0.5rem]'
                   : 'sm:text-2xs text-[0.5rem]'
               )}
             >
-              {totalTipped}
+              {tipDisplay}
             </div>
           )}
         </Col>
diff --git a/web/components/copy-link-button.tsx b/web/components/copy-link-button.tsx
index f3489f3d..25f7e54a 100644
--- a/web/components/copy-link-button.tsx
+++ b/web/components/copy-link-button.tsx
@@ -21,10 +21,11 @@ export function CopyLinkButton(props: {
   return (
     <Row className="w-full">
       <input
-        className="input input-bordered flex-1 rounded-r-none text-gray-500"
+        className="block w-full rounded-none rounded-l-md border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
         readOnly
         type="text"
         value={displayUrl ?? url}
+        onFocus={(e) => e.target.select()}
       />
 
       <Menu
@@ -37,7 +38,7 @@ export function CopyLinkButton(props: {
       >
         <Menu.Button
           className={clsx(
-            'btn btn-xs border-2 border-green-600 bg-white normal-case text-green-600 hover:border-green-600 hover:bg-white',
+            'relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500',
             buttonClassName
           )}
         >
diff --git a/web/components/create-post.tsx b/web/components/create-post.tsx
index c176e61d..f7d9b8bd 100644
--- a/web/components/create-post.tsx
+++ b/web/components/create-post.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { Spacer } from 'web/components/layout/spacer'
 import { Title } from 'web/components/title'
-import Textarea from 'react-expanding-textarea'
 
 import { TextEditor, useTextEditor } from 'web/components/editor'
 import { createPost } from 'web/lib/firebase/api'
@@ -10,9 +9,12 @@ import Router from 'next/router'
 import { MAX_POST_TITLE_LENGTH } from 'common/post'
 import { postPath } from 'web/lib/firebase/posts'
 import { Group } from 'common/group'
+import { ExpandingInput } from './expanding-input'
 
 export function CreatePost(props: { group?: Group }) {
   const [title, setTitle] = useState('')
+  const [subtitle, setSubtitle] = useState('')
+
   const [error, setError] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -22,12 +24,17 @@ export function CreatePost(props: { group?: Group }) {
     disabled: isSubmitting,
   })
 
-  const isValid = editor && title.length > 0 && editor.isEmpty === false
+  const isValid =
+    editor &&
+    title.length > 0 &&
+    subtitle.length > 0 &&
+    editor.isEmpty === false
 
   async function savePost(title: string) {
     if (!editor) return
     const newPost = {
       title: title,
+      subtitle: subtitle,
       content: editor.getJSON(),
       groupId: group?.id,
     }
@@ -53,15 +60,27 @@ export function CreatePost(props: { group?: Group }) {
                 Title<span className={'text-red-700'}> *</span>
               </span>
             </label>
-            <Textarea
+            <ExpandingInput
               placeholder="e.g. Elon Mania Post"
-              className="input input-bordered resize-none"
               autoFocus
               maxLength={MAX_POST_TITLE_LENGTH}
               value={title}
               onChange={(e) => setTitle(e.target.value || '')}
             />
             <Spacer h={6} />
+            <label className="label">
+              <span className="mb-1">
+                Subtitle<span className={'text-red-700'}> *</span>
+              </span>
+            </label>
+            <ExpandingInput
+              placeholder="e.g. How Elon Musk is getting everyone's attention"
+              autoFocus
+              maxLength={MAX_POST_TITLE_LENGTH}
+              value={subtitle}
+              onChange={(e) => setSubtitle(e.target.value || '')}
+            />
+            <Spacer h={6} />
             <label className="label">
               <span className="mb-1">
                 Content<span className={'text-red-700'}> *</span>
diff --git a/web/components/copy-contract-button.tsx b/web/components/duplicate-contract-button.tsx
similarity index 78%
rename from web/components/copy-contract-button.tsx
rename to web/components/duplicate-contract-button.tsx
index 07e519e1..9c89d8c5 100644
--- a/web/components/copy-contract-button.tsx
+++ b/web/components/duplicate-contract-button.tsx
@@ -3,27 +3,22 @@ import clsx from 'clsx'
 import { Contract } from 'common/contract'
 import { getMappedValue } from 'common/pseudo-numeric'
 import { trackCallback } from 'web/lib/service/analytics'
+import { buttonClass } from './button'
 
-export function DuplicateContractButton(props: {
-  contract: Contract
-  className?: string
-}) {
-  const { contract, className } = props
+export function DuplicateContractButton(props: { contract: Contract }) {
+  const { contract } = props
 
   return (
     <a
-      className={clsx('btn btn-xs flex-nowrap normal-case', className)}
-      style={{
-        backgroundColor: 'white',
-        border: '2px solid #a78bfa',
-        // violet-400
-        color: '#a78bfa',
-      }}
+      className={clsx(
+        buttonClass('2xs', 'override'),
+        'gap-1 border-2 border-violet-400 text-violet-400 hover:bg-violet-400 hover:text-white'
+      )}
       href={duplicateContractHref(contract)}
       onClick={trackCallback('duplicate market')}
       target="_blank"
     >
-      <DuplicateIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
+      <DuplicateIcon className="h-4 w-4" aria-hidden="true" />
       <div>Duplicate</div>
     </a>
   )
@@ -40,6 +35,7 @@ function duplicateContractHref(contract: Contract) {
     closeTime,
     description: descriptionString,
     outcomeType: contract.outcomeType,
+    visibility: contract.visibility,
   } as Record<string, any>
 
   if (contract.outcomeType === 'PSEUDO_NUMERIC') {
diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index 5050a261..17cabc38 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -8,6 +8,7 @@ import {
   Content,
   Editor,
   mergeAttributes,
+  Extensions,
 } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { Image } from '@tiptap/extension-image'
@@ -19,9 +20,7 @@ import { uploadImage } from 'web/lib/firebase/storage'
 import { useMutation } from 'react-query'
 import { FileUploadButton } from './file-upload-button'
 import { linkClass } from './site-link'
-import { mentionSuggestion } from './editor/mention-suggestion'
 import { DisplayMention } from './editor/mention'
-import { contractMentionSuggestion } from './editor/contract-mention-suggestion'
 import { DisplayContractMention } from './editor/contract-mention'
 import Iframe from 'common/util/tiptap-iframe'
 import TiptapTweet from './editor/tiptap-tweet'
@@ -64,6 +63,22 @@ const DisplayLink = Link.extend({
   },
 })
 
+export const editorExtensions = (simple = false): Extensions => [
+  StarterKit.configure({
+    heading: simple ? false : { levels: [1, 2, 3] },
+    horizontalRule: simple ? false : {},
+  }),
+  simple ? DisplayImage : Image,
+  DisplayLink,
+  DisplayMention,
+  DisplayContractMention,
+  Iframe,
+  TiptapTweet,
+  TiptapSpoiler.configure({
+    spoilerOpenClass: 'rounded-sm bg-greyscale-2',
+  }),
+]
+
 const proseClass = clsx(
   'prose prose-p:my-0 prose-ul:my-0 prose-ol:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed',
   'font-light prose-a:font-light prose-blockquote:font-light'
@@ -89,29 +104,13 @@ export function useTextEditor(props: {
   const editor = useEditor({
     editorProps: { attributes: { class: editorClass } },
     extensions: [
-      StarterKit.configure({
-        heading: simple ? false : { levels: [1, 2, 3] },
-        horizontalRule: simple ? false : {},
-      }),
+      ...editorExtensions(simple),
       Placeholder.configure({
         placeholder,
         emptyEditorClass:
           'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0 cursor-text',
       }),
       CharacterCount.configure({ limit: max }),
-      simple ? DisplayImage : Image,
-      DisplayLink,
-      DisplayMention.configure({
-        suggestion: mentionSuggestion,
-      }),
-      DisplayContractMention.configure({
-        suggestion: contractMentionSuggestion,
-      }),
-      Iframe,
-      TiptapTweet,
-      TiptapSpoiler.configure({
-        spoilerOpenClass: 'rounded-sm bg-greyscale-2',
-      }),
     ],
     content: defaultValue,
   })
@@ -311,12 +310,12 @@ const useUploadMutation = (editor: Editor | null) =>
     {
       onSuccess(urls) {
         if (!editor) return
-        let trans = editor.view.state.tr
-        urls.forEach((src: any) => {
-          const node = editor.view.state.schema.nodes.image.create({ src })
-          trans = trans.insert(editor.view.state.selection.to, node)
+        let trans = editor.chain().focus()
+        urls.forEach((src) => {
+          trans = trans.createParagraphNear()
+          trans = trans.setImage({ src })
         })
-        editor.view.dispatch(trans)
+        trans.run()
       },
     }
   )
@@ -334,16 +333,13 @@ export function RichContent(props: {
       smallImage ? DisplayImage : Image,
       DisplayLink.configure({ openOnClick: false }), // stop link opening twice (browser still opens)
       DisplayMention,
-      DisplayContractMention.configure({
-        // Needed to set a different PluginKey for Prosemirror
-        suggestion: contractMentionSuggestion,
-      }),
+      DisplayContractMention,
       Iframe,
       TiptapTweet,
       TiptapSpoiler.configure({
         spoilerOpenClass: 'rounded-sm bg-greyscale-2 cursor-text',
         spoilerCloseClass:
-          'rounded-sm bg-greyscale-6 text-greyscale-6 cursor-pointer select-none',
+          'rounded-sm bg-greyscale-6 text-transparent [&_*]:invisible cursor-pointer select-none',
       }),
     ],
     content,
diff --git a/web/components/editor/contract-mention.tsx b/web/components/editor/contract-mention.tsx
index ddc81bc0..74df03c5 100644
--- a/web/components/editor/contract-mention.tsx
+++ b/web/components/editor/contract-mention.tsx
@@ -6,20 +6,28 @@ import {
 } from '@tiptap/react'
 import clsx from 'clsx'
 import { useContract } from 'web/hooks/use-contract'
-import { ContractCard } from '../contract/contract-card'
+import { ContractMention } from 'web/components/contract/contract-mention'
+import Link from 'next/link'
+import { contractMentionSuggestion } from './contract-mention-suggestion'
 
 const name = 'contract-mention-component'
 
 const ContractMentionComponent = (props: any) => {
-  const contract = useContract(props.node.attrs.id)
+  const { label, id } = props.node.attrs
+  const contract = useContract(id)
 
   return (
-    <NodeViewWrapper className={clsx(name, 'not-prose')}>
-      {contract && (
-        <ContractCard
-          contract={contract}
-          className="my-2 w-full border border-gray-100"
-        />
+    <NodeViewWrapper className={clsx(name, 'not-prose inline')}>
+      {contract ? (
+        <ContractMention contract={contract} />
+      ) : label ? (
+        <Link href={label}>
+          <a className="rounded-sm !text-indigo-700 hover:bg-indigo-50">
+            {label}
+          </a>
+        </Link>
+      ) : (
+        '[loading...]'
       )}
     </NodeViewWrapper>
   )
@@ -34,9 +42,5 @@ export const DisplayContractMention = Mention.extend({
   name: 'contract-mention',
   parseHTML: () => [{ tag: name }],
   renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
-  addNodeView: () =>
-    ReactNodeViewRenderer(ContractMentionComponent, {
-      // On desktop, render cards below half-width so you can stack two
-      className: 'inline-block sm:w-[calc(50%-1rem)] sm:mr-1',
-    }),
-})
+  addNodeView: () => ReactNodeViewRenderer(ContractMentionComponent),
+}).configure({ suggestion: contractMentionSuggestion })
diff --git a/web/components/editor/mention.tsx b/web/components/editor/mention.tsx
index 5ccea6f5..ea38a9f7 100644
--- a/web/components/editor/mention.tsx
+++ b/web/components/editor/mention.tsx
@@ -6,6 +6,7 @@ import {
 } from '@tiptap/react'
 import clsx from 'clsx'
 import { Linkify } from '../linkify'
+import { mentionSuggestion } from './mention-suggestion'
 
 const name = 'mention-component'
 
@@ -27,4 +28,4 @@ export const DisplayMention = Mention.extend({
   renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
   addNodeView: () =>
     ReactNodeViewRenderer(MentionComponent, { className: 'inline-block' }),
-})
+}).configure({ suggestion: mentionSuggestion })
diff --git a/web/components/expanding-input.tsx b/web/components/expanding-input.tsx
new file mode 100644
index 00000000..ff442348
--- /dev/null
+++ b/web/components/expanding-input.tsx
@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+import Textarea from 'react-expanding-textarea'
+
+/** Expanding `<textarea>` with same style as input.tsx */
+export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
+  const { className, ...rest } = props
+  return (
+    <Textarea
+      className={clsx(
+        'textarea textarea-bordered resize-none text-[16px] md:text-[14px]',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx
index e17ea578..11bc6139 100644
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/web/components/feed/feed-answer-comment-group.tsx
@@ -2,6 +2,7 @@ import { Answer } from 'common/answer'
 import { FreeResponseContract } from 'common/contract'
 import { ContractComment } from 'common/comment'
 import React, { useEffect, useRef, useState } from 'react'
+import { sum } from 'lodash'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
@@ -14,6 +15,8 @@ import {
 } from 'web/components/feed/feed-comments'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { useRouter } from 'next/router'
+import { useUser } from 'web/hooks/use-user'
+import { useEvent } from 'web/hooks/use-event'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { UserLink } from 'web/components/user-link'
 
@@ -27,11 +30,17 @@ export function FeedAnswerCommentGroup(props: {
   const { username, avatarUrl, name, text } = answer
 
   const [replyTo, setReplyTo] = useState<ReplyTo>()
+  const user = useUser()
   const router = useRouter()
   const answerElementId = `answer-${answer.id}`
   const highlighted = router.asPath.endsWith(`#${answerElementId}`)
   const answerRef = useRef<HTMLDivElement>(null)
 
+  const onSubmitComment = useEvent(() => setReplyTo(undefined))
+  const onReplyClick = useEvent((comment: ContractComment) => {
+    setReplyTo({ id: comment.id, username: comment.userUsername })
+  })
+
   useEffect(() => {
     if (highlighted && answerRef.current != null) {
       answerRef.current.scrollIntoView(true)
@@ -95,10 +104,10 @@ export function FeedAnswerCommentGroup(props: {
             indent={true}
             contract={contract}
             comment={comment}
-            tips={tips[comment.id] ?? {}}
-            onReplyClick={() =>
-              setReplyTo({ id: comment.id, username: comment.userUsername })
-            }
+            myTip={user ? tips[comment.id]?.[user.id] : undefined}
+            totalTip={sum(Object.values(tips[comment.id] ?? {}))}
+            showTip={true}
+            onReplyClick={onReplyClick}
           />
         ))}
       </Col>
@@ -112,7 +121,7 @@ export function FeedAnswerCommentGroup(props: {
             contract={contract}
             parentAnswerOutcome={answer.number.toString()}
             replyTo={replyTo}
-            onSubmitComment={() => setReplyTo(undefined)}
+            onSubmitComment={onSubmitComment}
           />
         </div>
       )}
diff --git a/web/components/feed/feed-bets.tsx b/web/components/feed/feed-bets.tsx
index b2852739..e164f6fa 100644
--- a/web/components/feed/feed-bets.tsx
+++ b/web/components/feed/feed-bets.tsx
@@ -1,3 +1,4 @@
+import React, { memo, useEffect } from 'react'
 import dayjs from 'dayjs'
 import { Contract } from 'common/contract'
 import { Bet } from 'common/bet'
@@ -8,7 +9,6 @@ import clsx from 'clsx'
 import { formatMoney, formatPercent } from 'common/util/format'
 import { OutcomeLabel } from 'web/components/outcome-label'
 import { RelativeTimestamp } from 'web/components/relative-timestamp'
-import React, { useEffect } from 'react'
 import { formatNumericProbability } from 'common/pseudo-numeric'
 import { SiteLink } from 'web/components/site-link'
 import { getChallenge, getChallengeUrl } from 'web/lib/firebase/challenges'
@@ -16,7 +16,10 @@ import { Challenge } from 'common/challenge'
 import { UserLink } from 'web/components/user-link'
 import { BETTOR } from 'common/user'
 
-export function FeedBet(props: { contract: Contract; bet: Bet }) {
+export const FeedBet = memo(function FeedBet(props: {
+  contract: Contract
+  bet: Bet
+}) {
   const { contract, bet } = props
   const { userAvatarUrl, userUsername, createdTime } = bet
   const showUser = dayjs(createdTime).isAfter('2022-06-01')
@@ -36,7 +39,7 @@ export function FeedBet(props: { contract: Contract; bet: Bet }) {
       />
     </Row>
   )
-}
+})
 
 export function BetStatusText(props: {
   contract: Contract
@@ -61,11 +64,11 @@ export function BetStatusText(props: {
   }, [challengeSlug, contract.id])
 
   const bought = amount >= 0 ? 'bought' : 'sold'
+  const money = formatMoney(Math.abs(amount))
   const outOfTotalAmount =
     bet.limitProb !== undefined && bet.orderAmount !== undefined
-      ? ` / ${formatMoney(bet.orderAmount)}`
+      ? ` of ${bet.isCancelled ? money : formatMoney(bet.orderAmount)}`
       : ''
-  const money = formatMoney(Math.abs(amount))
 
   const hadPoolMatch =
     (bet.limitProb === undefined ||
@@ -102,7 +105,6 @@ export function BetStatusText(props: {
       {!hideOutcome && (
         <>
           {' '}
-          of{' '}
           <OutcomeLabel
             outcome={outcome}
             value={(bet as any).value}
diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
index b9387a03..0cc7012d 100644
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@@ -1,11 +1,14 @@
+import React, { memo, useEffect, useRef, useState } from 'react'
+import { Editor } from '@tiptap/react'
+import { useRouter } from 'next/router'
+import { sum } from 'lodash'
+import clsx from 'clsx'
+
 import { ContractComment } from 'common/comment'
 import { Contract } from 'common/contract'
-import React, { useEffect, useRef, useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { formatMoney } from 'common/util/format'
-import { useRouter } from 'next/router'
 import { Row } from 'web/components/layout/row'
-import clsx from 'clsx'
 import { Avatar } from 'web/components/avatar'
 import { OutcomeLabel } from 'web/components/outcome-label'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
@@ -14,9 +17,9 @@ import { createCommentOnContract } from 'web/lib/firebase/comments'
 import { Col } from 'web/components/layout/col'
 import { track } from 'web/lib/service/analytics'
 import { Tipper } from '../tipper'
-import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
+import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { useEvent } from 'web/hooks/use-event'
 import { Content } from '../editor'
-import { Editor } from '@tiptap/react'
 import { UserLink } from 'web/components/user-link'
 import { CommentInput } from '../comment-input'
 import { AwardBountyButton } from 'web/components/award-bounty-button'
@@ -32,6 +35,12 @@ export function FeedCommentThread(props: {
   const { contract, threadComments, tips, parentComment } = props
   const [replyTo, setReplyTo] = useState<ReplyTo>()
 
+  const user = useUser()
+  const onSubmitComment = useEvent(() => setReplyTo(undefined))
+  const onReplyClick = useEvent((comment: ContractComment) => {
+    setReplyTo({ id: comment.id, username: comment.userUsername })
+  })
+
   return (
     <Col className="relative w-full items-stretch gap-3 pb-4">
       <span
@@ -44,10 +53,10 @@ export function FeedCommentThread(props: {
           indent={commentIdx != 0}
           contract={contract}
           comment={comment}
-          tips={tips[comment.id] ?? {}}
-          onReplyClick={() =>
-            setReplyTo({ id: comment.id, username: comment.userUsername })
-          }
+          myTip={user ? tips[comment.id]?.[user.id] : undefined}
+          totalTip={sum(Object.values(tips[comment.id] ?? {}))}
+          showTip={true}
+          onReplyClick={onReplyClick}
         />
       ))}
       {replyTo && (
@@ -60,7 +69,7 @@ export function FeedCommentThread(props: {
             contract={contract}
             parentCommentId={parentComment.id}
             replyTo={replyTo}
-            onSubmitComment={() => setReplyTo(undefined)}
+            onSubmitComment={onSubmitComment}
           />
         </Col>
       )}
@@ -68,14 +77,17 @@ export function FeedCommentThread(props: {
   )
 }
 
-export function FeedComment(props: {
+export const FeedComment = memo(function FeedComment(props: {
   contract: Contract
   comment: ContractComment
-  tips?: CommentTips
+  showTip?: boolean
+  myTip?: number
+  totalTip?: number
   indent?: boolean
-  onReplyClick?: () => void
+  onReplyClick?: (comment: ContractComment) => void
 }) {
-  const { contract, comment, tips, indent, onReplyClick } = props
+  const { contract, comment, myTip, totalTip, showTip, indent, onReplyClick } =
+    props
   const {
     text,
     content,
@@ -97,12 +109,18 @@ export function FeedComment(props: {
   }
   const totalAwarded = bountiesAwarded ?? 0
 
-  const router = useRouter()
-  const highlighted = router.asPath.endsWith(`#${comment.id}`)
+  const { isReady, asPath } = useRouter()
+  const [highlighted, setHighlighted] = useState(false)
   const commentRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (highlighted && commentRef.current != null) {
+    if (isReady && asPath.endsWith(`#${comment.id}`)) {
+      setHighlighted(true)
+    }
+  }, [isReady, asPath, comment.id])
+
+  useEffect(() => {
+    if (highlighted && commentRef.current) {
       commentRef.current.scrollIntoView(true)
     }
   }, [highlighted])
@@ -114,7 +132,7 @@ export function FeedComment(props: {
       className={clsx(
         'relative',
         indent ? 'ml-6' : '',
-        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
+        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] px-2 py-4` : ''
       )}
     >
       {/*draw a gray line from the comment to the left:*/}
@@ -180,12 +198,18 @@ export function FeedComment(props: {
           {onReplyClick && (
             <button
               className="font-bold hover:underline"
-              onClick={onReplyClick}
+              onClick={() => onReplyClick(comment)}
             >
               Reply
             </button>
           )}
-          {tips && <Tipper comment={comment} tips={tips} />}
+          {showTip && (
+            <Tipper
+              comment={comment}
+              myTip={myTip ?? 0}
+              totalTip={totalTip ?? 0}
+            />
+          )}
           {(contract.openCommentBounties ?? 0) > 0 && (
             <AwardBountyButton comment={comment} contract={contract} />
           )}
@@ -193,7 +217,7 @@ export function FeedComment(props: {
       </div>
     </Row>
   )
-}
+})
 
 function CommentStatus(props: {
   contract: Contract
diff --git a/web/components/filter-select-users.tsx b/web/components/filter-select-users.tsx
index 415a6d57..8ec453d2 100644
--- a/web/components/filter-select-users.tsx
+++ b/web/components/filter-select-users.tsx
@@ -8,6 +8,7 @@ import { Avatar } from 'web/components/avatar'
 import { Row } from 'web/components/layout/row'
 import { searchInAny } from 'common/util/parse'
 import { UserLink } from 'web/components/user-link'
+import { Input } from './input'
 
 export function FilterSelectUsers(props: {
   setSelectedUsers: (users: User[]) => void
@@ -50,13 +51,13 @@ export function FilterSelectUsers(props: {
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
               <UserIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
             </div>
-            <input
+            <Input
               type="text"
               name="user name"
               id="user name"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
-              className="input input-bordered block w-full pl-10 focus:border-gray-300 "
+              className="block w-full pl-10"
               placeholder="Austin Chen"
             />
           </div>
diff --git a/web/components/groups/contract-groups-list.tsx b/web/components/groups/contract-groups-list.tsx
index d39a35d3..e19e2113 100644
--- a/web/components/groups/contract-groups-list.tsx
+++ b/web/components/groups/contract-groups-list.tsx
@@ -53,30 +53,30 @@ export function ContractGroupsList(props: {
           />
         </Col>
       )}
-      {groups.length === 0 && (
-        <Col className="ml-2 h-full justify-center text-gray-500">
-          No groups yet...
-        </Col>
-      )}
-      {groups.map((group) => (
-        <Row
-          key={group.id}
-          className={clsx('items-center justify-between gap-2 p-2')}
-        >
-          <Row className="line-clamp-1 items-center gap-2">
-            <GroupLinkItem group={group} />
+      <Col className="h-96 overflow-auto">
+        {groups.length === 0 && (
+          <Col className="text-greyscale-4">No groups yet...</Col>
+        )}
+        {groups.map((group) => (
+          <Row
+            key={group.id}
+            className={clsx('items-center justify-between gap-2 p-2')}
+          >
+            <Row className="line-clamp-1 items-center gap-2">
+              <GroupLinkItem group={group} />
+            </Row>
+            {user && canModifyGroupContracts(group, user.id) && (
+              <Button
+                color={'gray-white'}
+                size={'xs'}
+                onClick={() => removeContractFromGroup(group, contract)}
+              >
+                <XIcon className="text-greyscale-4 h-4 w-4" />
+              </Button>
+            )}
           </Row>
-          {user && canModifyGroupContracts(group, user.id) && (
-            <Button
-              color={'gray-white'}
-              size={'xs'}
-              onClick={() => removeContractFromGroup(group, contract)}
-            >
-              <XIcon className="h-4 w-4 text-gray-500" />
-            </Button>
-          )}
-        </Row>
-      ))}
+        ))}
+      </Col>
     </Col>
   )
 }
diff --git a/web/components/groups/create-group-button.tsx b/web/components/groups/create-group-button.tsx
index e8376b4b..017fa4a6 100644
--- a/web/components/groups/create-group-button.tsx
+++ b/web/components/groups/create-group-button.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { groupPath } from 'web/lib/firebase/groups'
@@ -9,6 +8,7 @@ import { Title } from '../title'
 import { User } from 'common/user'
 import { MAX_GROUP_NAME_LENGTH } from 'common/group'
 import { createGroup } from 'web/lib/firebase/api'
+import { Input } from '../input'
 
 export function CreateGroupButton(props: {
   user: User
@@ -87,10 +87,8 @@ export function CreateGroupButton(props: {
       }}
       submitBtn={{
         label: 'Create',
-        className: clsx(
-          'normal-case',
-          isSubmitting ? 'loading btn-disabled' : ' btn-primary'
-        ),
+        color: 'green',
+        isSubmitting,
       }}
       onSubmitWithSuccess={onSubmit}
       onOpenChanged={(isOpen) => {
@@ -107,9 +105,8 @@ export function CreateGroupButton(props: {
 
       <div className="form-control w-full">
         <label className="mb-2 ml-1 mt-0">Group name</label>
-        <input
+        <Input
           placeholder={'Your group name'}
-          className="input input-bordered resize-none"
           disabled={isSubmitting}
           value={name}
           maxLength={MAX_GROUP_NAME_LENGTH}
diff --git a/web/components/groups/edit-group-button.tsx b/web/components/groups/edit-group-button.tsx
index bc8af2ac..c427be5c 100644
--- a/web/components/groups/edit-group-button.tsx
+++ b/web/components/groups/edit-group-button.tsx
@@ -3,13 +3,14 @@ import clsx from 'clsx'
 import { PencilIcon } from '@heroicons/react/outline'
 
 import { Group } from 'common/group'
-import { deleteGroup, joinGroup } from 'web/lib/firebase/groups'
+import { deleteGroup, joinGroup, updateGroup } from 'web/lib/firebase/groups'
 import { Spacer } from '../layout/spacer'
 import { useRouter } from 'next/router'
 import { Modal } from 'web/components/layout/modal'
 import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { User } from 'common/user'
 import { useMemberIds } from 'web/hooks/use-group'
+import { Input } from '../input'
 
 export function EditGroupButton(props: { group: Group; className?: string }) {
   const { group, className } = props
@@ -31,6 +32,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
     setIsSubmitting(true)
 
     await Promise.all(addMemberUsers.map((user) => joinGroup(group, user.id)))
+    await updateGroup(group, { name })
 
     setIsSubmitting(false)
     updateOpen(false)
@@ -53,9 +55,8 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
               <span className="mb-1">Group name</span>
             </label>
 
-            <input
+            <Input
               placeholder="Your group name"
-              className="input input-bordered resize-none"
               disabled={isSubmitting}
               value={name}
               onChange={(e) => setName(e.target.value || '')}
diff --git a/web/components/groups/group-overview-post.tsx b/web/components/groups/group-overview-post.tsx
index 55f0efca..01ca13ba 100644
--- a/web/components/groups/group-overview-post.tsx
+++ b/web/components/groups/group-overview-post.tsx
@@ -6,12 +6,13 @@ import { Spacer } from '../layout/spacer'
 import { Group } from 'common/group'
 import { deleteFieldFromGroup, updateGroup } from 'web/lib/firebase/groups'
 import PencilIcon from '@heroicons/react/solid/PencilIcon'
-import { DocumentRemoveIcon } from '@heroicons/react/solid'
+import { TrashIcon } from '@heroicons/react/solid'
 import { createPost } from 'web/lib/firebase/api'
 import { Post } from 'common/post'
 import { deletePost, updatePost } from 'web/lib/firebase/posts'
 import { useState } from 'react'
 import { usePost } from 'web/hooks/use-post'
+import { Col } from '../layout/col'
 
 export function GroupOverviewPost(props: {
   group: Group
@@ -43,6 +44,7 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
     if (!editor) return
     const newPost = {
       title: group.name,
+      subtitle: 'About post for the group',
       content: editor.getJSON(),
     }
 
@@ -98,35 +100,31 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
           </p>
         </div>
       ) : (
-        <div className="relative">
-          <div className="absolute top-0 right-0 z-10 space-x-2">
+        <Col>
+          <Content content={post.content} />
+          <Row className="place-content-end">
             <Button
-              color="gray"
-              size="xs"
+              color="gray-white"
+              size="2xs"
               onClick={() => {
                 setEditing(true)
                 editor?.commands.focus('end')
               }}
             >
-              <PencilIcon className="inline h-4 w-4" />
-              Edit
+              <PencilIcon className="inline h-5 w-5" />
             </Button>
 
             <Button
-              color="gray"
-              size="xs"
+              color="gray-white"
+              size="2xs"
               onClick={() => {
                 deleteGroupAboutPost()
               }}
             >
-              <DocumentRemoveIcon className="inline h-4 w-4" />
-              Delete
+              <TrashIcon className="inline h-5 w-5 text-red-500" />
             </Button>
-          </div>
-
-          <Content content={post.content} />
-          <Spacer h={2} />
-        </div>
+          </Row>
+        </Col>
       )}
     </>
   )
diff --git a/web/components/groups/group-overview.tsx b/web/components/groups/group-overview.tsx
index 9b0f7240..d5cdaafa 100644
--- a/web/components/groups/group-overview.tsx
+++ b/web/components/groups/group-overview.tsx
@@ -36,7 +36,11 @@ import { CopyLinkButton } from '../copy-link-button'
 import { REFERRAL_AMOUNT } from 'common/economy'
 import toast from 'react-hot-toast'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { PostCard } from '../post-card'
+import { PostCard, PostCardList } from '../post-card'
+import { LoadingIndicator } from '../loading-indicator'
+import { useUser } from 'web/hooks/use-user'
+import { CreatePost } from '../create-post'
+import { Modal } from '../layout/modal'
 
 const MAX_TRENDING_POSTS = 6
 
@@ -58,7 +62,6 @@ export function GroupOverview(props: {
         posts={posts}
         isEditable={isEditable}
       />
-
       {(group.aboutPostId != null || isEditable) && (
         <>
           <SectionHeader label={'About'} href={'/post/' + group.slug} />
@@ -86,10 +89,55 @@ export function GroupOverview(props: {
         user={user}
         memberIds={memberIds}
       />
+
+      <GroupPosts group={group} posts={posts} />
     </Col>
   )
 }
 
+export function GroupPosts(props: { posts: Post[]; group: Group }) {
+  const { posts, group } = props
+  const [showCreatePost, setShowCreatePost] = useState(false)
+  const user = useUser()
+
+  const createPost = (
+    <Modal size="xl" open={showCreatePost} setOpen={setShowCreatePost}>
+      <div className="w-full bg-white py-10">
+        <CreatePost group={group} />
+      </div>
+    </Modal>
+  )
+
+  const postList = (
+    <div className=" align-start w-full items-start">
+      <Row className="flex justify-between">
+        <Col>
+          <SectionHeader label={'Latest Posts'} />
+        </Col>
+        <Col>
+          {user && (
+            <Button
+              className="btn-md"
+              onClick={() => setShowCreatePost(!showCreatePost)}
+            >
+              Add a Post
+            </Button>
+          )}
+        </Col>
+      </Row>
+
+      <div className="mt-2">
+        <PostCardList posts={posts} />
+        {posts.length === 0 && (
+          <div className="text-center text-gray-500">No posts yet</div>
+        )}
+      </div>
+    </div>
+  )
+
+  return showCreatePost ? createPost : postList
+}
+
 function GroupOverviewPinned(props: {
   group: Group
   posts: Post[]
@@ -97,8 +145,6 @@ function GroupOverviewPinned(props: {
 }) {
   const { group, posts, isEditable } = props
   const [pinned, setPinned] = useState<JSX.Element[]>([])
-  const [open, setOpen] = useState(false)
-  const [editMode, setEditMode] = useState(false)
 
   useEffect(() => {
     async function getPinned() {
@@ -137,11 +183,53 @@ function GroupOverviewPinned(props: {
         ...(selectedItems as { itemId: string; type: 'contract' | 'post' }[]),
       ],
     })
-    setOpen(false)
   }
 
-  return isEditable || pinned.length > 0 ? (
-    <>
+  function onDeleteClicked(index: number) {
+    const newPinned = group.pinnedItems.filter((item) => {
+      return item.itemId !== group.pinnedItems[index].itemId
+    })
+    updateGroup(group, { pinnedItems: newPinned })
+  }
+
+  return isEditable || (group.pinnedItems && group.pinnedItems.length > 0) ? (
+    <PinnedItems
+      posts={posts}
+      group={group}
+      isEditable={isEditable}
+      pinned={pinned}
+      onDeleteClicked={onDeleteClicked}
+      onSubmit={onSubmit}
+      modalMessage={'Pin posts or markets to the overview of this group.'}
+    />
+  ) : (
+    <LoadingIndicator />
+  )
+}
+
+export function PinnedItems(props: {
+  posts: Post[]
+  isEditable: boolean
+  pinned: JSX.Element[]
+  onDeleteClicked: (index: number) => void
+  onSubmit: (selectedItems: { itemId: string; type: string }[]) => void
+  group?: Group
+  modalMessage: string
+}) {
+  const {
+    isEditable,
+    pinned,
+    onDeleteClicked,
+    onSubmit,
+    posts,
+    group,
+    modalMessage,
+  } = props
+  const [editMode, setEditMode] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  return pinned.length > 0 || isEditable ? (
+    <div>
       <Row className="mb-3 items-center justify-between">
         <SectionHeader label={'Pinned'} />
         {isEditable && (
@@ -180,19 +268,10 @@ function GroupOverviewPinned(props: {
             <div className="relative my-2">
               {element}
 
-              {editMode && (
-                <CrossIcon
-                  onClick={() => {
-                    const newPinned = group.pinnedItems.filter((item) => {
-                      return item.itemId !== group.pinnedItems[index].itemId
-                    })
-                    updateGroup(group, { pinnedItems: newPinned })
-                  }}
-                />
-              )}
+              {editMode && <CrossIcon onClick={() => onDeleteClicked(index)} />}
             </div>
           ))}
-          {editMode && group.pinnedItems && pinned.length < 6 && (
+          {editMode && pinned.length < 6 && (
             <div className=" py-2">
               <Row
                 className={
@@ -220,13 +299,11 @@ function GroupOverviewPinned(props: {
         setOpen={setOpen}
         title="Pin a post or market"
         description={
-          <div className={'text-md my-4 text-gray-600'}>
-            Pin posts or markets to the overview of this group.
-          </div>
+          <div className={'text-md my-4 text-gray-600'}>{modalMessage}</div>
         }
         onSubmit={onSubmit}
       />
-    </>
+    </div>
   ) : (
     <></>
   )
diff --git a/web/components/groups/group-selector.tsx b/web/components/groups/group-selector.tsx
index caeb5f7d..04c2a804 100644
--- a/web/components/groups/group-selector.tsx
+++ b/web/components/groups/group-selector.tsx
@@ -163,7 +163,7 @@ export function GroupSelector(props: {
                   user={creator}
                   onOpenStateChange={setIsCreatingNewGroup}
                   className={
-                    'w-full justify-start rounded-none border-0 bg-white pl-2 font-normal text-gray-900 hover:bg-indigo-500 hover:text-white'
+                    'flex w-full flex-row items-center justify-start rounded-none border-0 bg-white pl-2 font-normal text-gray-900 hover:bg-indigo-500 hover:text-white'
                   }
                   label={'Create a new Group'}
                   addGroupIdParamOnSubmit
diff --git a/web/components/groups/groups-button.tsx b/web/components/groups/groups-button.tsx
index 5c9d2edd..814efd81 100644
--- a/web/components/groups/groups-button.tsx
+++ b/web/components/groups/groups-button.tsx
@@ -13,6 +13,7 @@ import { joinGroup, leaveGroup } from 'web/lib/firebase/groups'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { GroupLinkItem } from 'web/pages/groups'
 import toast from 'react-hot-toast'
+import { Button } from '../button'
 
 export function GroupsButton(props: { user: User; className?: string }) {
   const { user, className } = props
@@ -92,23 +93,22 @@ export function JoinOrLeaveGroupButton(props: {
   group: Group
   isMember: boolean
   user: User | undefined | null
-  small?: boolean
   className?: string
 }) {
-  const { group, small, className, isMember, user } = props
-  const smallStyle =
-    'btn !btn-xs border-2 border-gray-500 bg-white normal-case text-gray-500 hover:border-gray-500 hover:bg-white hover:text-gray-500'
+  const { group, className, isMember, user } = props
 
   if (!user) {
     if (!group.anyoneCanJoin)
       return <div className={clsx(className, 'text-gray-500')}>Closed</div>
     return (
-      <button
+      <Button
+        size="xs"
+        color="blue"
         onClick={firebaseLogin}
-        className={clsx('btn btn-sm', small && smallStyle, className)}
+        className={className}
       >
         Login to follow
-      </button>
+      </Button>
     )
   }
   const onJoinGroup = () => {
@@ -124,27 +124,27 @@ export function JoinOrLeaveGroupButton(props: {
 
   if (isMember) {
     return (
-      <button
-        className={clsx(
-          'btn btn-outline btn-xs',
-          small && smallStyle,
-          className
-        )}
+      <Button
+        size="xs"
+        color="gray-white"
+        className={`${className}  border-greyscale-4 border !border-solid`}
         onClick={withTracking(onLeaveGroup, 'leave group')}
       >
         Unfollow
-      </button>
+      </Button>
     )
   }
 
   if (!group.anyoneCanJoin)
     return <div className={clsx(className, 'text-gray-500')}>Closed</div>
   return (
-    <button
-      className={clsx('btn btn-sm', small && smallStyle, className)}
+    <Button
+      size="xs"
+      color="blue"
+      className={className}
       onClick={withTracking(onJoinGroup, 'join group')}
     >
       Follow
-    </button>
+    </Button>
   )
 }
diff --git a/web/components/input.tsx b/web/components/input.tsx
new file mode 100644
index 00000000..f37bfc78
--- /dev/null
+++ b/web/components/input.tsx
@@ -0,0 +1,22 @@
+import clsx from 'clsx'
+import React from 'react'
+
+/** Text input. Wraps html `<input>` */
+export const Input = (props: JSX.IntrinsicElements['input']) => {
+  const { className, ...rest } = props
+
+  return (
+    <input
+      className={clsx('input input-bordered text-base md:text-sm', className)}
+      {...rest}
+    />
+  )
+}
+
+/*
+  TODO: replace daisyui style with our own. For reference:
+
+  james: text-lg placeholder:text-gray-400
+  inga: placeholder:text-greyscale-4 border-greyscale-2 rounded-md
+  austin: border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
+ */
diff --git a/web/components/limit-bets.tsx b/web/components/limit-bets.tsx
index bd9ed246..49578fba 100644
--- a/web/components/limit-bets.tsx
+++ b/web/components/limit-bets.tsx
@@ -182,7 +182,7 @@ export function OrderBookButton(props: {
         size="xs"
         color="blue"
       >
-        {limitBets.length} Limit orders
+        Order book ({limitBets.length})
       </Button>
 
       <Modal open={open} setOpen={setOpen} size="lg">
diff --git a/web/components/linkify.tsx b/web/components/linkify.tsx
index a24ab0b6..dffaa88e 100644
--- a/web/components/linkify.tsx
+++ b/web/components/linkify.tsx
@@ -2,8 +2,7 @@ import clsx from 'clsx'
 import { Fragment } from 'react'
 import { SiteLink } from './site-link'
 
-// Return a JSX span, linkifying @username, #hashtags, and https://...
-// TODO: Use a markdown parser instead of rolling our own here.
+// Return a JSX span, linkifying @username, and https://...
 export function Linkify(props: {
   text: string
   className?: string
@@ -16,7 +15,7 @@ export function Linkify(props: {
 
   // Find instances of @username, #hashtag, and https://...
   const regex =
-    /(?:^|\s)(?:[@#][a-z0-9_]+|https?:\/\/[-A-Za-z0-9+&@#/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#/%=~_|])/gi
+    /(?:^|\s)(?:@[a-z0-9_]+|https?:\/\/[-A-Za-z0-9+&@#/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#/%=~_|])/gi
   const matches = text.match(regex) || []
   const links = matches.map((match) => {
     // Matches are in the form: " @username" or "https://example.com"
@@ -26,7 +25,6 @@ export function Linkify(props: {
     const href =
       {
         '@': `/${tag}`,
-        '#': `/tag/${tag}`,
       }[symbol] ?? match.trim()
 
     return (
diff --git a/web/components/manalinks/create-links-button.tsx b/web/components/manalinks/create-links-button.tsx
index 449d6c76..8d5bac67 100644
--- a/web/components/manalinks/create-links-button.tsx
+++ b/web/components/manalinks/create-links-button.tsx
@@ -7,12 +7,13 @@ import { User } from 'common/user'
 import { ManalinkCard, ManalinkInfo } from 'web/components/manalink-card'
 import { createManalink } from 'web/lib/firebase/manalinks'
 import { Modal } from 'web/components/layout/modal'
-import Textarea from 'react-expanding-textarea'
 import dayjs from 'dayjs'
 import { Button } from '../button'
 import { getManalinkUrl } from 'web/pages/links'
 import { DuplicateIcon } from '@heroicons/react/outline'
 import { QRCode } from '../qr-code'
+import { Input } from '../input'
+import { ExpandingInput } from '../expanding-input'
 
 export function CreateLinksButton(props: {
   user: User
@@ -120,8 +121,8 @@ function CreateManalinkForm(props: {
                 <span className="absolute mx-3 mt-3.5 text-sm text-gray-400">
                   M$
                 </span>
-                <input
-                  className="input input-bordered w-full pl-10"
+                <Input
+                  className="w-full pl-10"
                   type="number"
                   min="1"
                   value={newManalink.amount}
@@ -136,8 +137,7 @@ function CreateManalinkForm(props: {
             <div className="flex flex-col gap-2 md:flex-row">
               <div className="form-control w-full md:w-1/2">
                 <label className="label">Uses</label>
-                <input
-                  className="input input-bordered"
+                <Input
                   type="number"
                   min="1"
                   value={newManalink.maxUses ?? ''}
@@ -146,7 +146,7 @@ function CreateManalinkForm(props: {
                       return { ...m, maxUses: parseInt(e.target.value) }
                     })
                   }
-                ></input>
+                />
               </div>
               <div className="form-control w-full md:w-1/2">
                 <label className="label">Expires in</label>
@@ -165,10 +165,9 @@ function CreateManalinkForm(props: {
             </div>
             <div className="form-control w-full">
               <label className="label">Message</label>
-              <Textarea
+              <ExpandingInput
                 placeholder={defaultMessage}
                 maxLength={200}
-                className="input input-bordered resize-none"
                 autoFocus
                 value={newManalink.message}
                 rows="3"
diff --git a/web/components/nav/manifold-logo.tsx b/web/components/nav/manifold-logo.tsx
index ec15d54b..b6dbc885 100644
--- a/web/components/nav/manifold-logo.tsx
+++ b/web/components/nav/manifold-logo.tsx
@@ -22,6 +22,7 @@ export function ManifoldLogo(props: {
           src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
           width={45}
           height={45}
+          alt=""
         />
 
         {!hideText &&
diff --git a/web/components/nav/more-button.tsx b/web/components/nav/more-button.tsx
index 5e6653f3..7f3317e1 100644
--- a/web/components/nav/more-button.tsx
+++ b/web/components/nav/more-button.tsx
@@ -11,13 +11,13 @@ function SidebarButton(props: {
 }) {
   const { text, children } = props
   return (
-    <a className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-100">
+    <div className="group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-100">
       <props.icon
         className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
         aria-hidden="true"
       />
       <span className="truncate">{text}</span>
       {children}
-    </a>
+    </div>
   )
 }
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index efe7994b..c8c4cd80 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -63,7 +63,8 @@ export default function Sidebar(props: {
       )}
       <Spacer h={6} />
 
-      {!user && <SignInButton className="mb-4" />}
+      {user === undefined && <div className="h-[178px]" />}
+      {user === null && <SignInButton className="mb-4" />}
 
       {user && <ProfileSummary user={user} />}
 
@@ -155,7 +156,7 @@ function getMoreDesktopNavigation(user?: User | null) {
   return buildArray(
     { name: 'Leaderboards', href: '/leaderboards' },
     { name: 'Groups', href: '/groups' },
-    { name: 'Referrals', href: '/referrals' },
+    { name: 'Refer a friend', href: '/referrals' },
     { name: 'Charity', href: '/charity' },
     { name: 'Labs', href: '/labs' },
     { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
@@ -214,7 +215,7 @@ function getMoreMobileNav() {
 
   return buildArray<MenuItem>(
     { name: 'Groups', href: '/groups' },
-    { name: 'Referrals', href: '/referrals' },
+    { name: 'Refer a friend', href: '/referrals' },
     { name: 'Charity', href: '/charity' },
     { name: 'Labs', href: '/labs' },
     { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
diff --git a/web/components/notification-settings.tsx b/web/components/notification-settings.tsx
index f0b9591e..58a606f2 100644
--- a/web/components/notification-settings.tsx
+++ b/web/components/notification-settings.tsx
@@ -10,6 +10,7 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   CurrencyDollarIcon,
+  ExclamationIcon,
   InboxInIcon,
   InformationCircleIcon,
   LightBulbIcon,
@@ -63,6 +64,7 @@ export function NotificationSettings(props: {
     'contract_from_followed_user',
     'unique_bettors_on_your_contract',
     'profit_loss_updates',
+    'opt_out_all',
     // TODO: add these
     // biggest winner, here are the rest of your markets
 
@@ -116,7 +118,7 @@ export function NotificationSettings(props: {
   const yourMarkets: SectionData = {
     label: 'Markets You Created',
     subscriptionTypes: [
-      'your_contract_closed',
+      // 'your_contract_closed',
       'all_comments_on_my_markets',
       'all_answers_on_my_markets',
       'subsidized_your_market',
@@ -137,6 +139,7 @@ export function NotificationSettings(props: {
       'loan_income',
       'limit_order_fills',
       'tips_on_your_comments',
+      'badges_awarded',
     ],
   }
   const userInteractions: SectionData = {
@@ -157,20 +160,56 @@ export function NotificationSettings(props: {
     ],
   }
 
+  const optOut: SectionData = {
+    label: 'Opt Out',
+    subscriptionTypes: ['opt_out_all'],
+  }
+
   function NotificationSettingLine(props: {
     description: string
     subscriptionTypeKey: notification_preference
     destinations: notification_destination_types[]
+    optOutAll: notification_destination_types[]
   }) {
-    const { description, subscriptionTypeKey, destinations } = props
+    const { description, subscriptionTypeKey, destinations, optOutAll } = props
     const previousInAppValue = destinations.includes('browser')
     const previousEmailValue = destinations.includes('email')
     const [inAppEnabled, setInAppEnabled] = useState(previousInAppValue)
     const [emailEnabled, setEmailEnabled] = useState(previousEmailValue)
+    const [error, setError] = useState<string>('')
     const loading = 'Changing Notifications Settings'
     const success = 'Changed Notification Settings!'
     const highlight = navigateToSection === subscriptionTypeKey
 
+    const attemptToChangeSetting = (
+      setting: 'browser' | 'email',
+      newValue: boolean
+    ) => {
+      const necessaryError =
+        'This notification type is necessary. At least one destination must be enabled.'
+      const necessarySetting =
+        NOTIFICATION_DESCRIPTIONS[subscriptionTypeKey].necessary
+      if (
+        necessarySetting &&
+        setting === 'browser' &&
+        !emailEnabled &&
+        !newValue
+      ) {
+        setError(necessaryError)
+        return
+      } else if (
+        necessarySetting &&
+        setting === 'email' &&
+        !inAppEnabled &&
+        !newValue
+      ) {
+        setError(necessaryError)
+        return
+      }
+
+      changeSetting(setting, newValue)
+    }
+
     const changeSetting = (setting: 'browser' | 'email', newValue: boolean) => {
       toast
         .promise(
@@ -212,18 +251,21 @@ export function NotificationSettings(props: {
             {!browserDisabled.includes(subscriptionTypeKey) && (
               <SwitchSetting
                 checked={inAppEnabled}
-                onChange={(newVal) => changeSetting('browser', newVal)}
+                onChange={(newVal) => attemptToChangeSetting('browser', newVal)}
                 label={'Web'}
+                disabled={optOutAll.includes('browser')}
               />
             )}
             {emailsEnabled.includes(subscriptionTypeKey) && (
               <SwitchSetting
                 checked={emailEnabled}
-                onChange={(newVal) => changeSetting('email', newVal)}
+                onChange={(newVal) => attemptToChangeSetting('email', newVal)}
                 label={'Email'}
+                disabled={optOutAll.includes('email')}
               />
             )}
           </Row>
+          {error && <span className={'text-error'}>{error}</span>}
         </Col>
       </Row>
     )
@@ -283,6 +325,11 @@ export function NotificationSettings(props: {
                 subType as notification_preference
               )}
               description={NOTIFICATION_DESCRIPTIONS[subType].simple}
+              optOutAll={
+                subType === 'opt_out_all' || subType === 'your_contract_closed'
+                  ? []
+                  : getUsersSavedPreference('opt_out_all')
+              }
             />
           ))}
         </Col>
@@ -332,6 +379,10 @@ export function NotificationSettings(props: {
           icon={<InboxInIcon className={'h-6 w-6'} />}
           data={generalOther}
         />
+        <Section
+          icon={<ExclamationIcon className={'h-6 w-6'} />}
+          data={optOut}
+        />
         <WatchMarketModal open={showWatchModal} setOpen={setShowWatchModal} />
       </Col>
     </div>
diff --git a/web/components/number-input.tsx b/web/components/number-input.tsx
index 0b48df6e..6509a5d7 100644
--- a/web/components/number-input.tsx
+++ b/web/components/number-input.tsx
@@ -4,6 +4,7 @@ import { ReactNode } from 'react'
 import React from 'react'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
+import { Input } from './input'
 
 export function NumberInput(props: {
   numberString: string
@@ -32,9 +33,9 @@ export function NumberInput(props: {
   return (
     <Col className={className}>
       <label className="input-group">
-        <input
+        <Input
           className={clsx(
-            'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
+            'max-w-[200px] !text-lg',
             error && 'input-error',
             inputClassName
           )}
diff --git a/web/components/numeric-resolution-panel.tsx b/web/components/numeric-resolution-panel.tsx
index fa36dff3..f5fbb53c 100644
--- a/web/components/numeric-resolution-panel.tsx
+++ b/web/components/numeric-resolution-panel.tsx
@@ -73,13 +73,6 @@ export function NumericResolutionPanel(props: {
     setIsSubmitting(false)
   }
 
-  const submitButtonClass =
-    outcomeMode === 'CANCEL'
-      ? 'bg-yellow-400 hover:bg-yellow-500'
-      : outcome !== undefined
-      ? 'btn-primary'
-      : 'btn-disabled'
-
   return (
     <Col
       className={clsx(
@@ -129,7 +122,6 @@ export function NumericResolutionPanel(props: {
         onResolve={resolve}
         isSubmitting={isSubmitting}
         openModalButtonClass={clsx('w-full mt-2')}
-        submitButtonClass={submitButtonClass}
         color={outcomeMode === 'CANCEL' ? 'yellow' : 'indigo'}
         disabled={outcomeMode === undefined}
       />
diff --git a/web/components/onboarding/group-selector-dialog.tsx b/web/components/onboarding/group-selector-dialog.tsx
index 0a246403..9c489bb1 100644
--- a/web/components/onboarding/group-selector-dialog.tsx
+++ b/web/components/onboarding/group-selector-dialog.tsx
@@ -72,6 +72,7 @@ export default function GroupSelectorDialog(props: {
           ) : (
             displayedGroups.map((group) => (
               <PillButton
+                key={group.id}
                 selected={memberGroupIds.includes(group.id)}
                 onSelect={withTracking(
                   () =>
diff --git a/web/components/onboarding/welcome.tsx b/web/components/onboarding/welcome.tsx
index eb51f2de..2ef24764 100644
--- a/web/components/onboarding/welcome.tsx
+++ b/web/components/onboarding/welcome.tsx
@@ -1,7 +1,11 @@
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ExclamationCircleIcon,
+} from '@heroicons/react/solid'
 
 import { User } from 'common/user'
 import { useUser } from 'web/hooks/use-user'
@@ -171,13 +175,17 @@ function Page2() {
         the play money you bet with. You can also turn it into a real donation
         to charity, at a 100:1 ratio.
       </p>
+      <Row className="bg-greyscale-1 border-greyscale-2 mt-4 gap-2 rounded border py-2 pl-2 pr-4 text-sm text-indigo-700">
+        <ExclamationCircleIcon className="h-5 w-5" />
+        Mana can not be traded in for real money.
+      </Row>
       <div className="mt-8 font-semibold">Example</div>
       <p className="mt-2">
         When you donate <span className="font-semibold">M$1000</span> to
         Givewell, Manifold sends them{' '}
         <span className="font-semibold">$10 USD</span>.
       </p>
-      <video loop autoPlay className="my-4 h-full w-full">
+      <video loop autoPlay className="z-0 h-full w-full">
         <source src="/welcome/charity.mp4" type="video/mp4" />
         Your browser does not support video
       </video>
diff --git a/web/components/pinned-select-modal.tsx b/web/components/pinned-select-modal.tsx
index 98c91a7c..c43c7534 100644
--- a/web/components/pinned-select-modal.tsx
+++ b/web/components/pinned-select-modal.tsx
@@ -2,7 +2,6 @@ import { Contract } from 'common/contract'
 import { Group } from 'common/group'
 import { Post } from 'common/post'
 import { useState } from 'react'
-import { PostCardList } from 'web/pages/group/[...slugs]'
 import { Button } from './button'
 import { PillButton } from './buttons/pill-button'
 import { ContractSearch } from './contract-search'
@@ -10,6 +9,7 @@ import { Col } from './layout/col'
 import { Modal } from './layout/modal'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
+import { PostCardList } from './post-card'
 
 export function PinnedSelectModal(props: {
   title: string
@@ -20,8 +20,8 @@ export function PinnedSelectModal(props: {
     selectedItems: { itemId: string; type: string }[]
   ) => void | Promise<void>
   contractSearchOptions?: Partial<Parameters<typeof ContractSearch>[0]>
-  group: Group
   posts: Post[]
+  group?: Group
 }) {
   const {
     title,
@@ -134,8 +134,8 @@ export function PinnedSelectModal(props: {
                 highlightClassName:
                   '!bg-indigo-100 outline outline-2 outline-indigo-300',
               }}
-              additionalFilter={{ groupSlug: group.slug }}
-              persistPrefix={`group-${group.slug}`}
+              additionalFilter={group ? { groupSlug: group.slug } : undefined}
+              persistPrefix={group ? `group-${group.slug}` : undefined}
               headerClassName="bg-white sticky"
               {...contractSearchOptions}
             />
@@ -152,7 +152,7 @@ export function PinnedSelectModal(props: {
                     '!bg-indigo-100 outline outline-2 outline-indigo-300',
                 }}
               />
-              {posts.length === 0 && (
+              {posts.length == 0 && (
                 <div className="text-center text-gray-500">No posts yet</div>
               )}
             </div>
diff --git a/web/components/portfolio/portfolio-value-graph.tsx b/web/components/portfolio/portfolio-value-graph.tsx
index e329457d..35d63c6c 100644
--- a/web/components/portfolio/portfolio-value-graph.tsx
+++ b/web/components/portfolio/portfolio-value-graph.tsx
@@ -1,155 +1,84 @@
-import { ResponsiveLine } from '@nivo/line'
-import { PortfolioMetrics } from 'common/user'
-import { filterDefined } from 'common/util/array'
-import { formatMoney } from 'common/util/format'
+import { useMemo } from 'react'
+import { scaleTime, scaleLinear } from 'd3-scale'
+import { curveStepAfter } from 'd3-shape'
+import { min, max } from 'lodash'
 import dayjs from 'dayjs'
-import { last } from 'lodash'
-import { memo } from 'react'
-import { useWindowSize } from 'web/hooks/use-window-size'
+import { PortfolioMetrics } from 'common/user'
 import { Col } from '../layout/col'
+import { TooltipProps } from 'web/components/charts/helpers'
+import {
+  HistoryPoint,
+  SingleValueHistoryChart,
+} from 'web/components/charts/generic-charts'
 
-export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
-  portfolioHistory: PortfolioMetrics[]
-  mode: 'value' | 'profit'
-  handleGraphDisplayChange: (arg0: string | number | null) => void
-  height?: number
-}) {
-  const { portfolioHistory, height, mode, handleGraphDisplayChange } = props
-  const { width } = useWindowSize()
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 70 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
 
-  const valuePoints = getPoints('value', portfolioHistory)
-  const posProfitPoints = getPoints('posProfit', portfolioHistory)
-  const negProfitPoints = getPoints('negProfit', portfolioHistory)
+export type GraphMode = 'profit' | 'value'
 
-  const valuePointsY = valuePoints.map((p) => p.y)
-  const posProfitPointsY = posProfitPoints.map((p) => p.y)
-  const negProfitPointsY = negProfitPoints.map((p) => p.y)
+export const PortfolioTooltip = (props: TooltipProps<Date, HistoryPoint>) => {
+  const { x, xScale } = props
+  const d = dayjs(xScale.invert(x))
+  return (
+    <Col className="text-xs font-semibold sm:text-sm">
+      <div>{d.format('MMM/D/YY')}</div>
+      <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
+        {d.format('h:mm A')}
+      </div>
+    </Col>
+  )
+}
 
-  let data
+const getY = (mode: GraphMode, p: PortfolioMetrics) =>
+  p.balance + p.investmentValue - (mode === 'profit' ? p.totalDeposits : 0)
 
-  if (mode === 'value') {
-    data = [{ id: 'value', data: valuePoints, color: '#4f46e5' }]
-  } else {
-    data = [
-      {
-        id: 'negProfit',
-        data: negProfitPoints,
-        color: '#dc2626',
-      },
-      {
-        id: 'posProfit',
-        data: posProfitPoints,
-        color: '#14b8a6',
-      },
-    ]
-  }
-  const numYTickValues = 2
-  const endDate = last(data[0].data)?.x
+export function getPoints(mode: GraphMode, history: PortfolioMetrics[]) {
+  return history.map((p) => ({
+    x: new Date(p.timestamp),
+    y: getY(mode, p),
+    obj: p,
+  }))
+}
 
-  const yMin =
-    mode === 'value'
-      ? Math.min(...filterDefined(valuePointsY))
-      : Math.min(
-          ...filterDefined(negProfitPointsY),
-          ...filterDefined(posProfitPointsY)
-        )
-
-  const yMax =
-    mode === 'value'
-      ? Math.max(...filterDefined(valuePointsY))
-      : Math.max(
-          ...filterDefined(negProfitPointsY),
-          ...filterDefined(posProfitPointsY)
-        )
+export const PortfolioGraph = (props: {
+  mode: 'profit' | 'value'
+  history: PortfolioMetrics[]
+  width: number
+  height: number
+  onMouseOver?: (p: HistoryPoint<PortfolioMetrics> | undefined) => void
+}) => {
+  const { mode, history, onMouseOver, width, height } = props
+  const { data, minDate, maxDate, minValue, maxValue } = useMemo(() => {
+    const data = getPoints(mode, history)
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const minDate = min(data.map((d) => d.x))!
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const maxDate = max(data.map((d) => d.x))!
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const minValue = min(data.map((d) => d.y))!
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const maxValue = max(data.map((d) => d.y))!
+    return { data, minDate, maxDate, minValue, maxValue }
+  }, [mode, history])
 
   return (
-    <div
-      className="w-full overflow-hidden"
-      style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
-      onMouseLeave={() => handleGraphDisplayChange(null)}
-    >
-      <ResponsiveLine
-        margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
-        data={data}
-        xScale={{
-          type: 'time',
-          min: valuePoints[0]?.x,
-          max: endDate,
-        }}
-        yScale={{
-          type: 'linear',
-          stacked: false,
-          min: yMin,
-          max: yMax,
-        }}
-        curve="stepAfter"
-        enablePoints={false}
-        colors={{ datum: 'color' }}
-        axisBottom={{
-          tickValues: 0,
-        }}
-        pointBorderColor="#fff"
-        pointSize={valuePoints.length > 100 ? 0 : 6}
-        axisLeft={{
-          tickValues: numYTickValues,
-          format: '.3s',
-        }}
-        enableGridX={false}
-        enableGridY={true}
-        gridYValues={numYTickValues}
-        enableSlices="x"
-        animate={false}
-        yFormat={(value) => formatMoney(+value)}
-        enableArea={true}
-        areaOpacity={0.1}
-        sliceTooltip={({ slice }) => {
-          handleGraphDisplayChange(slice.points[0].data.yFormatted)
-          return (
-            <div className="rounded border border-gray-200 bg-white px-4 py-2 opacity-80">
-              <div
-                key={slice.points[0].id}
-                className="text-xs font-semibold sm:text-sm"
-              >
-                <Col>
-                  <div>
-                    {dayjs(slice.points[0].data.xFormatted).format('MMM/D/YY')}
-                  </div>
-                  <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
-                    {dayjs(slice.points[0].data.xFormatted).format('h:mm A')}
-                  </div>
-                </Col>
-              </div>
-              {/* ))} */}
-            </div>
-          )
-        }}
-      ></ResponsiveLine>
-    </div>
+    <SingleValueHistoryChart
+      w={width}
+      h={height}
+      margin={MARGIN}
+      xScale={scaleTime([minDate, maxDate], [0, width - MARGIN_X])}
+      yScale={scaleLinear([minValue, maxValue], [height - MARGIN_Y, 0])}
+      yKind="m$"
+      data={data}
+      curve={curveStepAfter}
+      Tooltip={PortfolioTooltip}
+      onMouseOver={onMouseOver}
+      color={
+        mode === 'value'
+          ? '#4f46e5'
+          : (p: HistoryPoint) => (p.y >= 0 ? '#14b8a6' : '#f00')
+      }
+    />
   )
-})
-
-export function getPoints(
-  line: 'value' | 'posProfit' | 'negProfit',
-  portfolioHistory: PortfolioMetrics[]
-) {
-  const points = portfolioHistory.map((p) => {
-    const { timestamp, balance, investmentValue, totalDeposits } = p
-    const value = balance + investmentValue
-
-    const profit = value - totalDeposits
-    let posProfit = null
-    let negProfit = null
-    if (profit < 0) {
-      negProfit = profit
-    } else {
-      posProfit = profit
-    }
-
-    return {
-      x: new Date(timestamp),
-      y:
-        line === 'value' ? value : line === 'posProfit' ? posProfit : negProfit,
-    }
-  })
-  return points
 }
diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx
index d7fff6ef..2ee7d524 100644
--- a/web/components/portfolio/portfolio-value-section.tsx
+++ b/web/components/portfolio/portfolio-value-section.tsx
@@ -1,34 +1,28 @@
 import clsx from 'clsx'
 import { formatMoney } from 'common/util/format'
 import { last } from 'lodash'
-import { memo, useRef, useState } from 'react'
+import { memo, useState } from 'react'
 import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
-import { Period } from 'web/lib/firebase/users'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
-import { PortfolioValueGraph } from './portfolio-value-graph'
+import { GraphMode, PortfolioGraph } from './portfolio-value-graph'
+import { SizedContainer } from 'web/components/sized-container'
 
 export const PortfolioValueSection = memo(
   function PortfolioValueSection(props: { userId: string }) {
     const { userId } = props
 
-    const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('weekly')
-    const portfolioHistory = usePortfolioHistory(userId, portfolioPeriod)
-    const [graphMode, setGraphMode] = useState<'profit' | 'value'>('profit')
+    const portfolioHistory = usePortfolioHistory(userId, 'allTime')
+    const [graphMode, setGraphMode] = useState<GraphMode>('profit')
     const [graphDisplayNumber, setGraphDisplayNumber] = useState<
       number | string | null
     >(null)
-    const handleGraphDisplayChange = (num: string | number | null) => {
-      setGraphDisplayNumber(num)
+    const handleGraphDisplayChange = (p: { y: number } | undefined) => {
+      setGraphDisplayNumber(p != null ? formatMoney(p.y) : null)
     }
 
-    // Remember the last defined portfolio history.
-    const portfolioRef = useRef(portfolioHistory)
-    if (portfolioHistory) portfolioRef.current = portfolioHistory
-    const currPortfolioHistory = portfolioRef.current
-
-    const lastPortfolioMetrics = last(currPortfolioHistory)
-    if (!currPortfolioHistory || !lastPortfolioMetrics) {
+    const lastPortfolioMetrics = last(portfolioHistory)
+    if (!portfolioHistory || !lastPortfolioMetrics) {
       return <></>
     }
 
@@ -38,15 +32,18 @@ export const PortfolioValueSection = memo(
     return (
       <>
         <Row className="mb-2 justify-between">
-          <Row className="gap-4 sm:gap-8">
+          <Row className="gap-2">
             <Col
               className={clsx(
-                'cursor-pointer',
+                'w-24 cursor-pointer sm:w-28 ',
                 graphMode != 'profit'
                   ? 'cursor-pointer opacity-40 hover:opacity-80'
                   : ''
               )}
-              onClick={() => setGraphMode('profit')}
+              onClick={() => {
+                setGraphMode('profit')
+                setGraphDisplayNumber(null)
+              }}
             >
               <div className="text-greyscale-6 text-xs sm:text-sm">Profit</div>
               <div
@@ -75,10 +72,13 @@ export const PortfolioValueSection = memo(
 
             <Col
               className={clsx(
-                'cursor-pointer',
+                'w-24 cursor-pointer sm:w-28',
                 graphMode != 'value' ? 'opacity-40 hover:opacity-80' : ''
               )}
-              onClick={() => setGraphMode('value')}
+              onClick={() => {
+                setGraphMode('value')
+                setGraphDisplayNumber(null)
+              }}
             >
               <div className="text-greyscale-6 text-xs sm:text-sm">
                 Portfolio value
@@ -93,56 +93,18 @@ export const PortfolioValueSection = memo(
             </Col>
           </Row>
         </Row>
-        <PortfolioValueGraph
-          portfolioHistory={currPortfolioHistory}
-          mode={graphMode}
-          handleGraphDisplayChange={handleGraphDisplayChange}
-        />
-        <PortfolioPeriodSelection
-          portfolioPeriod={portfolioPeriod}
-          setPortfolioPeriod={setPortfolioPeriod}
-          className="border-greyscale-2 mt-2 gap-4 border-b"
-          selectClassName="text-indigo-600 text-bold border-b border-indigo-600"
-        />
+        <SizedContainer fullHeight={200} mobileHeight={100}>
+          {(width, height) => (
+            <PortfolioGraph
+              mode={graphMode}
+              history={portfolioHistory}
+              width={width}
+              height={height}
+              onMouseOver={handleGraphDisplayChange}
+            />
+          )}
+        </SizedContainer>
       </>
     )
   }
 )
-
-export function PortfolioPeriodSelection(props: {
-  setPortfolioPeriod: (string: any) => void
-  portfolioPeriod: string
-  className?: string
-  selectClassName?: string
-}) {
-  const { setPortfolioPeriod, portfolioPeriod, className, selectClassName } =
-    props
-  return (
-    <Row className={clsx(className, 'text-greyscale-4')}>
-      <button
-        className={clsx(portfolioPeriod === 'daily' ? selectClassName : '')}
-        onClick={() => setPortfolioPeriod('daily' as Period)}
-      >
-        1D
-      </button>
-      <button
-        className={clsx(portfolioPeriod === 'weekly' ? selectClassName : '')}
-        onClick={() => setPortfolioPeriod('weekly' as Period)}
-      >
-        1W
-      </button>
-      <button
-        className={clsx(portfolioPeriod === 'monthly' ? selectClassName : '')}
-        onClick={() => setPortfolioPeriod('monthly' as Period)}
-      >
-        1M
-      </button>
-      <button
-        className={clsx(portfolioPeriod === 'allTime' ? selectClassName : '')}
-        onClick={() => setPortfolioPeriod('allTime' as Period)}
-      >
-        ALL
-      </button>
-    </Row>
-  )
-}
diff --git a/web/components/post-card.tsx b/web/components/post-card.tsx
index a20748eb..19dce45a 100644
--- a/web/components/post-card.tsx
+++ b/web/components/post-card.tsx
@@ -1,4 +1,5 @@
 import { track } from '@amplitude/analytics-browser'
+import { DocumentIcon } from '@heroicons/react/solid'
 import clsx from 'clsx'
 import { Post } from 'common/post'
 import Link from 'next/link'
@@ -6,8 +7,8 @@ import { useUserById } from 'web/hooks/use-user'
 import { postPath } from 'web/lib/firebase/posts'
 import { fromNow } from 'web/lib/util/time'
 import { Avatar } from './avatar'
+import { Card } from './card'
 import { CardHighlightOptions } from './contract/contracts-grid'
-import { Row } from './layout/row'
 import { UserLink } from './user-link'
 
 export function PostCard(props: {
@@ -25,9 +26,9 @@ export function PostCard(props: {
 
   return (
     <div className="relative py-1">
-      <Row
+      <Card
         className={clsx(
-          ' relative gap-3 rounded-lg bg-white py-2 shadow-md hover:cursor-pointer hover:bg-gray-100',
+          'relative flex gap-3 py-2 px-3',
           itemIds?.includes(post.id) && highlightClassName
         )}
       >
@@ -44,9 +45,20 @@ export function PostCard(props: {
             <span className="mx-1">•</span>
             <span className="text-gray-500">{fromNow(post.createdTime)}</span>
           </div>
-          <div className="text-lg font-medium text-gray-900">{post.title}</div>
+          <div className=" break-words text-lg font-medium  text-gray-900">
+            {post.title}
+          </div>
+          <div className="font-small  text-md  break-words text-gray-500">
+            {post.subtitle}
+          </div>
         </div>
-      </Row>
+        <div>
+          <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
+            <DocumentIcon className={'h3 w-3'} />
+            Post
+          </span>
+        </div>
+      </Card>
       {onPostClick ? (
         <a
           className="absolute top-0 left-0 right-0 bottom-0"
@@ -80,3 +92,23 @@ export function PostCard(props: {
     </div>
   )
 }
+
+export function PostCardList(props: {
+  posts: Post[]
+  highlightOptions?: CardHighlightOptions
+  onPostClick?: (post: Post) => void
+}) {
+  const { posts, onPostClick, highlightOptions } = props
+  return (
+    <div className="w-full">
+      {posts.map((post) => (
+        <PostCard
+          key={post.id}
+          post={post}
+          onPostClick={onPostClick}
+          highlightOptions={highlightOptions}
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/web/components/probability-input.tsx b/web/components/probability-input.tsx
index cc8b9259..9b58dc64 100644
--- a/web/components/probability-input.tsx
+++ b/web/components/probability-input.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
 import { getPseudoProbability } from 'common/pseudo-numeric'
 import { BucketInput } from './bucket-input'
+import { Input } from './input'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
 
@@ -30,11 +31,8 @@ export function ProbabilityInput(props: {
   return (
     <Col className={className}>
       <label className="input-group">
-        <input
-          className={clsx(
-            'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
-            inputClassName
-          )}
+        <Input
+          className={clsx('max-w-[200px] !text-lg', inputClassName)}
           type="number"
           max={99}
           min={1}
diff --git a/web/components/probability-selector.tsx b/web/components/probability-selector.tsx
index b13dcfd9..010c7bfa 100644
--- a/web/components/probability-selector.tsx
+++ b/web/components/probability-selector.tsx
@@ -1,3 +1,4 @@
+import { Input } from './input'
 import { Row } from './layout/row'
 
 export function ProbabilitySelector(props: {
@@ -10,10 +11,10 @@ export function ProbabilitySelector(props: {
   return (
     <Row className="items-center  gap-2">
       <label className="input-group input-group-lg text-lg">
-        <input
+        <Input
           type="number"
           value={probabilityInt}
-          className="input input-bordered input-md w-28 text-lg"
+          className="input-md w-28 !text-lg"
           disabled={isSubmitting}
           min={1}
           max={99}
diff --git a/web/components/profile/badges-modal.tsx b/web/components/profile/badges-modal.tsx
new file mode 100644
index 00000000..96e0fa9d
--- /dev/null
+++ b/web/components/profile/badges-modal.tsx
@@ -0,0 +1,223 @@
+import { Modal } from 'web/components/layout/modal'
+import { Col } from 'web/components/layout/col'
+import { PAST_BETS, User } from 'common/user'
+import clsx from 'clsx'
+import {
+  Badge,
+  calculateBadgeRarity,
+  MarketCreatorBadge,
+  ProvenCorrectBadge,
+  rarities,
+  StreakerBadge,
+} from 'common/badge'
+import { groupBy } from 'lodash'
+import { Row } from 'web/components/layout/row'
+import { SiteLink } from 'web/components/site-link'
+import { contractPathWithoutContract } from 'web/lib/firebase/contracts'
+import { Tooltip } from 'web/components/tooltip'
+import {
+  bronzeClassName,
+  goldClassName,
+  silverClassName,
+} from 'web/components/badge-display'
+
+export function BadgesModal(props: {
+  isOpen: boolean
+  setOpen: (open: boolean) => void
+  user: User
+}) {
+  const { isOpen, setOpen, user } = props
+  const { provenCorrect, marketCreator, streaker } = user.achievements ?? {}
+  const badges = [
+    ...(provenCorrect?.badges ?? []),
+    ...(streaker?.badges ?? []),
+    ...(marketCreator?.badges ?? []),
+  ]
+
+  // group badges by their rarities
+  const badgesByRarity = groupBy(badges, (badge) => calculateBadgeRarity(badge))
+
+  return (
+    <Modal open={isOpen} setOpen={setOpen}>
+      <Col className="items-center gap-4 rounded-md bg-white px-8 py-6">
+        <span className={clsx('text-8xl')}>🏅</span>
+        <span className="text-xl">{user.name + "'s"} badges</span>
+
+        <Row className={'flex-wrap gap-2'}>
+          <Col
+            className={clsx(
+              'min-w-full gap-2 rounded-md border-2 border-amber-900 border-opacity-40 p-2 text-center'
+            )}
+          >
+            <span className={clsx(' ', bronzeClassName)}>Bronze</span>
+            <Row className={'flex-wrap justify-center gap-4'}>
+              {badgesByRarity['bronze'] ? (
+                badgesByRarity['bronze'].map((badge, i) => (
+                  <BadgeToItem badge={badge} key={i} rarity={'bronze'} />
+                ))
+              ) : (
+                <span className={'text-gray-500'}>None yet</span>
+              )}
+            </Row>
+          </Col>
+          <Col
+            className={clsx(
+              'min-w-full gap-2 rounded-md border-2 border-gray-500 border-opacity-40 p-2 text-center '
+            )}
+          >
+            <span className={clsx(' ', silverClassName)}>Silver</span>
+            <Row className={'flex-wrap justify-center gap-4'}>
+              {badgesByRarity['silver'] ? (
+                badgesByRarity['silver'].map((badge, i) => (
+                  <BadgeToItem badge={badge} key={i} rarity={'silver'} />
+                ))
+              ) : (
+                <span className={'text-gray-500'}>None yet</span>
+              )}
+            </Row>
+          </Col>
+          <Col
+            className={clsx(
+              'min-w-full gap-2 rounded-md border-2 border-amber-400  p-2 text-center '
+            )}
+          >
+            <span className={clsx('', goldClassName)}>Gold</span>
+            <Row className={'flex-wrap justify-center gap-4'}>
+              {badgesByRarity['gold'] ? (
+                badgesByRarity['gold'].map((badge, i) => (
+                  <BadgeToItem badge={badge} key={i} rarity={'gold'} />
+                ))
+              ) : (
+                <span className={'text-gray-500'}>None yet</span>
+              )}
+            </Row>
+          </Col>
+        </Row>
+      </Col>
+    </Modal>
+  )
+}
+
+function BadgeToItem(props: { badge: Badge; rarity: rarities }) {
+  const { badge, rarity } = props
+  if (badge.type === 'PROVEN_CORRECT')
+    return (
+      <ProvenCorrectBadgeItem
+        badge={badge as ProvenCorrectBadge}
+        rarity={rarity}
+      />
+    )
+  else if (badge.type === 'STREAKER')
+    return <StreakerBadgeItem badge={badge as StreakerBadge} rarity={rarity} />
+  else if (badge.type === 'MARKET_CREATOR')
+    return (
+      <MarketCreatorBadgeItem
+        badge={badge as MarketCreatorBadge}
+        rarity={rarity}
+      />
+    )
+  else return null
+}
+
+function ProvenCorrectBadgeItem(props: {
+  badge: ProvenCorrectBadge
+  rarity: rarities
+}) {
+  const { badge, rarity } = props
+  const { betAmount, contractSlug, contractCreatorUsername } = badge.data
+  return (
+    <SiteLink
+      href={contractPathWithoutContract(contractCreatorUsername, contractSlug)}
+    >
+      <Col className={'text-center'}>
+        <Medal rarity={rarity} />
+        <Tooltip
+          text={`Make a comment attached to a winning bet worth ${betAmount}`}
+        >
+          <span
+            className={
+              rarity === 'gold'
+                ? goldClassName
+                : rarity === 'silver'
+                ? silverClassName
+                : bronzeClassName
+            }
+          >
+            Proven Correct
+          </span>
+        </Tooltip>
+      </Col>
+    </SiteLink>
+  )
+}
+function StreakerBadgeItem(props: { badge: StreakerBadge; rarity: rarities }) {
+  const { badge, rarity } = props
+  const { totalBettingStreak } = badge.data
+  return (
+    <Col className={'cursor-default text-center'}>
+      <Medal rarity={rarity} />
+      <Tooltip
+        text={`Make ${PAST_BETS} ${totalBettingStreak} day${
+          totalBettingStreak > 1 ? 's' : ''
+        } in a row`}
+      >
+        <span
+          className={
+            rarity === 'gold'
+              ? goldClassName
+              : rarity === 'silver'
+              ? silverClassName
+              : bronzeClassName
+          }
+        >
+          Prediction Streak
+        </span>
+      </Tooltip>
+    </Col>
+  )
+}
+function MarketCreatorBadgeItem(props: {
+  badge: MarketCreatorBadge
+  rarity: rarities
+}) {
+  const { badge, rarity } = props
+  const { totalContractsCreated } = badge.data
+  return (
+    <Col className={'cursor-default text-center'}>
+      <Medal rarity={rarity} />
+      <Tooltip
+        text={`Make ${totalContractsCreated} market${
+          totalContractsCreated > 1 ? 's' : ''
+        }`}
+      >
+        <span
+          className={
+            rarity === 'gold'
+              ? goldClassName
+              : rarity === 'silver'
+              ? silverClassName
+              : bronzeClassName
+          }
+        >
+          Market Creator
+        </span>
+      </Tooltip>
+    </Col>
+  )
+}
+function Medal(props: { rarity: rarities }) {
+  const { rarity } = props
+  return (
+    <span
+      className={
+        rarity === 'gold'
+          ? goldClassName
+          : rarity === 'silver'
+          ? silverClassName
+          : bronzeClassName
+      }
+    >
+      {rarity === 'gold' ? '🥇' : rarity === 'silver' ? '🥈' : '🥉'}
+    </span>
+  )
+}
diff --git a/web/components/profile/betting-streak-modal.tsx b/web/components/profile/betting-streak-modal.tsx
index 4d1d63be..306a839c 100644
--- a/web/components/profile/betting-streak-modal.tsx
+++ b/web/components/profile/betting-streak-modal.tsx
@@ -13,7 +13,7 @@ import clsx from 'clsx'
 export function BettingStreakModal(props: {
   isOpen: boolean
   setOpen: (open: boolean) => void
-  currentUser?: User | null
+  currentUser: User | null | undefined
 }) {
   const { isOpen, setOpen, currentUser } = props
   const missingStreak = currentUser && !hasCompletedStreakToday(currentUser)
diff --git a/web/components/profile/loans-modal.tsx b/web/components/profile/loans-modal.tsx
index 5dcb8b6b..cf138945 100644
--- a/web/components/profile/loans-modal.tsx
+++ b/web/components/profile/loans-modal.tsx
@@ -35,8 +35,8 @@ export function LoansModal(props: {
           </span>
           <span className={'text-indigo-700'}>• What is an example?</span>
           <span className={'ml-2'}>
-            For example, if you bet M$1000 on "Will I become a millionare?"
-            today, you will get M$20 back tomorrow.
+            For example, if you bet M$1000 on "Will I become a millionare?", you
+            will get M$20 back tomorrow.
           </span>
           <span className={'ml-2'}>
             Previous loans count against your total bet amount. So on the next
diff --git a/web/components/profit-badge.tsx b/web/components/profit-badge.tsx
index f82159e6..ff7d4dc0 100644
--- a/web/components/profit-badge.tsx
+++ b/web/components/profit-badge.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { ENV_CONFIG } from 'common/envs/constants'
 
 export function ProfitBadge(props: {
   profitPercent: number
@@ -26,3 +27,24 @@ export function ProfitBadge(props: {
     </span>
   )
 }
+
+export function ProfitBadgeMana(props: { amount: number; className?: string }) {
+  const { amount, className } = props
+  const colors =
+    amount > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+
+  const formatted =
+    ENV_CONFIG.moneyMoniker + (amount > 0 ? '+' : '') + amount.toFixed(0)
+
+  return (
+    <span
+      className={clsx(
+        'ml-1 inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium',
+        colors,
+        className
+      )}
+    >
+      {formatted}
+    </span>
+  )
+}
diff --git a/web/components/relative-timestamp.tsx b/web/components/relative-timestamp.tsx
index d4b1c189..eb03e324 100644
--- a/web/components/relative-timestamp.tsx
+++ b/web/components/relative-timestamp.tsx
@@ -1,15 +1,22 @@
 import { DateTimeTooltip } from './datetime-tooltip'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { fromNow } from 'web/lib/util/time'
 
 export function RelativeTimestamp(props: { time: number }) {
   const { time } = props
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    // Only render on client to prevent difference from server.
+    setIsClient(true)
+  }, [])
+
   return (
     <DateTimeTooltip
       className="ml-1 whitespace-nowrap text-gray-400"
       time={time}
     >
-      {fromNow(time)}
+      {isClient ? fromNow(time) : ''}
     </DateTimeTooltip>
   )
 }
diff --git a/web/components/share-embed-button.tsx b/web/components/share-embed-button.tsx
index 0a5dc0c9..ad57b2f7 100644
--- a/web/components/share-embed-button.tsx
+++ b/web/components/share-embed-button.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { CodeIcon } from '@heroicons/react/outline'
-import { Menu } from '@headlessui/react'
 import toast from 'react-hot-toast'
 
 import { Contract } from 'common/contract'
@@ -8,6 +7,7 @@ import { contractPath } from 'web/lib/firebase/contracts'
 import { DOMAIN } from 'common/envs/constants'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { track } from 'web/lib/service/analytics'
+import { Button } from './button'
 
 export function embedContractCode(contract: Contract) {
   const title = contract.question
@@ -15,6 +15,7 @@ export function embedContractCode(contract: Contract) {
   return `<iframe src="${src}" title="${title}" frameborder="0"></iframe>`
 }
 
+// TODO: move this function elsewhere
 export function embedContractGridCode(contracts: Contract[]) {
   const height = (contracts.length - (contracts.length % 2)) * 100 + 'px'
   const src = `https://${DOMAIN}/embed/grid/${contracts
@@ -26,24 +27,21 @@ export function embedContractGridCode(contracts: Contract[]) {
 export function ShareEmbedButton(props: { contract: Contract }) {
   const { contract } = props
 
-  const codeIcon = <CodeIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
+  const codeIcon = <CodeIcon className="h-4 w-4" aria-hidden />
 
   return (
-    <Menu
-      as="div"
-      className="relative z-10 flex-shrink-0"
-      onMouseUp={() => {
+    <Button
+      size="2xs"
+      color="gray-outline"
+      className="gap-1"
+      onClick={() => {
         copyToClipboard(embedContractCode(contract))
-        toast.success('Embed code copied!', {
-          icon: codeIcon,
-        })
+        toast.success('Embed code copied!', { icon: codeIcon })
         track('copy embed code')
       }}
     >
-      <Menu.Button className="btn btn-xs border-2 !border-gray-500 !bg-white normal-case text-gray-500">
-        {codeIcon}
-        Embed
-      </Menu.Button>
-    </Menu>
+      {codeIcon}
+      Embed
+    </Button>
   )
 }
diff --git a/web/components/share-post-modal.tsx b/web/components/share-post-modal.tsx
index fa8658c6..b453d21d 100644
--- a/web/components/share-post-modal.tsx
+++ b/web/components/share-post-modal.tsx
@@ -1,13 +1,8 @@
-import { LinkIcon } from '@heroicons/react/outline'
-import toast from 'react-hot-toast'
-import { copyToClipboard } from 'web/lib/util/copy'
-import { track } from 'web/lib/service/analytics'
 import { Modal } from './layout/modal'
 import { Col } from './layout/col'
 import { Title } from './title'
-import { Button } from './button'
 import { TweetButton } from './tweet-button'
-import { Row } from './layout/row'
+import { CopyLinkButton } from './copy-link-button'
 
 export function SharePostModal(props: {
   shareUrl: string
@@ -16,30 +11,14 @@ export function SharePostModal(props: {
 }) {
   const { isOpen, setOpen, shareUrl } = props
 
-  const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
-
   return (
     <Modal open={isOpen} setOpen={setOpen} size="md">
       <Col className="gap-4 rounded bg-white p-4">
         <Title className="!mt-0 !mb-2" text="Share this post" />
-        <Button
-          size="2xl"
-          color="gradient"
-          className={'mb-2 flex max-w-xs self-center'}
-          onClick={() => {
-            copyToClipboard(shareUrl)
-            toast.success('Link copied!', {
-              icon: linkIcon,
-            })
-            track('copy share post link')
-          }}
-        >
-          {linkIcon} Copy link
-        </Button>
-
-        <Row className="z-0 justify-start gap-4 self-center">
-          <TweetButton className="self-start" tweetText={shareUrl} />
-        </Row>
+        <CopyLinkButton url={shareUrl} tracking="copy share post link" />
+        <div className="self-center">
+          <TweetButton tweetText={shareUrl} />
+        </div>
       </Col>
     </Modal>
   )
diff --git a/web/components/sized-container.tsx b/web/components/sized-container.tsx
index 26532047..03fe9b11 100644
--- a/web/components/sized-container.tsx
+++ b/web/components/sized-container.tsx
@@ -29,7 +29,14 @@ export const SizedContainer = (props: {
   }, [threshold, fullHeight, mobileHeight])
   return (
     <div ref={containerRef}>
-      {width != null && height != null && children(width, height)}
+      {width != null && height != null ? (
+        children(width, height)
+      ) : (
+        <>
+          <div className="sm:hidden" style={{ height: mobileHeight }} />
+          <div className="hidden sm:flex" style={{ height: fullHeight }} />
+        </>
+      )}
     </div>
   )
 }
diff --git a/web/components/switch-setting.tsx b/web/components/switch-setting.tsx
index 0e93c420..608b936b 100644
--- a/web/components/switch-setting.tsx
+++ b/web/components/switch-setting.tsx
@@ -1,33 +1,52 @@
 import { Switch } from '@headlessui/react'
 import clsx from 'clsx'
 import React from 'react'
+import { Tooltip } from 'web/components/tooltip'
 
 export const SwitchSetting = (props: {
   checked: boolean
   onChange: (checked: boolean) => void
   label: string
+  disabled: boolean
 }) => {
-  const { checked, onChange, label } = props
+  const { checked, onChange, label, disabled } = props
   return (
     <Switch.Group as="div" className="flex items-center">
-      <Switch
-        checked={checked}
-        onChange={onChange}
-        className={clsx(
-          checked ? 'bg-indigo-600' : 'bg-gray-200',
-          'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
-        )}
+      <Tooltip
+        text={
+          disabled
+            ? `You are opted out of all ${label} notifications. Go to the Opt Out section to undo this setting.`
+            : ''
+        }
       >
-        <span
-          aria-hidden="true"
+        <Switch
+          checked={checked}
+          onChange={onChange}
           className={clsx(
-            checked ? 'translate-x-5' : 'translate-x-0',
-            'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+            checked ? 'bg-indigo-600' : 'bg-gray-200',
+            'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
+            disabled ? 'cursor-not-allowed opacity-50' : ''
           )}
-        />
-      </Switch>
+          disabled={disabled}
+        >
+          <span
+            aria-hidden="true"
+            className={clsx(
+              checked ? 'translate-x-5' : 'translate-x-0',
+              'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+            )}
+          />
+        </Switch>
+      </Tooltip>
       <Switch.Label as="span" className="ml-3">
-        <span className="text-sm font-medium text-gray-900">{label}</span>
+        <span
+          className={clsx(
+            'text-sm font-medium text-gray-900',
+            disabled ? 'cursor-not-allowed opacity-50' : ''
+          )}
+        >
+          {label}
+        </span>
       </Switch.Label>
     </Switch.Group>
   )
diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx
index b201f946..ac978f81 100644
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import toast from 'react-hot-toast'
-import { debounce, sum } from 'lodash'
+import { debounce } from 'lodash'
 
 import { Comment } from 'common/comment'
 import { User } from 'common/user'
-import { CommentTips } from 'web/hooks/use-tip-txns'
 import { useUser } from 'web/hooks/use-user'
 import { transact } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
@@ -13,25 +12,27 @@ import { Row } from './layout/row'
 import { LIKE_TIP_AMOUNT } from 'common/like'
 import { formatMoney } from 'common/util/format'
 
-export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
-  const { comment, tips } = prop
+export function Tipper(prop: {
+  comment: Comment
+  myTip: number
+  totalTip: number
+}) {
+  const { comment, myTip, totalTip } = prop
 
   const me = useUser()
-  const myId = me?.id ?? ''
-  const savedTip = tips[myId] ?? 0
 
-  const [localTip, setLocalTip] = useState(savedTip)
+  const [localTip, setLocalTip] = useState(myTip)
 
   // listen for user being set
   const initialized = useRef(false)
   useEffect(() => {
-    if (tips[myId] && !initialized.current) {
-      setLocalTip(tips[myId])
+    if (myTip && !initialized.current) {
+      setLocalTip(myTip)
       initialized.current = true
     }
-  }, [tips, myId])
+  }, [myTip])
 
-  const total = sum(Object.values(tips)) - savedTip + localTip
+  const total = totalTip - myTip + localTip
 
   // declare debounced function only on first render
   const [saveTip] = useState(() =>
@@ -73,7 +74,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
 
   const addTip = (delta: number) => {
     setLocalTip(localTip + delta)
-    me && saveTip(me, comment, localTip - savedTip + delta)
+    me && saveTip(me, comment, localTip - myTip + delta)
     toast(`You tipped ${comment.userName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
   }
 
diff --git a/web/components/tweet-button.tsx b/web/components/tweet-button.tsx
index 23410165..f063004d 100644
--- a/web/components/tweet-button.tsx
+++ b/web/components/tweet-button.tsx
@@ -1,22 +1,23 @@
 import clsx from 'clsx'
+import TwitterLogo from 'web/lib/icons/twitter-logo'
 import { trackCallback } from 'web/lib/service/analytics'
+import { buttonClass } from './button'
 
-export function TweetButton(props: { className?: string; tweetText: string }) {
-  const { tweetText, className } = props
+export function TweetButton(props: { tweetText: string }) {
+  const { tweetText } = props
 
   return (
     <a
-      className={clsx('btn btn-xs flex-nowrap normal-case', className)}
-      style={{
-        backgroundColor: 'white',
-        border: '2px solid #1da1f2',
-        color: '#1da1f2',
-      }}
+      // #1da1f2 is twitter blue
+      className={clsx(
+        buttonClass('2xs', 'override'),
+        'gap-1 border-2 border-[#1da1f2] text-[#1da1f2] hover:bg-[#1da1f2] hover:text-white'
+      )}
       href={getTweetHref(tweetText)}
       onClick={trackCallback('share tweet')}
       target="_blank"
     >
-      <img className="mr-2" src={'/twitter-logo.svg'} width={15} height={15} />
+      <TwitterLogo width={15} height={15} />
       <div>Tweet</div>
     </a>
   )
diff --git a/web/components/usa-map/state-election-map.tsx b/web/components/usa-map/state-election-map.tsx
index 8f7bb284..1eb5915e 100644
--- a/web/components/usa-map/state-election-map.tsx
+++ b/web/components/usa-map/state-election-map.tsx
@@ -3,12 +3,11 @@ import Router from 'next/router'
 import { useEffect, useState } from 'react'
 
 import { getProbability } from 'common/calculate'
-import { Contract, CPMMBinaryContract } from 'common/contract'
+import { CPMMBinaryContract } from 'common/contract'
 import { Customize, USAMap } from './usa-map'
-import {
-  getContractFromSlug,
-  listenForContract,
-} from 'web/lib/firebase/contracts'
+import { listenForContract } from 'web/lib/firebase/contracts'
+import { interpolateColor } from 'common/util/color'
+import { track } from 'web/lib/service/analytics'
 
 export interface StateElectionMarket {
   creatorUsername: string
@@ -17,10 +16,14 @@ export interface StateElectionMarket {
   state: string
 }
 
-export function StateElectionMap(props: { markets: StateElectionMarket[] }) {
+export function StateElectionMap(props: {
+  markets: StateElectionMarket[]
+  contracts: CPMMBinaryContract[]
+}) {
   const { markets } = props
+  const [contracts, setContracts] = useState(props.contracts)
+  useUpdateContracts(contracts, setContracts)
 
-  const contracts = useContracts(markets.map((m) => m.slug))
   const probs = contracts.map((c) =>
     c ? getProbability(c as CPMMBinaryContract) : 0.5
   )
@@ -33,8 +36,13 @@ export function StateElectionMap(props: { markets: StateElectionMarket[] }) {
     market.state,
     {
       fill: probToColor(prob, market.isWinRepublican),
-      clickHandler: () =>
-        Router.push(`/${market.creatorUsername}/${market.slug}`),
+      clickHandler: () => {
+        Router.push(`/${market.creatorUsername}/${market.slug}`)
+        track('state election map click', {
+          state: market.state,
+          slug: market.slug,
+        })
+      },
     },
   ])
 
@@ -45,35 +53,30 @@ export function StateElectionMap(props: { markets: StateElectionMarket[] }) {
 
 const probToColor = (prob: number, isWinRepublican: boolean) => {
   const p = isWinRepublican ? prob : 1 - prob
-  const hue = p > 0.5 ? 350 : 240
-  const saturation = 100
-  const lightness = 100 - 50 * Math.abs(p - 0.5)
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`
+  const color = p > 0.5 ? '#e4534b' : '#5f6eb0'
+  return interpolateColor('#ebe4ec', color, Math.abs(p - 0.5) * 2)
 }
 
-const useContracts = (slugs: string[]) => {
-  const [contracts, setContracts] = useState<(Contract | undefined)[]>(
-    slugs.map(() => undefined)
-  )
-
-  useEffect(() => {
-    Promise.all(slugs.map((slug) => getContractFromSlug(slug))).then(
-      (contracts) => setContracts(contracts)
-    )
-  }, [slugs])
-
+const useUpdateContracts = (
+  contracts: CPMMBinaryContract[],
+  setContracts: (newContracts: CPMMBinaryContract[]) => void
+) => {
   useEffect(() => {
     if (contracts.some((c) => c === undefined)) return
 
     // listen to contract updates
-    const unsubs = (contracts as Contract[]).map((c, i) =>
-      listenForContract(
-        c.id,
-        (newC) => newC && setContracts(setAt(contracts, i, newC))
+    const unsubs = contracts
+      .filter((c) => !!c)
+      .map((c, i) =>
+        listenForContract(
+          c.id,
+          (newC) =>
+            newC &&
+            setContracts(setAt(contracts, i, newC as CPMMBinaryContract))
+        )
       )
-    )
     return () => unsubs.forEach((u) => u())
-  }, [contracts])
+  }, [contracts, setContracts])
 
   return contracts
 }
diff --git a/web/components/usa-map/usa-map.tsx b/web/components/usa-map/usa-map.tsx
index 2841e04c..d8d0128b 100644
--- a/web/components/usa-map/usa-map.tsx
+++ b/web/components/usa-map/usa-map.tsx
@@ -1,6 +1,7 @@
 // https://github.com/jb-1980/usa-map-react
 // MIT License
 
+import clsx from 'clsx'
 import { DATA } from './data'
 import { USAState } from './usa-state'
 
@@ -53,8 +54,6 @@ export const USAMap = ({
   onClick = (e) => {
     console.log(e.currentTarget.dataset.name)
   },
-  width = 959,
-  height = 593,
   title = 'US states map',
   defaultFill = '#d3d3d3',
   customize,
@@ -68,10 +67,8 @@ export const USAMap = ({
 
   return (
     <svg
-      className={className}
+      className={clsx('flex h-96 w-full sm:h-full', className)}
       xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
       viewBox="0 0 959 593"
     >
       <title>{title}</title>
diff --git a/web/components/user-link.tsx b/web/components/user-link.tsx
index 4b05ccd0..18a866cc 100644
--- a/web/components/user-link.tsx
+++ b/web/components/user-link.tsx
@@ -1,5 +1,6 @@
 import { SiteLink } from 'web/components/site-link'
 import clsx from 'clsx'
+import { useWindowSize } from 'web/hooks/use-window-size'
 
 export function shortenName(name: string) {
   const firstName = name.split(' ')[0]
@@ -24,16 +25,35 @@ export function UserLink(props: {
 }) {
   const { name, username, className, short, noLink } = props
   const shortName = short ? shortenName(name) : name
+  const { width } = useWindowSize()
   return (
     <SiteLink
       href={`/${username}`}
       className={clsx(
+        (width ?? 0) < 450 ? ' max-w-[120px]' : 'max-w-[200px]',
         'z-10 truncate',
         className,
         noLink ? 'pointer-events-none' : ''
       )}
     >
       {shortName}
+      {BOT_USERNAMES.includes(username) && <BotBadge />}
     </SiteLink>
   )
 }
+
+const BOT_USERNAMES = [
+  'v',
+  'ArbitrageBot',
+  'MarketManagerBot',
+  'Botlab',
+  'JuniorBot',
+]
+
+function BotBadge() {
+  return (
+    <span className="ml-1.5 inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">
+      Bot
+    </span>
+  )
+}
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index dea7036d..3f2176dc 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -31,14 +31,12 @@ import { UserFollowButton } from './follow-button'
 import { GroupsButton } from 'web/components/groups/groups-button'
 import { PortfolioValueSection } from './portfolio/portfolio-value-section'
 import { formatMoney } from 'common/util/format'
-import {
-  BettingStreakModal,
-  hasCompletedStreakToday,
-} from 'web/components/profile/betting-streak-modal'
+
 import { LoansModal } from './profile/loans-modal'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { track } from 'web/lib/service/analytics'
 import { DOMAIN } from 'common/envs/constants'
+import { BadgeDisplay } from 'web/components/badge-display'
 
 export function UserPage(props: { user: User }) {
   const { user } = props
@@ -52,8 +50,8 @@ export function UserPage(props: { user: User }) {
     setShowConfetti(claimedMana)
     const query = { ...router.query }
     if (query.claimedMana || query.show) {
-      delete query['claimed-mana']
-      delete query['show']
+      const queriesToDelete = ['claimed-mana', 'show', 'badge']
+      queriesToDelete.forEach((key) => delete query[key])
       router.replace(
         {
           pathname: router.pathname,
@@ -79,6 +77,7 @@ export function UserPage(props: { user: User }) {
       {showConfetti && (
         <FullscreenConfetti recycle={false} numberOfPieces={300} />
       )}
+
       <Col className="relative">
         <Row className="relative px-4 pt-4">
           <Avatar
@@ -101,9 +100,10 @@ export function UserPage(props: { user: User }) {
                 <span className="break-anywhere text-lg font-bold sm:text-2xl">
                   {user.name}
                 </span>
-                <span className="sm:text-md text-greyscale-4 text-sm">
-                  @{user.username}
-                </span>
+                <Row className="sm:text-md -mt-1 items-center gap-x-3 text-sm ">
+                  <span className={' text-greyscale-4'}>@{user.username}</span>
+                  <BadgeDisplay user={user} query={router.query} />
+                </Row>
               </Col>
               {isCurrentUser && (
                 <ProfilePrivateStats
@@ -278,14 +278,10 @@ export function ProfilePrivateStats(props: {
   user: User
   router: NextRouter
 }) {
-  const { currentUser, profit, user, router } = props
-  const [showBettingStreakModal, setShowBettingStreakModal] = useState(false)
+  const { profit, user, router } = props
   const [showLoansModal, setShowLoansModal] = useState(false)
 
   useEffect(() => {
-    const showBettingStreak = router.query['show'] === 'betting-streak'
-    setShowBettingStreakModal(showBettingStreak)
-
     const showLoansModel = router.query['show'] === 'loans'
     setShowLoansModal(showLoansModel)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -301,23 +297,6 @@ export function ProfilePrivateStats(props: {
           </span>
           <span className="mx-auto text-xs sm:text-sm">profit</span>
         </Col>
-        <Col
-          className={clsx('text-,d cursor-pointer sm:text-lg ')}
-          onClick={() => setShowBettingStreakModal(true)}
-        >
-          <span
-            className={clsx(
-              !hasCompletedStreakToday(user)
-                ? 'opacity-50 grayscale'
-                : 'grayscale-0'
-            )}
-          >
-            🔥 {user.currentBettingStreak ?? 0}
-          </span>
-          <span className="text-greyscale-4 mx-auto text-xs sm:text-sm">
-            streak
-          </span>
-        </Col>
         <Col
           className={
             'text-greyscale-4 text-md flex-shrink-0 cursor-pointer sm:text-lg'
@@ -330,13 +309,6 @@ export function ProfilePrivateStats(props: {
           <span className="mx-auto text-xs sm:text-sm">next loan</span>
         </Col>
       </Row>
-      {BettingStreakModal && (
-        <BettingStreakModal
-          isOpen={showBettingStreakModal}
-          setOpen={setShowBettingStreakModal}
-          currentUser={currentUser}
-        />
-      )}
       {showLoansModal && (
         <LoansModal isOpen={showLoansModal} setOpen={setShowLoansModal} />
       )}
diff --git a/web/components/warning-confirmation-button.tsx b/web/components/warning-confirmation-button.tsx
index abdf443e..0c50bc76 100644
--- a/web/components/warning-confirmation-button.tsx
+++ b/web/components/warning-confirmation-button.tsx
@@ -11,12 +11,13 @@ export function WarningConfirmationButton(props: {
   amount: number | undefined
   marketType: 'freeResponse' | 'binary'
   warning?: string
-  onSubmit: () => void
+  onSubmit?: () => void
   disabled: boolean
   isSubmitting: boolean
   openModalButtonClass?: string
   color: ColorType
   size: SizeType
+  actionLabel: string
 }) {
   const {
     amount,
@@ -27,8 +28,15 @@ export function WarningConfirmationButton(props: {
     openModalButtonClass,
     size,
     color,
+    actionLabel,
   } = props
 
+  const buttonText = isSubmitting
+    ? 'Submitting...'
+    : amount
+    ? `${actionLabel} ${formatMoney(amount)}`
+    : actionLabel
+
   if (!warning) {
     return (
       <Button
@@ -38,11 +46,7 @@ export function WarningConfirmationButton(props: {
         onClick={onSubmit}
         color={color}
       >
-        {isSubmitting
-          ? 'Submitting...'
-          : amount
-          ? `Wager ${formatMoney(amount)}`
-          : 'Wager'}
+        {buttonText}
       </Button>
     )
   }
@@ -50,18 +54,18 @@ export function WarningConfirmationButton(props: {
   return (
     <ConfirmationButton
       openModalBtn={{
-        label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
+        label: buttonText,
         size: size,
         color: 'yellow',
-        disabled: isSubmitting,
+        disabled: isSubmitting || disabled,
       }}
       cancelBtn={{
         label: 'Cancel',
-        className: 'btn btn-warning',
+        color: 'yellow',
       }}
       submitBtn={{
         label: 'Submit',
-        className: clsx('btn border-none btn-sm btn-ghost self-center'),
+        color: 'gray',
       }}
       onSubmit={onSubmit}
     >
diff --git a/web/components/widgets/short-toggle.tsx b/web/components/widgets/short-toggle.tsx
index 339de361..d8baeebe 100644
--- a/web/components/widgets/short-toggle.tsx
+++ b/web/components/widgets/short-toggle.tsx
@@ -3,22 +3,27 @@ import { Switch } from '@headlessui/react'
 import clsx from 'clsx'
 
 export default function ShortToggle(props: {
-  enabled: boolean
-  setEnabled: (enabled: boolean) => void
+  on: boolean
+  setOn: (enabled: boolean) => void
+  disabled?: boolean
   onChange?: (enabled: boolean) => void
 }) {
-  const { enabled, setEnabled } = props
+  const { on, setOn, disabled } = props
 
   return (
     <Switch
-      checked={enabled}
+      disabled={disabled}
+      checked={on}
       onChange={(e: boolean) => {
-        setEnabled(e)
+        setOn(e)
         if (props.onChange) {
           props.onChange(e)
         }
       }}
-      className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+      className={clsx(
+        'group relative inline-flex h-5 w-10 flex-shrink-0 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
+        !disabled ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'
+      )}
     >
       <span className="sr-only">Use setting</span>
       <span
@@ -28,14 +33,14 @@ export default function ShortToggle(props: {
       <span
         aria-hidden="true"
         className={clsx(
-          enabled ? 'bg-indigo-600' : 'bg-gray-200',
+          on ? 'bg-indigo-600' : 'bg-gray-200',
           'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
         )}
       />
       <span
         aria-hidden="true"
         className={clsx(
-          enabled ? 'translate-x-5' : 'translate-x-0',
+          on ? 'translate-x-5' : 'translate-x-0',
           'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out'
         )}
       />
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index 10a58a42..69bf47f0 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -244,7 +244,7 @@ function Button(props: {
       type="button"
       className={clsx(
         'inline-flex flex-1 items-center justify-center rounded-md border border-transparent px-8 py-3 font-medium shadow-sm',
-        color === 'green' && 'bg-teal-500 bg-teal-600 text-white',
+        color === 'green' && 'bg-teal-500 text-white hover:bg-teal-600',
         color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
         color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
         color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
diff --git a/web/hooks/use-bets.ts b/web/hooks/use-bets.ts
index 9155d25e..1d0a0762 100644
--- a/web/hooks/use-bets.ts
+++ b/web/hooks/use-bets.ts
@@ -8,6 +8,7 @@ import {
   withoutAnteBets,
 } from 'web/lib/firebase/bets'
 import { LimitBet } from 'common/bet'
+import { getUser } from 'web/lib/firebase/users'
 
 export const useBets = (
   contractId: string,
@@ -62,3 +63,31 @@ export const useUnfilledBets = (contractId: string) => {
   )
   return unfilledBets
 }
+
+export const useUnfilledBetsAndBalanceByUserId = (contractId: string) => {
+  const [data, setData] = useState<{
+    unfilledBets: LimitBet[]
+    balanceByUserId: { [userId: string]: number }
+  }>({ unfilledBets: [], balanceByUserId: {} })
+
+  useEffect(() => {
+    let requestCount = 0
+
+    return listenForUnfilledBets(contractId, (unfilledBets) => {
+      requestCount++
+      const count = requestCount
+
+      Promise.all(unfilledBets.map((bet) => getUser(bet.userId))).then(
+        (users) => {
+          if (count === requestCount) {
+            const balanceByUserId = Object.fromEntries(
+              users.map((user) => [user.id, user.balance])
+            )
+            setData({ unfilledBets, balanceByUserId })
+          }
+        }
+      )
+    })
+  }, [contractId])
+  return data
+}
diff --git a/web/hooks/use-contracts.ts b/web/hooks/use-contracts.ts
index 7952deba..61a956c9 100644
--- a/web/hooks/use-contracts.ts
+++ b/web/hooks/use-contracts.ts
@@ -32,7 +32,7 @@ export const useContracts = () => {
 export const useTrendingContracts = (maxContracts: number) => {
   const { data } = useQuery(['trending-contracts', maxContracts], () =>
     trendingIndex.search<CPMMBinaryContract>('', {
-      facetFilters: ['isResolved:false'],
+      facetFilters: ['isResolved:false', 'visibility:public'],
       hitsPerPage: maxContracts,
     })
   )
@@ -43,7 +43,7 @@ export const useTrendingContracts = (maxContracts: number) => {
 export const useNewContracts = (maxContracts: number) => {
   const { data } = useQuery(['newest-contracts', maxContracts], () =>
     newIndex.search<CPMMBinaryContract>('', {
-      facetFilters: ['isResolved:false'],
+      facetFilters: ['isResolved:false', 'visibility:public'],
       hitsPerPage: maxContracts,
     })
   )
@@ -57,7 +57,11 @@ export const useContractsByDailyScoreNotBetOn = (
 ) => {
   const { data } = useQuery(['daily-score', userId, maxContracts], () =>
     dailyScoreIndex.search<CPMMBinaryContract>('', {
-      facetFilters: ['isResolved:false', `uniqueBettors:-${userId}`],
+      facetFilters: [
+        'isResolved:false',
+        'visibility:public',
+        `uniqueBettors:-${userId}`,
+      ],
       hitsPerPage: maxContracts,
     })
   )
@@ -88,7 +92,7 @@ export const useContractsByDailyScoreGroups = (
 
 const q = new QueryClient()
 export const getCachedContracts = async () =>
-  q.fetchQuery(['contracts'], () => listAllContracts(1000), {
+  q.fetchQuery(['contracts'], () => listAllContracts(10000), {
     staleTime: Infinity,
   })
 
diff --git a/web/hooks/use-liquidity.ts b/web/hooks/use-liquidity.ts
index 9c7c2b6f..9c610f3b 100644
--- a/web/hooks/use-liquidity.ts
+++ b/web/hooks/use-liquidity.ts
@@ -21,11 +21,6 @@ export const useLiquidity = (contractId: string) => {
 export const useUserLiquidity = (contract: CPMMContract, userId: string) => {
   const liquidities = useLiquidity(contract.id)
 
-  const userShares = getUserLiquidityShares(
-    userId,
-    contract,
-    liquidities ?? [],
-    true
-  )
+  const userShares = getUserLiquidityShares(userId, contract, liquidities ?? [])
   return userShares
 }
diff --git a/web/hooks/use-pagination.ts b/web/hooks/use-pagination.ts
index ab991d1f..5aa65bfe 100644
--- a/web/hooks/use-pagination.ts
+++ b/web/hooks/use-pagination.ts
@@ -91,9 +91,15 @@ export const usePagination = <T>(opts: PaginationOptions<T>) => {
       const nextQ = lastDoc
         ? query(state.baseQ, startAfter(lastDoc), limit(state.pageSize))
         : query(state.baseQ, limit(state.pageSize))
-      return onSnapshot(nextQ, (snapshot) => {
-        dispatch({ type: 'LOAD', snapshot })
-      })
+      return onSnapshot(
+        nextQ,
+        (snapshot) => {
+          dispatch({ type: 'LOAD', snapshot })
+        },
+        (error) => {
+          console.error('error', error)
+        }
+      )
     }
   }, [state.isLoading, state.baseQ, state.docs, state.pageSize])
 
diff --git a/web/hooks/use-persistent-state.ts b/web/hooks/use-persistent-state.ts
index 090aa264..4448bb77 100644
--- a/web/hooks/use-persistent-state.ts
+++ b/web/hooks/use-persistent-state.ts
@@ -1,12 +1,13 @@
 import { useEffect } from 'react'
 import { useStateCheckEquality } from './use-state-check-equality'
-import { NextRouter } from 'next/router'
+import { NextRouter, useRouter } from 'next/router'
 
 export type PersistenceOptions<T> = { key: string; store: PersistentStore<T> }
 
 export interface PersistentStore<T> {
   get: (k: string) => T | undefined
   set: (k: string, v: T | undefined) => void
+  readsUrl?: boolean
 }
 
 const withURLParam = (location: Location, k: string, v?: string) => {
@@ -61,6 +62,7 @@ export const urlParamStore = (router: NextRouter): PersistentStore<string> => ({
       window.history.replaceState(updatedState, '', url)
     }
   },
+  readsUrl: true,
 })
 
 export const historyStore = <T>(prefix = '__manifold'): PersistentStore<T> => ({
@@ -102,5 +104,20 @@ export const usePersistentState = <T>(
       store.set(key, state)
     }
   }, [key, state])
+
+  if (store?.readsUrl) {
+    // On page load, router isn't ready immediately, so set state once it is.
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = useRouter()
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (router.isReady) {
+        const savedValue = key != null ? store.get(key) : undefined
+        setState(savedValue ?? initial)
+      }
+    }, [router.isReady])
+  }
+
   return [state, setState] as const
 }
diff --git a/web/hooks/use-post.ts b/web/hooks/use-post.ts
index ff7bf6b9..1fd69888 100644
--- a/web/hooks/use-post.ts
+++ b/web/hooks/use-post.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { Post } from 'common/post'
-import { listenForPost } from 'web/lib/firebase/posts'
+import { DateDoc, Post } from 'common/post'
+import { listenForDateDocs, listenForPost } from 'web/lib/firebase/posts'
 
 export const usePost = (postId: string | undefined) => {
   const [post, setPost] = useState<Post | null | undefined>()
@@ -37,3 +37,13 @@ export const usePosts = (postIds: string[]) => {
     )
     .sort((a, b) => b.createdTime - a.createdTime)
 }
+
+export const useDateDocs = () => {
+  const [dateDocs, setDateDocs] = useState<DateDoc[]>()
+
+  useEffect(() => {
+    return listenForDateDocs(setDateDocs)
+  }, [])
+
+  return dateDocs
+}
diff --git a/web/hooks/use-prob-changes.tsx b/web/hooks/use-prob-changes.tsx
index 132cfd64..3a00faa0 100644
--- a/web/hooks/use-prob-changes.tsx
+++ b/web/hooks/use-prob-changes.tsx
@@ -28,11 +28,11 @@ export const useProbChanges = (
   }
 
   const { data: positiveChanges } = useQuery(
-    ['prob-change-day', groupSlugs],
+    ['prob-change-day', groupSlugs, bettorId],
     () => probChangeDescendingIndex.search<CPMMBinaryContract>('', searchParams)
   )
   const { data: negativeChanges } = useQuery(
-    ['prob-change-day-ascending', groupSlugs],
+    ['prob-change-day-ascending', groupSlugs, bettorId],
     () => probChangeAscendingIndex.search<CPMMBinaryContract>('', searchParams)
   )
 
diff --git a/web/hooks/use-user.ts b/web/hooks/use-user.ts
index b355d87d..793c11ff 100644
--- a/web/hooks/use-user.ts
+++ b/web/hooks/use-user.ts
@@ -1,10 +1,18 @@
 import { useContext } from 'react'
-import { useFirestoreDocumentData } from '@react-query-firebase/firestore'
-import { useQueryClient } from 'react-query'
+import {
+  useFirestoreDocumentData,
+  useFirestoreQueryData,
+} from '@react-query-firebase/firestore'
+import { useQuery, useQueryClient } from 'react-query'
 
 import { doc, DocumentData } from 'firebase/firestore'
 import { getUser, User, users } from 'web/lib/firebase/users'
 import { AuthContext } from 'web/components/auth-context'
+import { ContractMetrics } from 'common/calculate-metrics'
+import { getUserContractMetricsQuery } from 'web/lib/firebase/contract-metrics'
+import { getContractFromId } from 'web/lib/firebase/contracts'
+import { buildArray, filterDefined } from 'common/util/array'
+import { CPMMBinaryContract } from 'common/contract'
 
 export const useUser = () => {
   const authUser = useContext(AuthContext)
@@ -38,3 +46,45 @@ export const usePrefetchUsers = (userIds: string[]) => {
     queryClient.prefetchQuery(['users', userId], () => getUser(userId))
   )
 }
+
+export const useUserContractMetricsByProfit = (
+  userId: string,
+  count: number
+) => {
+  const positiveResult = useFirestoreQueryData<ContractMetrics>(
+    ['contract-metrics-descending', userId, count],
+    getUserContractMetricsQuery(userId, count, 'desc')
+  )
+  const negativeResult = useFirestoreQueryData<ContractMetrics>(
+    ['contract-metrics-ascending', userId, count],
+    getUserContractMetricsQuery(userId, count, 'asc')
+  )
+
+  const metrics = buildArray(positiveResult.data, negativeResult.data)
+  const contractIds = metrics.map((m) => m.contractId)
+
+  const contractResult = useQuery(['contracts', contractIds], () =>
+    Promise.all(contractIds.map(getContractFromId))
+  )
+  const contracts = contractResult.data
+
+  if (!positiveResult.data || !negativeResult.data || !contracts)
+    return undefined
+
+  const filteredContracts = filterDefined(contracts) as CPMMBinaryContract[]
+  const filteredMetrics = metrics.filter(
+    (m) => m.from && Math.abs(m.from.day.profit) >= 0.5
+  )
+  return { contracts: filteredContracts, metrics: filteredMetrics }
+}
+
+export const useUserContractMetrics = (userId = '_', contractId: string) => {
+  const result = useFirestoreDocumentData<DocumentData, ContractMetrics>(
+    ['user-contract-metrics', userId, contractId],
+    doc(users, userId, 'contract-metrics', contractId)
+  )
+
+  if (userId === '_') return undefined
+
+  return result.data
+}
diff --git a/web/lib/firebase/api.ts b/web/lib/firebase/api.ts
index 3e803bc6..d17ee9c4 100644
--- a/web/lib/firebase/api.ts
+++ b/web/lib/firebase/api.ts
@@ -42,8 +42,8 @@ export function changeUserInfo(params: any) {
   return call(getFunctionUrl('changeuserinfo'), 'POST', params)
 }
 
-export function addLiquidity(params: any) {
-  return call(getFunctionUrl('addliquidity'), 'POST', params)
+export function addSubsidy(params: any) {
+  return call(getFunctionUrl('addsubsidy'), 'POST', params)
 }
 
 export function addCommentBounty(params: any) {
@@ -54,10 +54,6 @@ export function awardCommentBounty(params: any) {
   return call(getFunctionUrl('awardcommentbounty'), 'POST', params)
 }
 
-export function withdrawLiquidity(params: any) {
-  return call(getFunctionUrl('withdrawliquidity'), 'POST', params)
-}
-
 export function createMarket(params: any) {
   return call(getFunctionUrl('createmarket'), 'POST', params)
 }
diff --git a/web/lib/firebase/bets.ts b/web/lib/firebase/bets.ts
index 2da95f9d..d03cf565 100644
--- a/web/lib/firebase/bets.ts
+++ b/web/lib/firebase/bets.ts
@@ -74,11 +74,13 @@ export async function getUserBets(userId: string) {
   return getValues<Bet>(getUserBetsQuery(userId))
 }
 
+export const MAX_USER_BETS_LOADED = 10000
 export function getUserBetsQuery(userId: string) {
   return query(
     collectionGroup(db, 'bets'),
     where('userId', '==', userId),
-    orderBy('createdTime', 'desc')
+    orderBy('createdTime', 'desc'),
+    limit(MAX_USER_BETS_LOADED)
   ) as Query<Bet>
 }
 
diff --git a/web/lib/firebase/contract-metrics.ts b/web/lib/firebase/contract-metrics.ts
new file mode 100644
index 00000000..522b3d3f
--- /dev/null
+++ b/web/lib/firebase/contract-metrics.ts
@@ -0,0 +1,23 @@
+import { ContractMetrics } from 'common/calculate-metrics'
+import {
+  query,
+  limit,
+  Query,
+  collection,
+  orderBy,
+  where,
+} from 'firebase/firestore'
+import { db } from './init'
+
+export function getUserContractMetricsQuery(
+  userId: string,
+  count: number,
+  sort: 'asc' | 'desc'
+) {
+  return query(
+    collection(db, 'users', userId, 'contract-metrics'),
+    where('from.day.profit', sort === 'desc' ? '>' : '<', 0),
+    orderBy('from.day.profit', sort),
+    limit(count)
+  ) as Query<ContractMetrics>
+}
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index d7f6cd88..fc6993ec 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -108,7 +108,6 @@ export const tournamentContractsByGroupSlugQuery = (slug: string) =>
   query(
     contracts,
     where('groupSlugs', 'array-contains', slug),
-    where('isResolved', '==', false),
     orderBy('popularityScore', 'desc')
   )
 
@@ -169,10 +168,12 @@ export function getUserBetContracts(userId: string) {
   return getValues<Contract>(getUserBetContractsQuery(userId))
 }
 
+export const MAX_USER_BET_CONTRACTS_LOADED = 1000
 export function getUserBetContractsQuery(userId: string) {
   return query(
     contracts,
-    where('uniqueBettorIds', 'array-contains', userId)
+    where('uniqueBettorIds', 'array-contains', userId),
+    limit(MAX_USER_BET_CONTRACTS_LOADED)
   ) as Query<Contract>
 }
 
diff --git a/web/lib/firebase/groups.ts b/web/lib/firebase/groups.ts
index 17e41c53..6bfc4e85 100644
--- a/web/lib/firebase/groups.ts
+++ b/web/lib/firebase/groups.ts
@@ -191,6 +191,7 @@ export async function leaveGroup(group: Group, userId: string): Promise<void> {
   return await deleteDoc(memberDoc)
 }
 
+// TODO: This doesn't check if the user has permission to do this
 export async function addContractToGroup(
   group: Group,
   contract: Contract,
@@ -211,15 +212,9 @@ export async function addContractToGroup(
     groupSlugs: uniq([...(contract.groupSlugs ?? []), group.slug]),
     groupLinks: newGroupLinks,
   })
-
-  // create new contract document in groupContracts collection
-  const contractDoc = doc(groupContracts(group.id), contract.id)
-  await setDoc(contractDoc, {
-    contractId: contract.id,
-    createdTime: Date.now(),
-  })
 }
 
+// TODO: This doesn't check if the user has permission to do this
 export async function removeContractFromGroup(
   group: Group,
   contract: Contract
@@ -234,10 +229,6 @@ export async function removeContractFromGroup(
       groupLinks: newGroupLinks ?? [],
     })
   }
-
-  // delete the contract document in groupContracts collection
-  const contractDoc = doc(groupContracts(group.id), contract.id)
-  await deleteDoc(contractDoc)
 }
 
 export function getGroupLinkToDisplay(contract: Contract) {
diff --git a/web/lib/firebase/posts.ts b/web/lib/firebase/posts.ts
index 22b9d095..343243cd 100644
--- a/web/lib/firebase/posts.ts
+++ b/web/lib/firebase/posts.ts
@@ -7,7 +7,13 @@ import {
   where,
 } from 'firebase/firestore'
 import { DateDoc, Post } from 'common/post'
-import { coll, getValue, getValues, listenForValue } from './utils'
+import {
+  coll,
+  getValue,
+  getValues,
+  listenForValue,
+  listenForValues,
+} from './utils'
 import { getUserByUsername } from './users'
 
 export const posts = coll<Post>('posts')
@@ -51,6 +57,11 @@ export async function getDateDocs() {
   return getValues<DateDoc>(q)
 }
 
+export function listenForDateDocs(setDateDocs: (dateDocs: DateDoc[]) => void) {
+  const q = query(posts, where('type', '==', 'date-doc'))
+  return listenForValues<DateDoc>(q, setDateDocs)
+}
+
 export async function getDateDoc(username: string) {
   const user = await getUserByUsername(username)
   if (!user) return null
diff --git a/web/lib/icons/twitter-logo.tsx b/web/lib/icons/twitter-logo.tsx
new file mode 100644
index 00000000..466a1430
--- /dev/null
+++ b/web/lib/icons/twitter-logo.tsx
@@ -0,0 +1,28 @@
+export default function TwitterLogo(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      version="1.1"
+      id="Logo"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      viewBox="0 0 248 204"
+      stroke="currentColor"
+      fill="currentColor"
+      {...props}
+    >
+      <g id="Logo_1_">
+        <path
+          id="white_background"
+          className="st0"
+          d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
+		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
+		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
+		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
+		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
+		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/web/lib/service/sprig.ts b/web/lib/service/sprig.ts
index 9353020d..7a478d77 100644
--- a/web/lib/service/sprig.ts
+++ b/web/lib/service/sprig.ts
@@ -3,31 +3,35 @@
 // Integrate Sprig
 
 import { ENV_CONFIG } from 'common/envs/constants'
+import { PROD_CONFIG } from 'common/envs/prod'
 
-try {
-  ;(function (l, e, a, p) {
-    if (window.Sprig) return
-    window.Sprig = function (...args) {
-      S._queue.push(args)
-    }
-    const S = window.Sprig
-    S.appId = a
-    S._queue = []
-    window.UserLeap = S
-    a = l.createElement('script')
-    a.async = 1
-    a.src = e + '?id=' + S.appId
-    p = l.getElementsByTagName('script')[0]
-    p.parentNode.insertBefore(a, p)
-  })(document, 'https://cdn.sprig.com/shim.js', ENV_CONFIG.sprigEnvironmentId)
-} catch (error) {
-  console.log('Error initializing Sprig, please complain to Barak', error)
+if (ENV_CONFIG.domain === PROD_CONFIG.domain && typeof window !== 'undefined') {
+  try {
+    ;(function (l, e, a, p) {
+      if (window.Sprig) return
+      window.Sprig = function (...args) {
+        S._queue.push(args)
+      }
+      const S = window.Sprig
+      S.appId = a
+      S._queue = []
+      window.UserLeap = S
+      a = l.createElement('script')
+      a.async = 1
+      a.src = e + '?id=' + S.appId
+      p = l.getElementsByTagName('script')[0]
+      ENV_CONFIG.domain === PROD_CONFIG.domain &&
+        p.parentNode.insertBefore(a, p)
+    })(document, 'https://cdn.sprig.com/shim.js', ENV_CONFIG.sprigEnvironmentId)
+  } catch (error) {
+    console.log('Error initializing Sprig, please complain to Barak', error)
+  }
 }
 
 export function setUserId(userId: string): void {
-  window.Sprig('setUserId', userId)
+  if (window.Sprig) window.Sprig('setUserId', userId)
 }
 
 export function setAttributes(attributes: Record<string, unknown>): void {
-  window.Sprig('setAttributes', attributes)
+  if (window.Sprig) window.Sprig('setAttributes', attributes)
 }
diff --git a/web/package.json b/web/package.json
index a5fa8ced..f64b79e8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint-fix": "next lint --fix",
     "format": "npx prettier --write .",
     "verify": "(cd .. && yarn verify)",
     "verify:dir": "npx prettier --check .; yarn lint --max-warnings 0; tsc --pretty --project tsconfig.json --noEmit"
@@ -22,10 +23,8 @@
     "@amplitude/analytics-browser": "0.4.1",
     "@floating-ui/react-dom-interactions": "0.9.2",
     "@headlessui/react": "1.6.1",
+    "@hello-pangea/dnd": "16.0.0",
     "@heroicons/react": "1.0.6",
-    "@nivo/core": "0.80.0",
-    "@nivo/line": "0.80.0",
-    "@nivo/tooltip": "0.80.0",
     "@react-query-firebase/firestore": "0.4.2",
     "@tiptap/core": "2.0.0-beta.182",
     "@tiptap/extension-character-count": "2.0.0-beta.31",
@@ -43,8 +42,8 @@
     "d3-axis": "3.0.0",
     "d3-brush": "3.0.0",
     "d3-scale": "4.0.2",
-    "d3-shape": "3.1.0",
     "d3-selection": "3.0.0",
+    "d3-shape": "3.1.0",
     "daisyui": "1.16.4",
     "dayjs": "1.10.7",
     "firebase": "9.9.3",
@@ -55,11 +54,10 @@
     "next": "12.3.1",
     "node-fetch": "3.2.4",
     "prosemirror-state": "1.4.1",
-    "react": "17.0.2",
-    "react-beautiful-dnd": "13.1.1",
+    "react": "18.2.0",
     "react-confetti": "6.0.1",
-    "react-dom": "17.0.2",
-    "react-expanding-textarea": "2.3.5",
+    "react-dom": "18.2.0",
+    "react-expanding-textarea": "2.3.6",
     "react-hot-toast": "2.2.0",
     "react-instantsearch-hooks-web": "6.24.1",
     "react-masonry-css": "1.0.16",
@@ -75,9 +73,8 @@
     "@types/d3": "7.4.0",
     "@types/lodash": "4.14.178",
     "@types/node": "16.11.11",
-    "@types/react": "17.0.43",
-    "@types/react-beautiful-dnd": "13.1.2",
-    "@types/react-dom": "17.0.2",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
     "@types/string-similarity": "^4.0.0",
     "autoprefixer": "10.2.6",
     "critters": "0.0.16",
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 9b8b21cb..70026e5e 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -160,6 +160,7 @@ export function ContractPageContent(
   const { backToHome, comments } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const user = useUser()
+  const isCreator = user?.id === contract.creatorId
   usePrefetch(user?.id)
   useTracking(
     'view market',
@@ -204,7 +205,22 @@ export function ContractPageContent(
   })
 
   return (
-    <Page rightSidebar={<ContractPageSidebar contract={contract} />}>
+    <Page
+      rightSidebar={
+        user || user === null ? (
+          <>
+            <ContractPageSidebar contract={contract} />
+            {isCreator && (
+              <Col className={'xl:hidden'}>
+                <RecommendedContractsWidget contract={contract} />
+              </Col>
+            )}
+          </>
+        ) : (
+          <div />
+        )
+      }
+    >
       {showConfetti && (
         <FullscreenConfetti recycle={false} numberOfPieces={300} />
       )}
@@ -254,7 +270,11 @@ export function ContractPageContent(
           <>
             <div className="grid grid-cols-1 sm:grid-cols-2">
               <ContractLeaderboard contract={contract} bets={bets} />
-              <ContractTopTrades contract={contract} bets={bets} />
+              <ContractTopTrades
+                contract={contract}
+                bets={bets}
+                comments={comments}
+              />
             </div>
             <Spacer h={12} />
           </>
@@ -273,7 +293,7 @@ export function ContractPageContent(
           comments={comments}
         />
       </Col>
-      <RecommendedContractsWidget contract={contract} />
+      {!isCreator && <RecommendedContractsWidget contract={contract} />}
       <ScrollToTopButton className="fixed bottom-16 right-2 z-20 lg:bottom-2 xl:hidden" />
     </Page>
   )
@@ -294,7 +314,7 @@ const RecommendedContractsWidget = memo(
       return null
     }
     return (
-      <Col className="mt-2 gap-2 px-2 sm:px-0">
+      <Col className="mt-2 gap-2 px-2 sm:px-1">
         <Title className="text-gray-700" text="Recommended" />
         <ContractsGrid
           contracts={recommendations}
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 3e82d029..7a96b2e2 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -42,7 +42,7 @@ function MyApp({ Component, pageProps }: AppProps<ManifoldPageProps>) {
         `}
       </Script>
       <Head>
-        <title>Manifold Markets — A market for every question</title>
+        <title>{'Manifold Markets — A market for every question'}</title>
 
         <meta
           property="og:title"
@@ -74,10 +74,7 @@ function MyApp({ Component, pageProps }: AppProps<ManifoldPageProps>) {
           content="https://manifold.markets/logo-bg-white.png"
           key="image2"
         />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, maximum-scale=1"
-        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <AuthProvider serverUser={pageProps.auth}>
         <QueryClientProvider client={queryClient}>
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index b8cb657c..f2c46854 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -3,7 +3,7 @@ import { ENV_CONFIG } from 'common/envs/constants'
 
 export default function Document() {
   return (
-    <Html data-theme="mantic" className="min-h-screen">
+    <Html lang="en" data-theme="mantic" className="min-h-screen">
       <Head>
         <link rel="icon" href={ENV_CONFIG.faviconPath} />
         <link
diff --git a/web/pages/add-funds.tsx b/web/pages/add-funds.tsx
index 602de276..d1bcf378 100644
--- a/web/pages/add-funds.tsx
+++ b/web/pages/add-funds.tsx
@@ -9,6 +9,7 @@ import { Page } from 'web/components/page'
 import { useTracking } from 'web/hooks/use-tracking'
 import { trackCallback } from 'web/lib/service/analytics'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
+import { Button } from 'web/components/button'
 
 export const getServerSideProps = redirectIfLoggedOut('/')
 
@@ -33,15 +34,15 @@ export default function AddFundsPage() {
         <Col className="h-full rounded bg-white p-4 py-8 sm:p-8 sm:shadow-md">
           <Title className="!mt-0" text="Get Mana" />
           <img
-            className="mb-6 block -scale-x-100 self-center"
-            src="/stylized-crane-black.png"
+            className="mb-6 block self-center"
+            src="/welcome/manipurple.png"
             width={200}
             height={200}
           />
 
           <div className="mb-6 text-gray-500">
-            Buy mana (M$) to trade in your favorite markets. <br /> (Not
-            redeemable for cash.)
+            Buy mana (M$) to trade in your favorite markets. <br />{' '}
+            <i>Not redeemable for cash.</i>
           </div>
 
           <div className="mb-2 text-sm text-gray-500">Amount</div>
@@ -63,13 +64,15 @@ export default function AddFundsPage() {
             method="POST"
             className="mt-8"
           >
-            <button
+            <Button
               type="submit"
-              className="btn btn-primary w-full bg-gradient-to-r from-indigo-500 to-blue-500 font-medium hover:from-indigo-600 hover:to-blue-600"
+              color="gradient"
+              size="xl"
+              className="w-full"
               onClick={trackCallback('checkout', { amount: amountSelected })}
             >
               Checkout
-            </button>
+            </Button>
           </form>
         </Col>
       </Col>
diff --git a/web/pages/api/v0/_types.ts b/web/pages/api/v0/_types.ts
index ccaa217d..788b5ec7 100644
--- a/web/pages/api/v0/_types.ts
+++ b/web/pages/api/v0/_types.ts
@@ -192,7 +192,6 @@ export type LiteUser = {
   avatarUrl?: string
 
   bio?: string
-  bannerUrl?: string
   website?: string
   twitterHandle?: string
   discordHandle?: string
@@ -223,7 +222,6 @@ export function toLiteUser(user: User): LiteUser {
     username,
     avatarUrl,
     bio,
-    bannerUrl,
     website,
     twitterHandle,
     discordHandle,
@@ -241,7 +239,6 @@ export function toLiteUser(user: User): LiteUser {
     url: `https://${ENV_CONFIG.domain}/${username}`,
     avatarUrl,
     bio,
-    bannerUrl,
     website,
     twitterHandle,
     discordHandle,
diff --git a/web/pages/charity/index.tsx b/web/pages/charity/index.tsx
index 2f4407d9..4ee7635e 100644
--- a/web/pages/charity/index.tsx
+++ b/web/pages/charity/index.tsx
@@ -24,6 +24,7 @@ import { getUser } from 'web/lib/firebase/users'
 import { SiteLink } from 'web/components/site-link'
 import { User } from 'common/user'
 import { SEO } from 'web/components/SEO'
+import { Input } from 'web/components/input'
 
 export async function getStaticProps() {
   let txns = await getAllCharityTxns()
@@ -171,11 +172,11 @@ export default function Charity(props: {
           />
           <Spacer h={10} />
 
-          <input
+          <Input
             type="text"
             onChange={(e) => debouncedQuery(e.target.value)}
             placeholder="Find a charity"
-            className="input input-bordered mb-6 w-full"
+            className="mb-6 w-full"
           />
         </Col>
         <div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 self-center lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
diff --git a/web/pages/contract-search-firestore.tsx b/web/pages/contract-search-firestore.tsx
index 4d6ada1d..0f81499f 100644
--- a/web/pages/contract-search-firestore.tsx
+++ b/web/pages/contract-search-firestore.tsx
@@ -9,6 +9,7 @@ import {
   urlParamStore,
 } from 'web/hooks/use-persistent-state'
 import { PAST_BETS } from 'common/user'
+import { Input } from 'web/components/input'
 
 const MAX_CONTRACTS_RENDERED = 100
 
@@ -88,12 +89,12 @@ export default function ContractSearchFirestore(props: {
     <div>
       {/* Show a search input next to a sort dropdown */}
       <div className="mt-2 mb-8 flex justify-between gap-2">
-        <input
+        <Input
           type="text"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           placeholder="Search markets"
-          className="input input-bordered w-full"
+          className="w-full"
         />
         <select
           className="select select-bordered"
diff --git a/web/pages/cowp.tsx b/web/pages/cowp.tsx
index 21494c37..a854f141 100644
--- a/web/pages/cowp.tsx
+++ b/web/pages/cowp.tsx
@@ -11,7 +11,7 @@ const App = () => {
         url="/cowp"
       />
       <Link href="https://www.youtube.com/watch?v=FavUpD_IjVY">
-        <img src="https://i.imgur.com/Lt54IiU.png" />
+        <img src="https://i.imgur.com/Lt54IiU.png" className="cursor-pointer" />
       </Link>
     </Page>
   )
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index 03b90d7c..7ba99a39 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -2,7 +2,6 @@ import router, { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
-import Textarea from 'react-expanding-textarea'
 import { Spacer } from 'web/components/layout/spacer'
 import { getUserAndPrivateUser } from 'web/lib/firebase/users'
 import { Contract, contractPath } from 'web/lib/firebase/contracts'
@@ -36,6 +35,11 @@ import { MultipleChoiceAnswers } from 'web/components/answers/multiple-choice-an
 import { MINUTE_MS } from 'common/util/time'
 import { ExternalLinkIcon } from '@heroicons/react/outline'
 import { SiteLink } from 'web/components/site-link'
+import { Button } from 'web/components/button'
+import { AddFundsModal } from 'web/components/add-funds-modal'
+import ShortToggle from 'web/components/widgets/short-toggle'
+import { Input } from 'web/components/input'
+import { ExpandingInput } from 'web/components/expanding-input'
 
 export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
   return { props: { auth: await getUserAndPrivateUser(creds.uid) } }
@@ -48,6 +52,7 @@ type NewQuestionParams = {
   description: string
   closeTime: string
   outcomeType: string
+  visibility: string
   // Params for PSEUDO_NUMERIC outcomeType
   min?: string
   max?: string
@@ -100,9 +105,8 @@ export default function Create(props: { auth: { user: User } }) {
                 </span>
               </label>
 
-              <Textarea
+              <ExpandingInput
                 placeholder="e.g. Will the Democrats win the 2024 US presidential election?"
-                className="input input-bordered resize-none"
                 autoFocus
                 maxLength={MAX_QUESTION_LENGTH}
                 value={question}
@@ -134,7 +138,9 @@ export function NewContract(props: {
   const [maxString, setMaxString] = useState(params?.max ?? '')
   const [isLogScale, setIsLogScale] = useState<boolean>(!!params?.isLogScale)
   const [initialValueString, setInitialValueString] = useState(initValue)
-
+  const [visibility, setVisibility] = useState<visibility>(
+    (params?.visibility as visibility) ?? 'public'
+  )
   // for multiple choice, init to 3 empty answers
   const [answers, setAnswers] = useState(['', '', ''])
 
@@ -166,7 +172,8 @@ export function NewContract(props: {
     undefined
   )
   const [showGroupSelector, setShowGroupSelector] = useState(true)
-  const [visibility, setVisibility] = useState<visibility>('public')
+
+  const [fundsModalOpen, setFundsModalOpen] = useState(false)
 
   const closeTime = closeDate
     ? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
@@ -322,9 +329,9 @@ export function NewContract(props: {
             </label>
 
             <Row className="gap-2">
-              <input
+              <Input
                 type="number"
-                className="input input-bordered w-32"
+                className="w-32"
                 placeholder="LOW"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setMinString(e.target.value)}
@@ -333,9 +340,9 @@ export function NewContract(props: {
                 disabled={isSubmitting}
                 value={minString ?? ''}
               />
-              <input
+              <Input
                 type="number"
-                className="input input-bordered w-32"
+                className="w-32"
                 placeholder="HIGH"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setMaxString(e.target.value)}
@@ -367,9 +374,8 @@ export function NewContract(props: {
             </label>
 
             <Row className="gap-2">
-              <input
+              <Input
                 type="number"
-                className="input input-bordered"
                 placeholder="Initial value"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setInitialValueString(e.target.value)}
@@ -410,14 +416,9 @@ export function NewContract(props: {
 
       <Row className="form-control my-2 items-center gap-2 text-sm">
         <span>Display this market on homepage</span>
-        <input
-          type="checkbox"
-          checked={visibility === 'public'}
-          disabled={isSubmitting}
-          className="cursor-pointer"
-          onChange={(e) =>
-            setVisibility(e.target.checked ? 'public' : 'unlisted')
-          }
+        <ShortToggle
+          on={visibility === 'public'}
+          setOn={(on) => setVisibility(on ? 'public' : 'unlisted')}
         />
       </Row>
 
@@ -444,19 +445,17 @@ export function NewContract(props: {
             className={'col-span-4 sm:col-span-2'}
           />
         </Row>
-        <Row>
-          <input
+        <Row className="mt-4 gap-2">
+          <Input
             type={'date'}
-            className="input input-bordered mt-4"
             onClick={(e) => e.stopPropagation()}
             onChange={(e) => setCloseDate(e.target.value)}
             min={Math.round(Date.now() / MINUTE_MS) * MINUTE_MS}
             disabled={isSubmitting}
             value={closeDate}
           />
-          <input
+          <Input
             type={'time'}
-            className="input input-bordered mt-4 ml-2"
             onClick={(e) => e.stopPropagation()}
             onChange={(e) => setCloseHoursMinutes(e.target.value)}
             min={'00:00'}
@@ -507,12 +506,17 @@ export function NewContract(props: {
           {ante > balance && !deservesFreeMarket && (
             <div className="mb-2 mt-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide">
               <span className="mr-2 text-red-500">Insufficient balance</span>
-              <button
-                className="btn btn-xs btn-primary"
-                onClick={() => (window.location.href = '/add-funds')}
+              <Button
+                size="xs"
+                color="green"
+                onClick={() => setFundsModalOpen(true)}
               >
                 Get M$
-              </button>
+              </Button>
+              <AddFundsModal
+                open={fundsModalOpen}
+                setOpen={setFundsModalOpen}
+              />
             </div>
           )}
         </div>
diff --git a/web/pages/daily-movers.tsx b/web/pages/daily-movers.tsx
index 53e37420..f8426d7f 100644
--- a/web/pages/daily-movers.tsx
+++ b/web/pages/daily-movers.tsx
@@ -1,10 +1,12 @@
-import { ProbChangeTable } from 'web/components/contract/prob-change-table'
+import { ProfitChangeTable } from 'web/components/contract/prob-change-table'
 import { Col } from 'web/components/layout/col'
+import { Row } from 'web/components/layout/row'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 import { Page } from 'web/components/page'
 import { Title } from 'web/components/title'
-import { useProbChanges } from 'web/hooks/use-prob-changes'
 import { useTracking } from 'web/hooks/use-tracking'
-import { useUser } from 'web/hooks/use-user'
+import { useUser, useUserContractMetricsByProfit } from 'web/hooks/use-user'
+import { DailyProfit } from './home'
 
 export default function DailyMovers() {
   const user = useUser()
@@ -13,7 +15,10 @@ export default function DailyMovers() {
   return (
     <Page>
       <Col className="pm:mx-10 gap-4 sm:px-4 sm:pb-4">
-        <Title className="mx-4 !mb-0 sm:mx-0" text="Daily movers" />
+        <Row className="mt-4 items-start justify-between sm:mt-0">
+          <Title className="mx-4 !mb-0 !mt-0 sm:mx-0" text="Daily movers" />
+          <DailyProfit user={user} />
+        </Row>
         {user && <ProbChangesWrapper userId={user.id} />}
       </Col>
     </Page>
@@ -23,9 +28,9 @@ export default function DailyMovers() {
 function ProbChangesWrapper(props: { userId: string }) {
   const { userId } = props
 
-  const changes = useProbChanges({ bettorId: userId })?.filter(
-    (c) => Math.abs(c.probChanges.day) >= 0.01
-  )
+  const data = useUserContractMetricsByProfit(userId, 50)
 
-  return <ProbChangeTable changes={changes} full />
+  if (!data) return <LoadingIndicator />
+
+  return <ProfitChangeTable contracts={data.contracts} metrics={data.metrics} />
 }
diff --git a/web/pages/date-docs/[username].tsx b/web/pages/date-docs/[username].tsx
index 350e79b7..6f6eaf5e 100644
--- a/web/pages/date-docs/[username].tsx
+++ b/web/pages/date-docs/[username].tsx
@@ -22,6 +22,7 @@ import { PostCommentsActivity, RichEditPost } from '../post/[...slugs]'
 import { usePost } from 'web/hooks/use-post'
 import { useTipTxns } from 'web/hooks/use-tip-txns'
 import { useCommentsOnPost } from 'web/hooks/use-comments'
+import { NoSEO } from 'web/components/NoSEO'
 
 export async function getStaticProps(props: { params: { username: string } }) {
   const { username } = props.params
@@ -62,6 +63,7 @@ function DateDocPage(props: { creator: User; post: DateDoc }) {
 
   return (
     <Page>
+      <NoSEO />
       <Col className="mx-auto w-full max-w-xl gap-6 sm:mb-6">
         <SiteLink href="/date-docs">
           <Row className="items-center gap-2">
@@ -140,15 +142,17 @@ export function DateDocPost(props: {
       ) : (
         <Content content={content} />
       )}
-      <div className="mt-4 w-full max-w-lg self-center rounded-xl bg-gradient-to-r from-blue-200 via-purple-200 to-indigo-300 p-3">
-        <iframe
-          height="405"
-          src={marketUrl}
-          title=""
-          frameBorder="0"
-          className="w-full rounded-xl bg-white p-10"
-        ></iframe>
-      </div>
+      {contractSlug && (
+        <div className="mt-4 w-full max-w-lg self-center rounded-xl bg-gradient-to-r from-blue-200 via-purple-200 to-indigo-300 p-3">
+          <iframe
+            height="405"
+            src={marketUrl}
+            title=""
+            frameBorder="0"
+            className="w-full rounded-xl bg-white p-10"
+          ></iframe>
+        </div>
+      )}
     </Col>
   )
 }
diff --git a/web/pages/date-docs/create.tsx b/web/pages/date-docs/create.tsx
index 6065796d..639ed51c 100644
--- a/web/pages/date-docs/create.tsx
+++ b/web/pages/date-docs/create.tsx
@@ -1,7 +1,5 @@
 import Router from 'next/router'
 import { useEffect, useState } from 'react'
-import Textarea from 'react-expanding-textarea'
-
 import { DateDoc } from 'common/post'
 import { useTextEditor, TextEditor } from 'web/components/editor'
 import { Page } from 'web/components/page'
@@ -14,6 +12,11 @@ import dayjs from 'dayjs'
 import { MINUTE_MS } from 'common/util/time'
 import { Col } from 'web/components/layout/col'
 import { MAX_QUESTION_LENGTH } from 'common/contract'
+import { NoSEO } from 'web/components/NoSEO'
+import ShortToggle from 'web/components/widgets/short-toggle'
+import { removeUndefinedProps } from 'common/util/object'
+import { Input } from 'web/components/input'
+import { ExpandingInput } from 'web/components/expanding-input'
 
 export default function CreateDateDocPage() {
   const user = useUser()
@@ -23,7 +26,9 @@ export default function CreateDateDocPage() {
   })
 
   const title = `${user?.name}'s Date Doc`
+  const subtitle = 'Manifold dating docs'
   const [birthday, setBirthday] = useState<undefined | string>(undefined)
+  const [createMarket, setCreateMarket] = useState(true)
   const [question, setQuestion] = useState(
     'Will I find a partner in the next 3 months?'
   )
@@ -36,7 +41,11 @@ export default function CreateDateDocPage() {
 
   const birthdayTime = birthday ? dayjs(birthday).valueOf() : undefined
   const isValid =
-    user && birthday && editor && editor.isEmpty === false && question
+    user &&
+    birthday &&
+    editor &&
+    editor.isEmpty === false &&
+    (question || !createMarket)
 
   async function saveDateDoc() {
     if (!user || !editor || !birthdayTime) return
@@ -44,14 +53,15 @@ export default function CreateDateDocPage() {
     const newPost: Omit<
       DateDoc,
       'id' | 'creatorId' | 'createdTime' | 'slug' | 'contractSlug'
-    > & { question: string } = {
+    > & { question?: string } = removeUndefinedProps({
       title,
+      subtitle,
       content: editor.getJSON(),
       bounty: 0,
       birthday: birthdayTime,
       type: 'date-doc',
-      question,
-    }
+      question: createMarket ? question : undefined,
+    })
 
     const result = await createPost(newPost)
 
@@ -62,6 +72,7 @@ export default function CreateDateDocPage() {
 
   return (
     <Page>
+      <NoSEO />
       <div className="mx-auto w-full max-w-3xl">
         <div className="rounded-lg px-6 py-4 pb-4 sm:py-0">
           <Row className="mb-8 items-center justify-between">
@@ -83,9 +94,8 @@ export default function CreateDateDocPage() {
           <Col className="gap-8">
             <Col className="max-w-[160px] justify-start gap-4">
               <div className="">Birthday</div>
-              <input
+              <Input
                 type={'date'}
-                className="input input-bordered"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setBirthday(e.target.value)}
                 max={Math.round(Date.now() / MINUTE_MS) * MINUTE_MS}
@@ -102,16 +112,20 @@ export default function CreateDateDocPage() {
             </Col>
 
             <Col className="gap-4">
-              <div className="">
-                Finally, we'll create an (unlisted) prediction market!
-              </div>
+              <Row className="items-center gap-4">
+                <ShortToggle
+                  on={createMarket}
+                  setOn={(on) => setCreateMarket(on)}
+                />
+                Create an (unlisted) prediction market attached to the date doc
+              </Row>
 
               <Col className="gap-2">
-                <Textarea
-                  className="input input-bordered resize-none"
+                <ExpandingInput
                   maxLength={MAX_QUESTION_LENGTH}
                   value={question}
                   onChange={(e) => setQuestion(e.target.value || '')}
+                  disabled={!createMarket}
                 />
                 <div className="ml-2 text-gray-500">Cost: M$100</div>
               </Col>
diff --git a/web/pages/date-docs/index.tsx b/web/pages/date-docs/index.tsx
index 9ddeb57f..64584c5e 100644
--- a/web/pages/date-docs/index.tsx
+++ b/web/pages/date-docs/index.tsx
@@ -12,6 +12,9 @@ import { Button } from 'web/components/button'
 import { SiteLink } from 'web/components/site-link'
 import { getUser, User } from 'web/lib/firebase/users'
 import { DateDocPost } from './[username]'
+import { NoSEO } from 'web/components/NoSEO'
+import { useDateDocs } from 'web/hooks/use-post'
+import { useTracking } from 'web/hooks/use-tracking'
 
 export async function getStaticProps() {
   const dateDocs = await getDateDocs()
@@ -33,13 +36,16 @@ export default function DatePage(props: {
   dateDocs: DateDoc[]
   docCreators: User[]
 }) {
-  const { dateDocs, docCreators } = props
+  const { docCreators } = props
   const user = useUser()
 
+  const dateDocs = useDateDocs() ?? props.dateDocs
   const hasDoc = dateDocs.some((d) => d.creatorId === user?.id)
+  useTracking('view date docs page')
 
   return (
     <Page>
+      <NoSEO />
       <div className="mx-auto w-full max-w-xl">
         <Row className="items-center justify-between p-4 sm:p-0">
           <Title className="!my-0 px-2 text-blue-500" text="Date docs" />
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index 658f1809..88c05f78 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -42,11 +42,7 @@ import { SelectMarketsModal } from 'web/components/contract-select-modal'
 import { BETTORS } from 'common/user'
 import { Page } from 'web/components/page'
 import { Tabs } from 'web/components/layout/tabs'
-import { Title } from 'web/components/title'
-import { CreatePost } from 'web/components/create-post'
 import { GroupOverview } from 'web/components/groups/group-overview'
-import { CardHighlightOptions } from 'web/components/contract/contracts-grid'
-import { PostCard } from 'web/components/post-card'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -183,16 +179,6 @@ export default function GroupPage(props: {
     </Col>
   )
 
-  const postsPage = (
-    <>
-      <Col>
-        <div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
-          {posts && <GroupPosts posts={groupPosts} group={group} />}
-        </div>
-      </Col>
-    </>
-  )
-
   const overviewPage = (
     <>
       <GroupOverview
@@ -237,6 +223,10 @@ export default function GroupPage(props: {
   )
 
   const tabs = [
+    {
+      title: 'Overview',
+      content: overviewPage,
+    },
     {
       title: 'Markets',
       content: questionsTab,
@@ -245,14 +235,6 @@ export default function GroupPage(props: {
       title: 'Leaderboards',
       content: leaderboardTab,
     },
-    {
-      title: 'Posts',
-      content: postsPage,
-    },
-    {
-      title: 'Overview',
-      content: overviewPage,
-    },
   ]
 
   return (
@@ -263,7 +245,7 @@ export default function GroupPage(props: {
         url={groupPath(group.slug)}
       />
       <TopGroupNavBar group={group} />
-      <div className={'relative p-2 pt-0 md:pt-2'}>
+      <div className={'relative p-1 pt-0 md:pt-2'}>
         {/* TODO: Switching tabs should also update the group path */}
         <Tabs className={'mb-2'} tabs={tabs} defaultIndex={tabIndex} />
       </div>
@@ -336,63 +318,6 @@ function GroupLeaderboard(props: {
   )
 }
 
-export function GroupPosts(props: { posts: Post[]; group: Group }) {
-  const { posts, group } = props
-  const [showCreatePost, setShowCreatePost] = useState(false)
-  const user = useUser()
-
-  const createPost = <CreatePost group={group} />
-
-  const postList = (
-    <div className=" align-start w-full items-start">
-      <Row className="flex justify-between">
-        <Col>
-          <Title text={'Posts'} className="!mt-0" />
-        </Col>
-        <Col>
-          {user && (
-            <Button
-              className="btn-md"
-              onClick={() => setShowCreatePost(!showCreatePost)}
-            >
-              Add a Post
-            </Button>
-          )}
-        </Col>
-      </Row>
-
-      <div className="mt-2">
-        <PostCardList posts={posts} />
-        {posts.length === 0 && (
-          <div className="text-center text-gray-500">No posts yet</div>
-        )}
-      </div>
-    </div>
-  )
-
-  return showCreatePost ? createPost : postList
-}
-
-export function PostCardList(props: {
-  posts: Post[]
-  highlightOptions?: CardHighlightOptions
-  onPostClick?: (post: Post) => void
-}) {
-  const { posts, onPostClick, highlightOptions } = props
-  return (
-    <div className="w-full">
-      {posts.map((post) => (
-        <PostCard
-          key={post.id}
-          post={post}
-          onPostClick={onPostClick}
-          highlightOptions={highlightOptions}
-        />
-      ))}
-    </div>
-  )
-}
-
 function AddContractButton(props: { group: Group; user: User }) {
   const { group, user } = props
   const [open, setOpen] = useState(false)
diff --git a/web/pages/groups.tsx b/web/pages/groups.tsx
index d5c73913..90781da9 100644
--- a/web/pages/groups.tsx
+++ b/web/pages/groups.tsx
@@ -20,6 +20,7 @@ import { SEO } from 'web/components/SEO'
 import { GetServerSideProps } from 'next'
 import { authenticateOnServer } from 'web/lib/firebase/server-auth'
 import { useUser } from 'web/hooks/use-user'
+import { Input } from 'web/components/input'
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const creds = await authenticateOnServer(ctx)
@@ -106,12 +107,12 @@ export default function Groups(props: {
                 title: 'All',
                 content: (
                   <Col>
-                    <input
+                    <Input
                       type="text"
                       onChange={(e) => debouncedQuery(e.target.value)}
                       placeholder="Search groups"
                       value={query}
-                      className="input input-bordered mb-4 w-full"
+                      className="mb-4 w-full"
                     />
 
                     <div className="flex flex-wrap justify-center gap-4">
@@ -134,12 +135,12 @@ export default function Groups(props: {
                       title: 'My Groups',
                       content: (
                         <Col>
-                          <input
+                          <Input
                             type="text"
                             value={query}
                             onChange={(e) => debouncedQuery(e.target.value)}
                             placeholder="Search your groups"
-                            className="input input-bordered mb-4 w-full"
+                            className="mb-4 w-full"
                           />
 
                           <div className="flex flex-wrap justify-center gap-4">
diff --git a/web/pages/home/index.tsx b/web/pages/home/index.tsx
index b00d3f2f..7844b1d5 100644
--- a/web/pages/home/index.tsx
+++ b/web/pages/home/index.tsx
@@ -19,20 +19,22 @@ import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { Sort } from 'web/components/contract-search'
 import { Group } from 'common/group'
 import { SiteLink } from 'web/components/site-link'
-import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import {
-  useMemberGroupIds,
+  usePrivateUser,
+  useUser,
+  useUserContractMetricsByProfit,
+} from 'web/hooks/use-user'
+import {
   useMemberGroupsSubscription,
   useTrendingGroups,
 } from 'web/hooks/use-group'
 import { Button } from 'web/components/button'
 import { Row } from 'web/components/layout/row'
-import { ProbChangeTable } from 'web/components/contract/prob-change-table'
+import { ProfitChangeTable } from 'web/components/contract/prob-change-table'
 import { groupPath, joinGroup, leaveGroup } from 'web/lib/firebase/groups'
 import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
 import { formatMoney } from 'common/util/format'
-import { useProbChanges } from 'web/hooks/use-prob-changes'
-import { calculatePortfolioProfit } from 'common/calculate-metrics'
+import { ContractMetrics } from 'common/calculate-metrics'
 import { hasCompletedStreakToday } from 'web/components/profile/betting-streak-modal'
 import { ContractsGrid } from 'web/components/contract/contracts-grid'
 import { PillButton } from 'web/components/buttons/pill-button'
@@ -49,6 +51,7 @@ import {
 } from 'web/hooks/use-contracts'
 import { ProfitBadge } from 'web/components/profit-badge'
 import { LoadingIndicator } from 'web/components/loading-indicator'
+import { Input } from 'web/components/input'
 
 export default function Home() {
   const user = useUser()
@@ -74,19 +77,24 @@ export default function Home() {
     }
   }, [user, sections])
 
-  const dailyMovers = useProbChanges({ bettorId: user?.id })
+  const contractMetricsByProfit = useUserContractMetricsByProfit(
+    user?.id ?? '_',
+    3
+  )
+
   const trendingContracts = useTrendingContracts(6)
   const newContracts = useNewContracts(6)
   const dailyTrendingContracts = useContractsByDailyScoreNotBetOn(user?.id, 6)
 
   const groups = useMemberGroupsSubscription(user)
+  const trendingGroups = useTrendingGroups()
   const groupContracts = useContractsByDailyScoreGroups(
     groups?.map((g) => g.slug)
   )
 
   const isLoading =
     !user ||
-    !dailyMovers ||
+    !contractMetricsByProfit ||
     !trendingContracts ||
     !newContracts ||
     !dailyTrendingContracts
@@ -99,10 +107,10 @@ export default function Home() {
         <Row
           className={'mb-2 w-full items-center justify-between gap-4 sm:gap-8'}
         >
-          <input
+          <Input
             type="text"
             placeholder={'Search'}
-            className="input input-bordered w-full"
+            className="w-full"
             onClick={() => Router.push('/search')}
           />
           <CustomizeButton justIcon />
@@ -113,16 +121,26 @@ export default function Home() {
           <LoadingIndicator />
         ) : (
           <>
-            {renderSections(user, sections, {
+            {renderSections(sections, {
               score: trendingContracts,
               newest: newContracts,
               'daily-trending': dailyTrendingContracts,
-              'daily-movers': dailyMovers,
+              'daily-movers': contractMetricsByProfit,
             })}
 
-            <TrendingGroupsSection user={user} />
-
-            {renderGroupSections(user, groups, groupContracts)}
+            {groups && groupContracts && trendingGroups.length > 0 ? (
+              <>
+                <TrendingGroupsSection
+                  className="mb-4"
+                  user={user}
+                  myGroups={groups}
+                  trendingGroups={trendingGroups}
+                />
+                {renderGroupSections(user, groups, groupContracts)}
+              </>
+            ) : (
+              <LoadingIndicator />
+            )}
           </>
         )}
       </Col>
@@ -171,10 +189,12 @@ export const getHomeItems = (sections: string[]) => {
 }
 
 function renderSections(
-  user: User,
   sections: { id: string; label: string }[],
   sectionContracts: {
-    'daily-movers': CPMMBinaryContract[]
+    'daily-movers': {
+      contracts: CPMMBinaryContract[]
+      metrics: ContractMetrics[]
+    }
     'daily-trending': CPMMBinaryContract[]
     newest: CPMMBinaryContract[]
     score: CPMMBinaryContract[]
@@ -183,16 +203,19 @@ function renderSections(
   return (
     <>
       {sections.map((s) => {
-        const { id, label } = s
-        const contracts =
-          sectionContracts[s.id as keyof typeof sectionContracts]
-
-        if (id === 'daily-movers') {
-          return <DailyMoversSection key={id} contracts={contracts} />
+        const { id, label } = s as {
+          id: keyof typeof sectionContracts
+          label: string
         }
+        if (id === 'daily-movers') {
+          return <DailyMoversSection key={id} {...sectionContracts[id]} />
+        }
+
+        const contracts = sectionContracts[id]
+
         if (id === 'daily-trending') {
           return (
-            <ContractsSection
+            <SearchSection
               key={id}
               label={label}
               contracts={contracts}
@@ -202,11 +225,11 @@ function renderSections(
           )
         }
         return (
-          <ContractsSection
+          <SearchSection
             key={id}
             label={label}
             contracts={contracts}
-            sort={id === 'daily-trending' ? 'daily-score' : (id as Sort)}
+            sort={id as Sort}
           />
         )
       })}
@@ -216,13 +239,9 @@ function renderSections(
 
 function renderGroupSections(
   user: User,
-  groups: Group[] | undefined,
-  groupContracts: Dictionary<CPMMBinaryContract[]> | undefined
+  groups: Group[],
+  groupContracts: Dictionary<CPMMBinaryContract[]>
 ) {
-  if (!groups || !groupContracts) {
-    return <LoadingIndicator />
-  }
-
   const filteredGroups = groups.filter((g) => groupContracts[g.slug])
   const orderedGroups = sortBy(filteredGroups, (g) =>
     // Sort by sum of top two daily scores.
@@ -233,14 +252,20 @@ function renderGroupSections(
     )
   ).reverse()
 
+  const previouslySeenContracts = new Set<string>()
+
   return (
     <>
       {orderedGroups.map((group) => {
         const contracts = groupContracts[group.slug].filter(
-          (c) => Math.abs(c.probChanges.day) >= 0.01
+          (c) =>
+            Math.abs(c.probChanges.day) >= 0.01 &&
+            !previouslySeenContracts.has(c.id)
         )
         if (contracts.length === 0) return null
 
+        contracts.forEach((c) => previouslySeenContracts.add(c.id))
+
         return (
           <GroupSection
             key={group.id}
@@ -279,7 +304,7 @@ function SectionHeader(props: {
   )
 }
 
-function ContractsSection(props: {
+function SearchSection(props: {
   label: string
   contracts: CPMMBinaryContract[]
   sort: Sort
@@ -335,58 +360,39 @@ function GroupSection(props: {
   )
 }
 
-function DailyMoversSection(props: { contracts: CPMMBinaryContract[] }) {
-  const { contracts } = props
+function DailyMoversSection(props: {
+  contracts: CPMMBinaryContract[]
+  metrics: ContractMetrics[]
+}) {
+  const { contracts, metrics } = props
 
-  const changes = contracts.filter((c) => Math.abs(c.probChanges.day) >= 0.01)
-
-  if (changes.length === 0) {
+  if (contracts.length === 0) {
     return null
   }
 
   return (
     <Col className="gap-2">
       <SectionHeader label="Daily movers" href="/daily-movers" />
-      <ProbChangeTable changes={changes} />
+      <ProfitChangeTable contracts={contracts} metrics={metrics} />
     </Col>
   )
 }
 
-function DailyStats(props: {
-  user: User | null | undefined
-  className?: string
-}) {
-  const { user, className } = props
-
-  const metrics = usePortfolioHistory(user?.id ?? '', 'daily') ?? []
-  const [first, last] = [metrics[0], metrics[metrics.length - 1]]
+function DailyStats(props: { user: User | null | undefined }) {
+  const { user } = props
 
   const privateUser = usePrivateUser()
   const streaks = privateUser?.notificationPreferences?.betting_streaks ?? []
   const streaksHidden = streaks.length === 0
 
-  let profit = 0
-  let profitPercent = 0
-  if (first && last) {
-    profit = calculatePortfolioProfit(last) - calculatePortfolioProfit(first)
-    profitPercent = profit / first.investmentValue
-  }
-
   return (
     <Row className={'flex-shrink-0 gap-4'}>
-      <Col>
-        <div className="text-gray-500">Daily profit</div>
-        <Row className={clsx(className, 'items-center text-lg')}>
-          <span>{formatMoney(profit)}</span>{' '}
-          <ProfitBadge profitPercent={profitPercent * 100} />
-        </Row>
-      </Col>
+      <DailyProfit user={user} />
       {!streaksHidden && (
         <Col>
           <div className="text-gray-500">Streak</div>
           <Row
             className={clsx(
-              className,
               'items-center text-lg',
               user && !hasCompletedStreakToday(user) && 'grayscale'
             )}
@@ -399,17 +405,51 @@ function DailyStats(props: {
   )
 }
 
+export function DailyProfit(props: { user: User | null | undefined }) {
+  const { user } = props
+
+  const contractMetricsByProfit = useUserContractMetricsByProfit(
+    user?.id ?? '_',
+    100
+  )
+  const profit = sum(
+    contractMetricsByProfit?.metrics.map((m) =>
+      m.from ? m.from.day.profit : 0
+    ) ?? []
+  )
+
+  const metrics = usePortfolioHistory(user?.id ?? '', 'daily') ?? []
+  const [first, last] = [metrics[0], metrics[metrics.length - 1]]
+
+  let profitPercent = 0
+  if (first && last) {
+    // profit = calculatePortfolioProfit(last) - calculatePortfolioProfit(first)
+    profitPercent = profit / first.investmentValue
+  }
+
+  return (
+    <SiteLink className="flex flex-col" href="/daily-movers">
+      <div className="text-gray-500">Daily profit</div>
+      <Row className="items-center text-lg">
+        <span>{formatMoney(profit)}</span>{' '}
+        <ProfitBadge profitPercent={profitPercent * 100} />
+      </Row>
+    </SiteLink>
+  )
+}
+
 export function TrendingGroupsSection(props: {
-  user: User | null | undefined
+  user: User
+  myGroups: Group[]
+  trendingGroups: Group[]
   className?: string
 }) {
-  const { user, className } = props
-  const memberGroupIds = useMemberGroupIds(user) || []
+  const { user, myGroups, trendingGroups, className } = props
 
-  const groups = useTrendingGroups().filter(
-    (g) => !memberGroupIds.includes(g.id)
-  )
-  const count = 7
+  const myGroupIds = new Set(myGroups.map((g) => g.id))
+
+  const groups = trendingGroups.filter((g) => !myGroupIds.has(g.id))
+  const count = 20
   const chosenGroups = groups.slice(0, count)
 
   if (chosenGroups.length === 0) {
@@ -419,15 +459,17 @@ export function TrendingGroupsSection(props: {
   return (
     <Col className={className}>
       <SectionHeader label="Trending groups" href="/explore-groups" />
+      <div className="mb-4 text-gray-500">
+        Follow groups you are interested in.
+      </div>
       <Row className="flex-wrap gap-2">
         {chosenGroups.map((g) => (
           <PillButton
             className="flex flex-row items-center gap-1"
             key={g.id}
-            selected={memberGroupIds.includes(g.id)}
+            selected={myGroupIds.has(g.id)}
             onSelect={() => {
-              if (!user) return
-              if (memberGroupIds.includes(g.id)) leaveGroup(g, user?.id)
+              if (myGroupIds.has(g.id)) leaveGroup(g, user.id)
               else {
                 const homeSections = (user.homeSections ?? [])
                   .filter((id) => id !== g.id)
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index 4013f57a..91572a16 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,3 +1,6 @@
+import { useEffect } from 'react'
+import Router from 'next/router'
+
 import { Contract, getTrendingContracts } from 'web/lib/firebase/contracts'
 import { Page } from 'web/components/page'
 import { LandingPagePanel } from 'web/components/landing-page-panel'
@@ -6,6 +9,7 @@ import { ManifoldLogo } from 'web/components/nav/manifold-logo'
 import { redirectIfLoggedIn } from 'web/lib/firebase/server-auth'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { SEO } from 'web/components/SEO'
+import { useUser } from 'web/hooks/use-user'
 
 export const getServerSideProps = redirectIfLoggedIn('/home', async (_) => {
   const hotContracts = await getTrendingContracts()
@@ -16,6 +20,7 @@ export default function Home(props: { hotContracts: Contract[] }) {
   const { hotContracts } = props
 
   useSaveReferral()
+  useRedirectAfterLogin()
 
   return (
     <Page>
@@ -35,3 +40,13 @@ export default function Home(props: { hotContracts: Contract[] }) {
     </Page>
   )
 }
+
+const useRedirectAfterLogin = () => {
+  const user = useUser()
+
+  useEffect(() => {
+    if (user) {
+      Router.replace('/home')
+    }
+  }, [user])
+}
diff --git a/web/pages/labs/index.tsx b/web/pages/labs/index.tsx
index 79f44a64..bbb14365 100644
--- a/web/pages/labs/index.tsx
+++ b/web/pages/labs/index.tsx
@@ -44,8 +44,8 @@ export default function LabsPage() {
           />
 
           <LabCard
-            title="💌 Dating docs"
-            description="Browse dating docs or create your own"
+            title="💌 Dating"
+            description="Browse dating profiles and bet on relationships"
             href="/date-docs"
           />
 
diff --git a/web/pages/midterms.tsx b/web/pages/midterms.tsx
index d1dfb509..d9566a13 100644
--- a/web/pages/midterms.tsx
+++ b/web/pages/midterms.tsx
@@ -1,11 +1,15 @@
+import { CPMMBinaryContract } from 'common/contract'
 import { Col } from 'web/components/layout/col'
 import { Spacer } from 'web/components/layout/spacer'
 import { Page } from 'web/components/page'
+import { SEO } from 'web/components/SEO'
 import { Title } from 'web/components/title'
 import {
   StateElectionMarket,
   StateElectionMap,
 } from 'web/components/usa-map/state-election-map'
+import { useTracking } from 'web/hooks/use-tracking'
+import { getContractFromSlug } from 'web/lib/firebase/contracts'
 
 const senateMidterms: StateElectionMarket[] = [
   {
@@ -175,76 +179,96 @@ const governorMidterms: StateElectionMarket[] = [
   },
 ]
 
-const App = () => {
+export async function getStaticProps() {
+  const senateContracts = await Promise.all(
+    senateMidterms.map((m) =>
+      getContractFromSlug(m.slug).then((c) => c ?? null)
+    )
+  )
+
+  const governorContracts = await Promise.all(
+    governorMidterms.map((m) =>
+      getContractFromSlug(m.slug).then((c) => c ?? null)
+    )
+  )
+
+  return {
+    props: { senateContracts, governorContracts },
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+const App = (props: {
+  senateContracts: CPMMBinaryContract[]
+  governorContracts: CPMMBinaryContract[]
+}) => {
+  const { senateContracts, governorContracts } = props
+
+  useTracking('view midterms 2022')
+
   return (
     <Page className="">
       <Col className="items-center justify-center">
         <Title text="2022 US Midterm Elections" className="mt-2" />
+        <SEO
+          title="2022 US Midterm Elections"
+          description="Bet on the midterm elections using prediction markets. See Manifold's state-by-state breakdown of senate and governor races."
+        />
         <div className="mt-2 text-2xl">Senate</div>
-        <StateElectionMap markets={senateMidterms} />
+        <StateElectionMap
+          markets={senateMidterms}
+          contracts={senateContracts}
+        />
         <iframe
           src="https://manifold.markets/TomShlomi/will-the-gop-control-the-us-senate"
-          title="Will the Democrats control the Senate after the Midterms?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <Spacer h={8} />
+
         <div className="mt-8 text-2xl">Governors</div>
-        <StateElectionMap markets={governorMidterms} />
+        <StateElectionMap
+          markets={governorMidterms}
+          contracts={governorContracts}
+        />
         <iframe
           src="https://manifold.markets/ManifoldMarkets/democrats-go-down-at-least-one-gove"
-          title="Democrats go down at least one governor on net in 2022"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <Spacer h={8} />
+
         <div className="mt-8 text-2xl">House</div>
         <iframe
           src="https://manifold.markets/BoltonBailey/will-democrats-maintain-control-of"
-          title="Will the Democrats control the House after the Midterms?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <Spacer h={8} />
+
         <div className="mt-8 text-2xl">Related markets</div>
         <iframe
           src="https://manifold.markets/BoltonBailey/balance-of-power-in-us-congress-aft"
-          title="Balance of Power in US Congress after 2022 Midterms"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <iframe
           src="https://manifold.markets/SG/will-a-democrat-win-the-2024-us-pre"
-          title="Will a Democrat win the 2024 US presidential election?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
         <iframe
           src="https://manifold.markets/Ibozz91/will-the-2022-alaska-house-general"
           title="Will the 2022 Alaska House General Nonspecial Election result in a Condorcet failure?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
 
         <iframe
           src="https://manifold.markets/NathanpmYoung/how-many-supreme-court-justices-wil-1e597c3853ad"
           title="Will the 2022 Alaska House General Nonspecial Election result in a Condorcet failure?"
           frameBorder="0"
-          width={800}
-          height={400}
-          className="mt-8"
+          className="mt-8 flex h-96 w-full"
         ></iframe>
       </Col>
     </Page>
diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx
index 4f9700dd..7388986a 100644
--- a/web/pages/notifications.tsx
+++ b/web/pages/notifications.tsx
@@ -13,11 +13,7 @@ import { Page } from 'web/components/page'
 import { Title } from 'web/components/title'
 import { doc, updateDoc } from 'firebase/firestore'
 import { db } from 'web/lib/firebase/init'
-import {
-  MANIFOLD_AVATAR_URL,
-  MANIFOLD_USERNAME,
-  PrivateUser,
-} from 'common/user'
+import { MANIFOLD_AVATAR_URL, PAST_BETS, PrivateUser } from 'common/user'
 import clsx from 'clsx'
 import { RelativeTimestamp } from 'web/components/relative-timestamp'
 import { Linkify } from 'web/components/linkify'
@@ -38,6 +34,7 @@ import { formatMoney } from 'common/util/format'
 import { groupPath } from 'web/lib/firebase/groups'
 import {
   BETTING_STREAK_BONUS_AMOUNT,
+  BETTING_STREAK_BONUS_MAX,
   UNIQUE_BETTOR_BONUS_AMOUNT,
 } from 'common/economy'
 import { groupBy, sum, uniqBy } from 'lodash'
@@ -440,7 +437,8 @@ function IncomeNotificationItem(props: {
     } else if (sourceType === 'tip') {
       reasonText = !simple ? `tipped you on` : `in tips on`
     } else if (sourceType === 'betting_streak_bonus') {
-      if (sourceText && +sourceText === 50) reasonText = '(max) for your'
+      if (sourceText && +sourceText === BETTING_STREAK_BONUS_MAX)
+        reasonText = '(max) for your'
       else reasonText = 'for your'
     } else if (sourceType === 'loan' && sourceText) {
       reasonText = `of your invested predictions returned as a`
@@ -467,8 +465,11 @@ function IncomeNotificationItem(props: {
           simple ? (
             <span className={'ml-1 font-bold'}>🏦 Loan</span>
           ) : (
-            <SiteLink className={'ml-1 font-bold'} href={'/loans'}>
-              🏦 Loan
+            <SiteLink
+              className={'relative ml-1 font-bold'}
+              href={`/${sourceUserUsername}/?show=loans`}
+            >
+              🏦 Loan <span className="font-normal">(learn more)</span>
             </SiteLink>
           )
         ) : sourceType === 'betting_streak_bonus' ? (
@@ -476,8 +477,8 @@ function IncomeNotificationItem(props: {
             <span className={'ml-1 font-bold'}>{bettingStreakText}</span>
           ) : (
             <SiteLink
-              className={'ml-1 font-bold'}
-              href={'/betting-streak-bonus'}
+              className={'relative ml-1 font-bold'}
+              href={`/${sourceUserUsername}/?show=betting-streak`}
             >
               {bettingStreakText}
             </SiteLink>
@@ -734,6 +735,24 @@ function NotificationItem(props: {
         justSummary={justSummary}
       />
     )
+  } else if (sourceType === 'badge') {
+    return (
+      <BadgeNotification
+        notification={notification}
+        isChildOfGroup={isChildOfGroup}
+        highlighted={highlighted}
+        justSummary={justSummary}
+      />
+    )
+  } else if (sourceType === 'contract' && sourceUpdateType === 'closed') {
+    return (
+      <MarketClosedNotification
+        notification={notification}
+        isChildOfGroup={isChildOfGroup}
+        highlighted={highlighted}
+        justSummary={justSummary}
+      />
+    )
   }
   // TODO Add new notification components here
 
@@ -765,6 +784,7 @@ function NotificationItem(props: {
         isChildOfGroup ?? false
       )}
       highlighted={highlighted}
+      isChildOfGroup={isChildOfGroup}
     >
       <div className={'mt-1 ml-1 md:text-base'}>
         <NotificationTextLabel notification={notification} />
@@ -806,9 +826,18 @@ function NotificationFrame(props: {
   subtitle: string
   children: React.ReactNode
   isChildOfGroup?: boolean
+  hideUserName?: boolean
+  hideLinkToGroupOrQuestion?: boolean
 }) {
-  const { notification, isChildOfGroup, highlighted, subtitle, children } =
-    props
+  const {
+    notification,
+    isChildOfGroup,
+    highlighted,
+    subtitle,
+    children,
+    hideUserName,
+    hideLinkToGroupOrQuestion,
+  } = props
   const {
     sourceType,
     sourceUserName,
@@ -819,7 +848,7 @@ function NotificationFrame(props: {
     sourceUserUsername,
     sourceText,
   } = notification
-  const questionNeedsResolution = sourceUpdateType == 'closed'
+
   const { width } = useWindowSize()
   const isMobile = (width ?? 0) < 600
   return (
@@ -849,16 +878,10 @@ function NotificationFrame(props: {
         />
         <Row className={'items-center text-gray-500 sm:justify-start'}>
           <Avatar
-            avatarUrl={
-              questionNeedsResolution
-                ? MANIFOLD_AVATAR_URL
-                : sourceUserAvatarUrl
-            }
+            avatarUrl={sourceUserAvatarUrl}
             size={'sm'}
             className={'z-10 mr-2'}
-            username={
-              questionNeedsResolution ? MANIFOLD_USERNAME : sourceUserUsername
-            }
+            username={sourceUserUsername}
           />
           <div className={'flex w-full flex-row pl-1 sm:pl-0'}>
             <div
@@ -867,17 +890,21 @@ function NotificationFrame(props: {
               }
             >
               <div>
-                <UserLink
-                  name={sourceUserName || ''}
-                  username={sourceUserUsername || ''}
-                  className={'relative mr-1 flex-shrink-0'}
-                  short={isMobile}
-                />
+                {!hideUserName && (
+                  <UserLink
+                    name={sourceUserName || ''}
+                    username={sourceUserUsername || ''}
+                    className={'relative mr-1 flex-shrink-0'}
+                    short={isMobile}
+                  />
+                )}
                 {subtitle}
                 {isChildOfGroup ? (
                   <RelativeTimestamp time={notification.createdTime} />
                 ) : (
-                  <QuestionOrGroupLink notification={notification} />
+                  !hideLinkToGroupOrQuestion && (
+                    <QuestionOrGroupLink notification={notification} />
+                  )
                 )}
               </div>
             </div>
@@ -961,6 +988,67 @@ function BetFillNotification(props: {
   )
 }
 
+function MarketClosedNotification(props: {
+  notification: Notification
+  highlighted: boolean
+  justSummary: boolean
+  isChildOfGroup?: boolean
+}) {
+  const { notification, isChildOfGroup, highlighted } = props
+  notification.sourceUserAvatarUrl = MANIFOLD_AVATAR_URL
+  return (
+    <NotificationFrame
+      notification={notification}
+      isChildOfGroup={isChildOfGroup}
+      highlighted={highlighted}
+      subtitle={'Please resolve'}
+      hideUserName={true}
+    >
+      <Row>
+        <span>
+          {`Your market has closed. Please resolve it to pay out ${PAST_BETS}.`}
+        </span>
+      </Row>
+    </NotificationFrame>
+  )
+}
+
+function BadgeNotification(props: {
+  notification: Notification
+  highlighted: boolean
+  justSummary: boolean
+  isChildOfGroup?: boolean
+}) {
+  const { notification, isChildOfGroup, highlighted, justSummary } = props
+  const { sourceText } = notification
+  const subtitle = 'You earned a new badge!'
+  notification.sourceUserAvatarUrl = '/award.svg'
+  if (justSummary) {
+    return (
+      <NotificationSummaryFrame notification={notification} subtitle={subtitle}>
+        <Row className={'line-clamp-1'}>
+          <span>{sourceText} 🎉</span>
+        </Row>
+      </NotificationSummaryFrame>
+    )
+  }
+
+  return (
+    <NotificationFrame
+      notification={notification}
+      isChildOfGroup={isChildOfGroup}
+      highlighted={highlighted}
+      subtitle={subtitle}
+      hideUserName={true}
+      hideLinkToGroupOrQuestion={true}
+    >
+      <Row>
+        <span>{sourceText} 🎉</span>
+      </Row>
+    </NotificationFrame>
+  )
+}
+
 function ContractResolvedNotification(props: {
   notification: Notification
   highlighted: boolean
@@ -1131,6 +1219,11 @@ function getSourceUrl(notification: Notification) {
       sourceId ?? '',
       sourceType
     )}`
+  else if (sourceSlug)
+    return `/${sourceSlug}#${getSourceIdForLinkComponent(
+      sourceId ?? '',
+      sourceType
+    )}`
 }
 
 function getSourceIdForLinkComponent(
@@ -1230,7 +1323,6 @@ function getReasonForShowingNotification(
           reasonText = justSummary ? 'asked the question' : 'asked'
         else if (sourceUpdateType === 'resolved')
           reasonText = justSummary ? `resolved the question` : `resolved`
-        else if (sourceUpdateType === 'closed') reasonText = `Please resolve`
         else reasonText = justSummary ? 'updated the question' : `updated`
         break
       case 'answer':
diff --git a/web/pages/post/[...slugs]/index.tsx b/web/pages/post/[...slugs]/index.tsx
index 537afc1e..beaff445 100644
--- a/web/pages/post/[...slugs]/index.tsx
+++ b/web/pages/post/[...slugs]/index.tsx
@@ -25,6 +25,7 @@ import { useCommentsOnPost } from 'web/hooks/use-comments'
 import { useUser } from 'web/hooks/use-user'
 import { usePost } from 'web/hooks/use-post'
 import { SEO } from 'web/components/SEO'
+import { Subtitle } from 'web/components/subtitle'
 
 export async function getStaticProps(props: { params: { slugs: string[] } }) {
   const { slugs } = props.params
@@ -75,7 +76,11 @@ export default function PostPage(props: {
         url={'/post/' + post.slug}
       />
       <div className="mx-auto w-full max-w-3xl ">
-        <Title className="!mt-0 py-4 px-2" text={post.title} />
+        <div>
+          <Title className="!my-0 px-2 pt-4" text={post.title} />
+          <br />
+          <Subtitle className="!mt-2 px-2 pb-4" text={post.subtitle} />
+        </div>
         <Row>
           <Col className="flex-1 px-2">
             <div className={'inline-flex'}>
@@ -202,25 +207,20 @@ export function RichEditPost(props: { post: Post }) {
       </Row>
     </>
   ) : (
-    <>
-      <div className="relative">
-        <div className="absolute top-0 right-0 z-10 space-x-2">
-          <Button
-            color="gray"
-            size="xs"
-            onClick={() => {
-              setEditing(true)
-              editor?.commands.focus('end')
-            }}
-          >
-            <PencilIcon className="inline h-4 w-4" />
-            Edit
-          </Button>
-        </div>
-
-        <Content content={post.content} />
-        <Spacer h={2} />
-      </div>
-    </>
+    <Col>
+      <Content content={post.content} />
+      <Row className="place-content-end">
+        <Button
+          color="gray-white"
+          size="xs"
+          onClick={() => {
+            setEditing(true)
+            editor?.commands.focus('end')
+          }}
+        >
+          <PencilIcon className="inline h-4 w-4" />
+        </Button>
+      </Row>
+    </Col>
   )
 }
diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx
index 5773f30f..c3d4335c 100644
--- a/web/pages/profile.tsx
+++ b/web/pages/profile.tsx
@@ -1,12 +1,11 @@
 import { RefreshIcon } from '@heroicons/react/outline'
 import { PrivateUser, User } from 'common/user'
 import { cleanDisplayName, cleanUsername } from 'common/util/clean-username'
-import { formatMoney } from 'common/util/format'
 import Link from 'next/link'
 import React, { useState } from 'react'
-import Textarea from 'react-expanding-textarea'
-import { AddFundsButton } from 'web/components/add-funds-button'
 import { ConfirmationButton } from 'web/components/confirmation-button'
+import { ExpandingInput } from 'web/components/expanding-input'
+import { Input } from 'web/components/input'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Page } from 'web/components/page'
@@ -29,7 +28,7 @@ export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
 
 function EditUserField(props: {
   user: User
-  field: 'bio' | 'website' | 'bannerUrl' | 'twitterHandle' | 'discordHandle'
+  field: 'bio' | 'website' | 'twitterHandle' | 'discordHandle'
   label: string
 }) {
   const { user, field, label } = props
@@ -45,16 +44,15 @@ function EditUserField(props: {
       <label className="label">{label}</label>
 
       {field === 'bio' ? (
-        <Textarea
-          className="textarea textarea-bordered w-full resize-none"
+        <ExpandingInput
+          className="w-full"
           value={value}
           onChange={(e) => setValue(e.target.value)}
           onBlur={updateField}
         />
       ) : (
-        <input
+        <Input
           type="text"
-          className="input input-bordered"
           value={value}
           onChange={(e) => setValue(e.target.value || '')}
           onBlur={updateField}
@@ -154,10 +152,9 @@ export default function ProfilePage(props: {
 
           <div>
             <label className="label">Display name</label>
-            <input
+            <Input
               type="text"
               placeholder="Display name"
-              className="input input-bordered"
               value={name}
               onChange={(e) => setName(e.target.value || '')}
               onBlur={updateDisplayName}
@@ -166,10 +163,9 @@ export default function ProfilePage(props: {
 
           <div>
             <label className="label">Username</label>
-            <input
+            <Input
               type="text"
               placeholder="Username"
-              className="input input-bordered"
               value={username}
               onChange={(e) => setUsername(e.target.value || '')}
               onBlur={updateUsername}
@@ -198,21 +194,12 @@ export default function ProfilePage(props: {
             </div>
           </div>
 
-          <div>
-            <label className="label">Balance</label>
-            <Row className="ml-1 items-start gap-4 text-gray-500">
-              {formatMoney(user.balance)}
-              <AddFundsButton />
-            </Row>
-          </div>
-
           <div>
             <label className="label">API key</label>
             <div className="input-group w-full">
-              <input
+              <Input
                 type="text"
                 placeholder="Click refresh to generate key"
-                className="input input-bordered w-full"
                 value={apiKey}
                 readOnly
               />
@@ -225,7 +212,6 @@ export default function ProfilePage(props: {
                 }}
                 submitBtn={{
                   label: 'Update key',
-                  className: 'btn-primary',
                 }}
                 onSubmitWithSuccess={async () => {
                   updateApiKey()
diff --git a/web/pages/referrals.tsx b/web/pages/referrals.tsx
index 2e330980..46b7b7b0 100644
--- a/web/pages/referrals.tsx
+++ b/web/pages/referrals.tsx
@@ -10,6 +10,7 @@ import { ENV_CONFIG } from 'common/envs/constants'
 import { InfoBox } from 'web/components/info-box'
 import { QRCode } from 'web/components/qr-code'
 import { REFERRAL_AMOUNT } from 'common/economy'
+import { formatMoney } from 'common/util/format'
 
 export const getServerSideProps = redirectIfLoggedOut('/')
 
@@ -23,15 +24,17 @@ export default function ReferralsPage() {
   return (
     <Page>
       <SEO
-        title="Referrals"
-        description={`Manifold's referral program. Invite new users to Manifold and get M${REFERRAL_AMOUNT} if they
+        title="Refer a friend"
+        description={`Invite new users to Manifold and get ${formatMoney(
+          REFERRAL_AMOUNT
+        )} if they
             sign up!`}
         url="/referrals"
       />
 
       <Col className="items-center">
         <Col className="h-full rounded bg-white p-4 py-8 sm:p-8 sm:shadow-md">
-          <Title className="!mt-0" text="Referrals" />
+          <Title className="!mt-0" text="Refer a friend" />
           <img
             className="mb-6 block -scale-x-100 self-center"
             src="/logo-flapping-with-money.gif"
@@ -40,8 +43,8 @@ export default function ReferralsPage() {
           />
 
           <div className={'mb-4'}>
-            Invite new users to Manifold and get M${REFERRAL_AMOUNT} if they
-            sign up!
+            Invite new users to Manifold and get {formatMoney(REFERRAL_AMOUNT)}{' '}
+            if they sign up!
           </div>
 
           <CopyLinkButton
diff --git a/web/pages/server-sitemap.xml.tsx b/web/pages/server-sitemap.xml.tsx
index 15cb734c..a43236ce 100644
--- a/web/pages/server-sitemap.xml.tsx
+++ b/web/pages/server-sitemap.xml.tsx
@@ -4,7 +4,7 @@ import { getServerSideSitemap, ISitemapField } from 'next-sitemap'
 import { listAllContracts } from 'web/lib/firebase/contracts'
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const contracts = await listAllContracts(1000, undefined, 'popularityScore')
+  const contracts = await listAllContracts(5000, undefined, 'popularityScore')
 
   const score = (popularity: number) => Math.tanh(Math.log10(popularity + 1))
 
@@ -14,7 +14,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
       loc: `https://manifold.markets/${market.creatorUsername}/${market.slug}`,
       changefreq: market.volume24Hours > 10 ? 'hourly' : 'daily',
       priority: score(market.popularityScore ?? 0),
-      lastmod: market.lastUpdatedTime,
+      lastmod: new Date(market.lastUpdatedTime ?? 0).toISOString(),
     })) as ISitemapField[]
 
   return await getServerSideSitemap(ctx, fields)
diff --git a/web/pages/stats.tsx b/web/pages/stats.tsx
index 125af4bd..e2a9b279 100644
--- a/web/pages/stats.tsx
+++ b/web/pages/stats.tsx
@@ -103,7 +103,7 @@ export function CustomAnalytics(props: Stats) {
             title: 'Daily (7d avg)',
             content: (
               <DailyChart
-                dailyValues={dailyActiveUsersWeeklyAvg}
+                dailyValues={dailyActiveUsersWeeklyAvg.map(Math.round)}
                 startDate={startDate}
               />
             ),
diff --git a/web/pages/tournaments/index.tsx b/web/pages/tournaments/index.tsx
index 0b9dbc80..798c700d 100644
--- a/web/pages/tournaments/index.tsx
+++ b/web/pages/tournaments/index.tsx
@@ -24,6 +24,7 @@ import { SiteLink } from 'web/components/site-link'
 import { Carousel } from 'web/components/carousel'
 import { usePagination } from 'web/hooks/use-pagination'
 import { LoadingIndicator } from 'web/components/loading-indicator'
+import { Title } from 'web/components/title'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -48,7 +49,7 @@ const Salem = {
   title: 'CSPI/Salem Forecasting Tournament',
   blurb: 'Top 5 traders qualify for a UT Austin research fellowship.',
   url: 'https://salemcenter.manifold.markets/',
-  award: '$25,000',
+  award: 'US$25,000',
   endTime: toDate('Jul 31, 2023'),
   contractIds: [],
   images: [
@@ -77,35 +78,44 @@ const Salem = {
 
 const tourneys: Tourney[] = [
   {
-    title: 'Clearer Thinking Regrant Project',
-    blurb: 'Which projects will Clearer Thinking give a grant to?',
-    award: '$13,000',
-    endTime: toDate('Sep 30, 2022'),
-    groupId: 'fhksfIgqyWf7OxsV9nkM',
+    title: 'CCP 20th National Party Congress',
+    blurb:
+      "Forecast the outcome of the Chinese Communist Party's 20th National Party Congress.",
+    award: 'US$200',
+    endTime: toDate('Oct 20, 2022'),
+    groupId: 'YfcYoy7TWbZtUOs0GLfq',
   },
-  // {
-  //   title: 'Manifold F2P Tournament',
-  //   blurb:
-  //     'Who can amass the most mana starting from a free-to-play (F2P) account?',
-  //   award: 'Poem',
-  //   endTime: toDate('Sep 15, 2022'),
-  //   groupId: '6rrIja7tVW00lUVwtsYS',
-  // },
-  // {
-  //   title: 'Cause Exploration Prizes',
-  //   blurb:
-  //     'Which new charity ideas will Open Philanthropy find most promising?',
-  //   award: 'M$100k',
-  //   endTime: toDate('Sep 9, 2022'),
-  //   groupId: 'cMcpBQ2p452jEcJD2SFw',
-  // },
   {
     title: 'Fantasy Football Stock Exchange',
     blurb: 'How many points will each NFL player score this season?',
-    award: '$2,500',
+    award: 'US$2,500',
     endTime: toDate('Jan 6, 2023'),
     groupId: 'SxGRqXRpV3RAQKudbcNb',
   },
+  {
+    title: 'Clearer Thinking Regrant Project',
+    blurb: 'Which projects will Clearer Thinking give a grant to?',
+    award: 'US$13,000',
+    endTime: toDate('Sep 30, 2022'),
+    groupId: 'fhksfIgqyWf7OxsV9nkM',
+  },
+
+  {
+    title: 'Cause Exploration Prizes',
+    blurb:
+      'Which new charity ideas will Open Philanthropy find most promising?',
+    award: 'M$100k',
+    endTime: toDate('Sep 9, 2022'),
+    groupId: 'cMcpBQ2p452jEcJD2SFw',
+  },
+  {
+    title: 'Manifold F2P Tournament',
+    blurb:
+      'Who can amass the most mana starting from a free-to-play (F2P) account?',
+    award: 'Poem',
+    endTime: toDate('Sep 15, 2022'),
+    groupId: '6rrIja7tVW00lUVwtsYS',
+  },
 
   // Tournaments without awards get featured below
   {
@@ -158,16 +168,21 @@ export async function getStaticProps() {
 export default function TournamentPage(props: { sections: SectionInfo[] }) {
   const { sections } = props
 
+  const description = `Win real prizes (including cash!) by participating in forecasting
+            tournaments on current events, sports, science, and more.`
   return (
     <Page>
-      <SEO
-        title="Tournaments"
-        description="Win money by predicting in forecasting tournaments on current events, sports, science, and more"
-      />
+      <SEO title="Tournaments" description={description} />
       <Col className="m-4 gap-10 sm:mx-10 sm:gap-24 xl:w-[125%]">
+        <Col>
+          <Title text="🏆 Manifold tournaments" />
+          <div>{description}</div>
+        </Col>
+
         {sections.map(
           ({ tourney, slug, numPeople }) =>
-            tourney.award && (
+            tourney.award &&
+            (tourney.endTime ?? 0) > Date.now() && (
               <div key={slug}>
                 <SectionHeader
                   url={groupPath(slug, 'about')}
@@ -181,6 +196,7 @@ export default function TournamentPage(props: { sections: SectionInfo[] }) {
               </div>
             )
         )}
+        {/* Salem center */}
         <div>
           <SectionHeader
             url={Salem.url}
@@ -192,6 +208,39 @@ export default function TournamentPage(props: { sections: SectionInfo[] }) {
           <ImageCarousel url={Salem.url} images={Salem.images} />
         </div>
 
+        {/* Title break */}
+        <div className="relative">
+          <div
+            className="absolute inset-0 flex items-center"
+            aria-hidden="true"
+          >
+            <div className="w-full border-t border-gray-300" />
+          </div>
+          <div className="relative flex justify-center">
+            <span className="bg-gray-50 px-3 text-lg font-medium text-gray-900">
+              Past tournaments
+            </span>
+          </div>
+        </div>
+
+        {sections.map(
+          ({ tourney, slug, numPeople }) =>
+            tourney.award &&
+            (tourney.endTime ?? 0) <= Date.now() && (
+              <div key={slug}>
+                <SectionHeader
+                  url={groupPath(slug, 'about')}
+                  title={tourney.title}
+                  ppl={numPeople}
+                  award={tourney.award}
+                  endTime={tourney.endTime}
+                />
+                <span className="text-gray-500">{tourney.blurb}</span>
+                <MarketCarousel slug={slug} />
+              </div>
+            )
+        )}
+
         {/* Title break */}
         <div className="relative">
           <div
diff --git a/web/posts/post-comments.tsx b/web/posts/post-comments.tsx
index 74fbb300..62f69074 100644
--- a/web/posts/post-comments.tsx
+++ b/web/posts/post-comments.tsx
@@ -1,5 +1,6 @@
 import { track } from '@amplitude/analytics-browser'
 import { Editor } from '@tiptap/core'
+import { sum } from 'lodash'
 import clsx from 'clsx'
 import { PostComment } from 'common/comment'
 import { Post } from 'common/post'
@@ -109,6 +110,7 @@ export function PostComment(props: {
   const { text, content, userUsername, userName, userAvatarUrl, createdTime } =
     comment
 
+  const me = useUser()
   const [highlighted, setHighlighted] = useState(false)
   const router = useRouter()
   useEffect(() => {
@@ -162,7 +164,11 @@ export function PostComment(props: {
               Reply
             </button>
           )}
-          <Tipper comment={comment} tips={tips ?? {}} />
+          <Tipper
+            comment={comment}
+            myTip={me ? tips?.[me.id] ?? 0 : 0}
+            totalTip={sum(Object.values(tips ?? {}))}
+          />
         </Row>
       </div>
     </Row>
diff --git a/web/public/award.svg b/web/public/award.svg
new file mode 100644
index 00000000..3140c5b2
--- /dev/null
+++ b/web/public/award.svg
@@ -0,0 +1,28 @@
+<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+  <g id="color">
+    <polyline fill="#92d3f5" stroke="#92d3f5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="54.9988,4.0221 43,16.0208 36,16.0208 30.9584,10.9792 37.9207,4.0169 54.9988,4.0169"/>
+    <polyline fill="#ea5a47" stroke="#ea5a47" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="23.9831,4.0039 36,16.0208 29,16.0208 16.9675,3.9883 23.9831,3.9883"/>
+    <polyline fill="#fcea2b" stroke="none" points="28,22.4271 28,17 44,17 44,22.4271"/>
+    <circle cx="36" cy="45.0208" r="23" fill="#fcea2b" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <polygon fill="#f1b31c" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="35.9861,28 30.8575,38.4014 19.3815,40.0733 27.6891,48.1652 25.7329,59.5961 35.9958,54.1957 46.2628,59.5885 44.2981,48.159 52.5996,40.061 41.1225,38.3976"/>
+  </g>
+  <g id="hair"/>
+  <g id="skin"/>
+  <g id="skin-shadow"/>
+  <g id="line">
+    <circle cx="36" cy="45.0208" r="23" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
+    <circle cx="36" cy="45.0208" r="23" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <circle cx="36" cy="45.0208" r="23" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="29" x2="29" y1="19" y2="16.0208" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="43" x2="43" y1="19" y2="16.0208" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="29" x2="43" y1="16.0208" y2="16.0208" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="25.9896" x2="16.9675" y1="13.0104" y2="3.9883" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="31.9896" x2="23.9831" y1="12.0104" y2="4.0039" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="34" x2="37.9207" y1="8" y2="4.0169" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="46" x2="54.9988" y1="13" y2="4.0221" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="16.9675" x2="23.9831" y1="3.9883" y2="3.9883" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="37.9207" x2="54.9988" y1="4.0169" y2="4.0169" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <circle cx="36" cy="45.0208" r="23" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
+    <polygon fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="35.9861,28 30.8575,38.4014 19.3815,40.0733 27.6891,48.1652 25.7329,59.5961 35.9958,54.1957 46.2628,59.5885 44.2981,48.159 52.5996,40.061 41.1225,38.3976"/>
+  </g>
+</svg>
diff --git a/web/public/sitemap.xml b/web/public/sitemap.xml
index c52d0c0e..1ae2e3a6 100644
--- a/web/public/sitemap.xml
+++ b/web/public/sitemap.xml
@@ -1,10 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
 <url><loc>https://manifold.markets</loc><changefreq>hourly</changefreq><priority>1.0</priority></url>
+<url><loc>https://manifold.markets/search</loc><changefreq>hourly</changefreq><priority>1.0</priority></url>
 <url><loc>https://manifold.markets/home</loc><changefreq>hourly</changefreq><priority>0.2</priority></url>
 <url><loc>https://manifold.markets/leaderboards</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
 <url><loc>https://manifold.markets/add-funds</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
 <url><loc>https://manifold.markets/challenges</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
 <url><loc>https://manifold.markets/charity</loc><changefreq>daily</changefreq><priority>0.7</priority></url>
 <url><loc>https://manifold.markets/groups</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
+<url><loc>https://manifold.markets/tournaments</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
+<url><loc>https://manifold.markets/labs</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
 </urlset>
diff --git a/web/public/twitter-icon-white.svg b/web/public/twitter-icon-white.svg
deleted file mode 100644
index d16b6a7d..00000000
--- a/web/public/twitter-icon-white.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g id="Logo_1_">
-	<path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
-		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
-		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
-		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
-		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
-		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
-</g>
-</svg>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index ef7220ec..0390038f 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
       colors: {
         'red-25': '#FDF7F6',
         'greyscale-1': '#FBFBFF',
+        'greyscale-1.5': '#F4F4FB',
         'greyscale-2': '#E7E7F4',
         'greyscale-3': '#D8D8EB',
         'greyscale-4': '#B1B1C7',
diff --git a/yarn.lock b/yarn.lock
index d0ef33f1..4d57c590 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1310,7 +1310,14 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.15.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.18.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.9.2":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -2351,10 +2358,23 @@
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.1.tgz#d822792e589aac005462491dd62f86095e0c3bef"
   integrity sha512-gMd6uIs1U4Oz718Z5gFoV0o/vD43/4zvbyiJN9Dt7PK9Ubxn+TmJwTmYwyNJc5KxxU1t0CmgTNgwZX9+4NjCnQ==
 
-"@heroicons/react@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.5.tgz#2fe4df9d33eb6ce6d5178a0f862e97b61c01e27d"
-  integrity sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==
+"@hello-pangea/dnd@16.0.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.0.0.tgz#b97791286395924ffbdb4cd0f27f06f2985766d5"
+  integrity sha512-FprEzwrGMvyclVf8pWTrPbUV7/ZFt6NmL76ePj1mMyZG195htDUkmvET6CBwKJTXmV+AE/GyK4Lv3wpCqrlY/g==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    css-box-model "^1.2.1"
+    memoize-one "^6.0.0"
+    raf-schd "^4.0.3"
+    react-redux "^8.0.2"
+    redux "^4.2.0"
+    use-memo-one "^1.1.2"
+
+"@heroicons/react@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
+  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
 
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.4"
@@ -2553,103 +2573,6 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz#27d71a95247a9eaee03d47adee7e3bd594514136"
   integrity sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA==
 
-"@nivo/annotations@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.80.0.tgz#127e4801fff7370dcfb9acfe1e335781dd65cfd5"
-  integrity sha512-bC9z0CLjU07LULTMWsqpjovRtHxP7n8oJjqBQBLmHOGB4IfiLbrryBfu9+aEZH3VN2jXHhdpWUz+HxeZzOzsLg==
-  dependencies:
-    "@nivo/colors" "0.80.0"
-    "@react-spring/web" "9.4.5"
-    lodash "^4.17.21"
-
-"@nivo/axes@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/axes/-/axes-0.80.0.tgz#22788855ddc45bb6a619dcd03d62d4bd8c0fc35f"
-  integrity sha512-AsUyaSHGwQVSEK8QXpsn8X+poZxvakLMYW7crKY1xTGPNw+SU4SSBohPVumm2jMH3fTSLNxLhAjWo71GBJXfdA==
-  dependencies:
-    "@nivo/scales" "0.80.0"
-    "@react-spring/web" "9.4.5"
-    d3-format "^1.4.4"
-    d3-time-format "^3.0.0"
-
-"@nivo/colors@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/colors/-/colors-0.80.0.tgz#5b70b4979df246d9d0d69fb638bba9764dd88b52"
-  integrity sha512-T695Zr411FU4RPo7WDINOAn8f79DPP10SFJmDdEqELE+cbzYVTpXqLGZ7JMv88ko7EOf9qxLQgcBqY69rp9tHQ==
-  dependencies:
-    d3-color "^2.0.0"
-    d3-scale "^3.2.3"
-    d3-scale-chromatic "^2.0.0"
-    lodash "^4.17.21"
-
-"@nivo/core@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/core/-/core-0.80.0.tgz#d180cb2622158eb7bc5f984131ff07984f12297e"
-  integrity sha512-6caih0RavXdWWSfde+rC2pk17WrX9YQlqK26BrxIdXzv3Ydzlh5SkrC7dR2TEvMGBhunzVeLOfiC2DWT1S8CFg==
-  dependencies:
-    "@nivo/recompose" "0.80.0"
-    "@react-spring/web" "9.4.5"
-    d3-color "^2.0.0"
-    d3-format "^1.4.4"
-    d3-interpolate "^2.0.1"
-    d3-scale "^3.2.3"
-    d3-scale-chromatic "^2.0.0"
-    d3-shape "^1.3.5"
-    d3-time-format "^3.0.0"
-    lodash "^4.17.21"
-
-"@nivo/legends@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/legends/-/legends-0.80.0.tgz#49edc54000075b4df055f86794a8c32810269d06"
-  integrity sha512-h0IUIPGygpbKIZZZWIxkkxOw4SO0rqPrqDrykjaoQz4CvL4HtLIUS3YRA4akKOVNZfS5agmImjzvIe0s3RvqlQ==
-
-"@nivo/line@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/line/-/line-0.80.0.tgz#ba541b0fcfd53b3a7ce865feb43c993b7cf4a7d4"
-  integrity sha512-6UAD/y74qq3DDRnVb+QUPvXYojxMtwXMipGSNvCGk8omv1QZNTaUrbV+eQacvn9yh//a0yZcWipnpq0tGJyJCA==
-  dependencies:
-    "@nivo/annotations" "0.80.0"
-    "@nivo/axes" "0.80.0"
-    "@nivo/colors" "0.80.0"
-    "@nivo/legends" "0.80.0"
-    "@nivo/scales" "0.80.0"
-    "@nivo/tooltip" "0.80.0"
-    "@nivo/voronoi" "0.80.0"
-    "@react-spring/web" "9.4.5"
-    d3-shape "^1.3.5"
-
-"@nivo/recompose@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/recompose/-/recompose-0.80.0.tgz#572048aed793321a0bada1fd176b72df5a25282e"
-  integrity sha512-iL3g7j3nJGD9+mRDbwNwt/IXDXH6E29mhShY1I7SP91xrfusZV9pSFf4EzyYgruNJk/2iqMuaqn+e+TVFra44A==
-  dependencies:
-    react-lifecycles-compat "^3.0.4"
-
-"@nivo/scales@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/scales/-/scales-0.80.0.tgz#39313fb97c8ae9633c2aa1e17adb57cb851e8a50"
-  integrity sha512-4y2pQdCg+f3n4TKXC2tYuq71veZM+xPRQbOTgGYJpuBvMc7pQsXF9T5z7ryeIG9hkpXkrlyjecU6XcAG7tLSNg==
-  dependencies:
-    d3-scale "^3.2.3"
-    d3-time "^1.0.11"
-    d3-time-format "^3.0.0"
-    lodash "^4.17.21"
-
-"@nivo/tooltip@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/tooltip/-/tooltip-0.80.0.tgz#07ebef47eb708a0612bd6297d5ad156bbec19d34"
-  integrity sha512-qGmrreRwnCsYjn/LAuwBtxBn/tvG8y+rwgd4gkANLBAoXd3bzJyvmkSe+QJPhUG64bq57ibDK+lO2pC48a3/fw==
-  dependencies:
-    "@react-spring/web" "9.4.5"
-
-"@nivo/voronoi@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/voronoi/-/voronoi-0.80.0.tgz#59cc7ed253dc1a5bbcf614a5ac37d2468d561599"
-  integrity sha512-zaJV3I3cRu1gHpsXCIEvp6GGlGY8P7D9CwAVCjYDGrz3W/+GKN0kA7qGyHTC97zVxJtfefxSPlP/GtOdxac+qw==
-  dependencies:
-    d3-delaunay "^5.3.0"
-    d3-scale "^3.2.3"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -2744,52 +2667,6 @@
   resolved "https://registry.yarnpkg.com/@react-query-firebase/firestore/-/firestore-0.4.2.tgz#6ae52768715aa0a5c0d903dd4fd953ed417ba635"
   integrity sha512-7eYp905+sfBRcBTdj7W7BAc3bI3V0D0kKca4/juOTnN4gyoNyaCNOCjLPY467dTq325hGs7BX0ol7Pw3JENdHA==
 
-"@react-spring/animated@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.5.tgz#dd9921c716a4f4a3ed29491e0c0c9f8ca0eb1a54"
-  integrity sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==
-  dependencies:
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
-
-"@react-spring/core@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.5.tgz#4616e1adc18dd10f5731f100ebdbe9518b89ba3c"
-  integrity sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==
-  dependencies:
-    "@react-spring/animated" "~9.4.5"
-    "@react-spring/rafz" "~9.4.5"
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
-
-"@react-spring/rafz@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.5.tgz#84f809f287f2a66bbfbc66195db340482f886bd7"
-  integrity sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==
-
-"@react-spring/shared@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.5.tgz#4c3ad817bca547984fb1539204d752a412a6d829"
-  integrity sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==
-  dependencies:
-    "@react-spring/rafz" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
-
-"@react-spring/types@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.5.tgz#9c71e5ff866b5484a7ef3db822bf6c10e77bdd8c"
-  integrity sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==
-
-"@react-spring/web@9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.5.tgz#b92f05b87cdc0963a59ee149e677dcaff09f680e"
-  integrity sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==
-  dependencies:
-    "@react-spring/animated" "~9.4.5"
-    "@react-spring/core" "~9.4.5"
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
-
 "@rushstack/eslint-patch@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
@@ -3536,7 +3413,7 @@
   resolved "https://registry.yarnpkg.com/@types/hogan.js/-/hogan.js-3.0.1.tgz#64c54407b30da359763e14877f5702b8ae85d61c"
   integrity sha512-D03i/2OY7kGyMq9wdQ7oD8roE49z/ZCZThe/nbahtvuqCNZY9T2MfedOWyeBdbEpY2W8Gnh/dyJLdFtUCOkYbg==
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -3664,30 +3541,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-beautiful-dnd@13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz#510405abb09f493afdfd898bf83995dc6385c130"
-  integrity sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg==
+"@types/react-dom@18.0.6":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@17.0.2":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43"
-  integrity sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-redux@^7.1.20":
-  version "7.1.24"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0"
-  integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
-
 "@types/react-router-config@*":
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-router-config/-/react-router-config-5.0.6.tgz#87c5c57e72d241db900d9734512c50ccec062451"
@@ -3714,7 +3574,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.43", "@types/react@^17.0.2":
+"@types/react@*", "@types/react@^17.0.2":
   version "17.0.43"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
   integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
@@ -3723,6 +3583,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@18.0.21":
+  version "18.0.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.21.tgz#b8209e9626bb00a34c76f55482697edd2b43cc67"
+  integrity sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/retry@0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
@@ -3772,6 +3641,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -5284,7 +5158,7 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-box-model@^1.2.0:
+css-box-model@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
   integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
@@ -5450,13 +5324,6 @@ csstype@^3.0.2, csstype@^3.1.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
   integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 
-d3-array@2, d3-array@^2.3.0:
-  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
-  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
-  dependencies:
-    internmap "^1.0.0"
-
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.0.tgz#15bf96cd9b7333e02eb8de8053d78962eafcff14"
@@ -5480,23 +5347,11 @@ d3-brush@3.0.0:
     d3-selection "3"
     d3-transition "3"
 
-"d3-color@1 - 2", d3-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
-  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
-
 "d3-color@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
-d3-delaunay@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
-  integrity sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==
-  dependencies:
-    delaunator "4"
-
 "d3-dispatch@1 - 3":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
@@ -5515,28 +5370,11 @@ d3-delaunay@^5.3.0:
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
   integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
 
-"d3-format@1 - 2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
-  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
-
 "d3-format@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
 
-d3-format@^1.4.4:
-  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
-  integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
-
-"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2", d3-interpolate@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
-  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
-  dependencies:
-    d3-color "1 - 2"
-
 "d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
@@ -5544,24 +5382,11 @@ d3-format@^1.4.4:
   dependencies:
     d3-color "1 - 3"
 
-d3-path@1:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
-  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
-
 "d3-path@1 - 3":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.0.1.tgz#f09dec0aaffd770b7995f1a399152bf93052321e"
   integrity sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==
 
-d3-scale-chromatic@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
-  integrity sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==
-  dependencies:
-    d3-color "1 - 2"
-    d3-interpolate "1 - 2"
-
 d3-scale@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
@@ -5573,17 +5398,6 @@ d3-scale@4.0.2:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
-d3-scale@^3.2.3:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
-  integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
-  dependencies:
-    d3-array "^2.3.0"
-    d3-format "1 - 2"
-    d3-interpolate "1.2.0 - 2"
-    d3-time "^2.1.1"
-    d3-time-format "2 - 3"
-
 d3-selection@3, d3-selection@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
@@ -5596,20 +5410,6 @@ d3-shape@3.1.0:
   dependencies:
     d3-path "1 - 3"
 
-d3-shape@^1.3.5:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
-  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
-  dependencies:
-    d3-path "1"
-
-"d3-time-format@2 - 3", d3-time-format@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
-  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
-  dependencies:
-    d3-time "1 - 2"
-
 "d3-time-format@2 - 4":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
@@ -5617,13 +5417,6 @@ d3-shape@^1.3.5:
   dependencies:
     d3-time "1 - 3"
 
-"d3-time@1 - 2", d3-time@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
-  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
-  dependencies:
-    d3-array "2"
-
 "d3-time@1 - 3", "d3-time@2.1.1 - 3":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.0.0.tgz#65972cb98ae2d4954ef5c932e8704061335d4975"
@@ -5631,11 +5424,6 @@ d3-shape@^1.3.5:
   dependencies:
     d3-array "2 - 3"
 
-d3-time@^1.0.11:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
-  integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
-
 "d3-timer@1 - 3":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
@@ -5790,11 +5578,6 @@ del@^6.0.0:
     rimraf "^3.0.2"
     slash "^3.0.0"
 
-delaunator@4:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
-  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -7855,11 +7638,6 @@ internal-slot@^1.0.3:
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
-internmap@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
-  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
-
 interpret@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
@@ -8834,10 +8612,10 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "1.0.3"
 
-memoize-one@^5.1.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
 merge-descriptors@1.0.1:
   version "1.0.1"
@@ -10335,7 +10113,7 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-raf-schd@^4.0.2:
+raf-schd@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
@@ -10387,19 +10165,6 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
-react-beautiful-dnd@13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
-  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    css-box-model "^1.2.0"
-    memoize-one "^5.1.1"
-    raf-schd "^4.0.2"
-    react-redux "^7.2.0"
-    redux "^4.0.4"
-    use-memo-one "^1.1.1"
-
 react-confetti@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.0.1.tgz#d4f57b5a021dd908a6243b8f63b6009b00818d10"
@@ -10437,7 +10202,15 @@ react-dev-utils@^12.0.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@17.0.2, react-dom@^17.0.1:
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-dom@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -10451,14 +10224,14 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-expanding-textarea@2.3.5:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/react-expanding-textarea/-/react-expanding-textarea-2.3.5.tgz#310c28ab242c724e042589ac3ea400dd68ad1488"
-  integrity sha512-mPdtg3CxSgZFcsRLf80jueBWy1Zlh9AKy76S7dGXUKinvo4EypMavZa2iC0hEnLxY0tcwWR+n/K8B21TkttpUw==
+react-expanding-textarea@2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/react-expanding-textarea/-/react-expanding-textarea-2.3.6.tgz#daa50e5110dd71ca79e1df8e056b0b2eb0e8a84a"
+  integrity sha512-LjkyZv1LilMlt+6/yYn9F1FlcK8iQU96myeq6PwU/a7IaQMkSwndSB1SAhMKgxSrUR71VbqsqnAHQ741WbAU/Q==
   dependencies:
     fast-shallow-equal "^1.0.0"
-    react-with-forwarded-ref "^0.3.3"
-    tslib "^2.0.3"
+    react-with-forwarded-ref "^0.3.5"
+    tslib "^2.4.0"
 
 react-fast-compare@^3.2.0:
   version "3.2.0"
@@ -10507,10 +10280,10 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
 react-json-view@^1.21.3:
   version "1.21.3"
@@ -10548,17 +10321,17 @@ react-query@3.39.0:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
-react-redux@^7.2.0:
-  version "7.2.8"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"
-  integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==
+react-redux@^8.0.2:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.4.tgz#80c31dffa8af9526967c4267022ae1525ff0e36a"
+  integrity sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ==
   dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@types/react-redux" "^7.1.20"
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
     hoist-non-react-statics "^3.3.2"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
 
 react-router-config@^5.1.1:
   version "5.1.1"
@@ -10612,14 +10385,21 @@ react-twitter-embed@4.0.4:
   dependencies:
     scriptjs "^2.5.9"
 
-react-with-forwarded-ref@^0.3.3:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/react-with-forwarded-ref/-/react-with-forwarded-ref-0.3.4.tgz#b1e884ea081ec3c5dd578f37889159797454c0a5"
-  integrity sha512-SRq/uTdTh+02JDwYzEEhY2aNNWl/CP2EKP2nQtXzhJw06w6PgYnJt2ObrebvFJu6+wGzX3vDHU3H/ux9hxyZUQ==
+react-with-forwarded-ref@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/react-with-forwarded-ref/-/react-with-forwarded-ref-0.3.5.tgz#7d0bae2a9996fc91493f40ab179b8c54d29cfab9"
+  integrity sha512-BJK4q0Nvqg4AFwc+LV+PZZb2nxS1ZqQlS9hY14TdIyg7Lapzirk/V/TtbYjPFSsm/fGm0wC4tsgI1IDhxSVVSQ==
   dependencies:
     tslib "^2.0.3"
 
-react@17.0.2, react@^17.0.1:
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -10711,7 +10491,7 @@ recursive-readdir@^2.2.2:
   dependencies:
     minimatch "3.0.4"
 
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
   integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
@@ -11077,6 +10857,13 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
@@ -12279,12 +12066,12 @@ use-latest@^1.2.1:
   dependencies:
     use-isomorphic-layout-effect "^1.1.1"
 
-use-memo-one@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
-  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+use-memo-one@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
-use-sync-external-store@1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==