diff --git a/web/components/answers-panel.tsx b/web/components/answers-panel.tsx
deleted file mode 100644
index 58a3f15c..00000000
--- a/web/components/answers-panel.tsx
+++ /dev/null
@@ -1,690 +0,0 @@
-import clsx from 'clsx'
-import _ from 'lodash'
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import Textarea from 'react-expanding-textarea'
-import { XIcon } from '@heroicons/react/solid'
-
-import { Answer } from '../../common/answer'
-import { Contract } from '../../common/contract'
-import { AmountInput } from './amount-input'
-import { Col } from './layout/col'
-import { createAnswer, placeBet, resolveMarket } from '../lib/firebase/api-call'
-import { Row } from './layout/row'
-import { Avatar } from './avatar'
-import { SiteLink } from './site-link'
-import { DateTimeTooltip } from './datetime-tooltip'
-import dayjs from 'dayjs'
-import { BuyButton, ChooseCancelSelector } from './yes-no-selector'
-import { Spacer } from './layout/spacer'
-import {
-  formatMoney,
-  formatPercent,
-  formatWithCommas,
-} from '../../common/util/format'
-import { InfoTooltip } from './info-tooltip'
-import { useUser } from '../hooks/use-user'
-import {
-  getProbabilityAfterBet,
-  getOutcomeProbability,
-  calculateShares,
-  calculatePayoutAfterCorrectBet,
-} from '../../common/calculate'
-import { firebaseLogin } from '../lib/firebase/users'
-import { Bet } from '../../common/bet'
-import { useAnswers } from '../hooks/use-answers'
-import { ResolveConfirmationButton } from './confirmation-button'
-import { tradingAllowed } from '../lib/firebase/contracts'
-import { removeUndefinedProps } from '../../common/util/object'
-
-export function AnswersPanel(props: { contract: Contract; answers: Answer[] }) {
-  const { contract } = props
-  const { creatorId, resolution, resolutions } = contract
-
-  const answers = useAnswers(contract.id) ?? props.answers
-  const [winningAnswers, otherAnswers] = _.partition(
-    answers.filter((answer) => answer.id !== '0'),
-    (answer) =>
-      answer.id === resolution || (resolutions && resolutions[answer.id])
-  )
-  const sortedAnswers = [
-    ..._.sortBy(winningAnswers, (answer) =>
-      resolutions ? -1 * resolutions[answer.id] : 0
-    ),
-    ..._.sortBy(
-      otherAnswers,
-      (answer) => -1 * getOutcomeProbability(contract.totalShares, answer.id)
-    ),
-  ]
-
-  const user = useUser()
-
-  const [resolveOption, setResolveOption] = useState<
-    'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
-  >()
-  const [chosenAnswers, setChosenAnswers] = useState<{
-    [answerId: string]: number
-  }>({})
-
-  const chosenTotal = _.sum(Object.values(chosenAnswers))
-
-  const onChoose = (answerId: string, prob: number) => {
-    if (resolveOption === 'CHOOSE') {
-      setChosenAnswers({ [answerId]: prob })
-    } else {
-      setChosenAnswers((chosenAnswers) => {
-        return {
-          ...chosenAnswers,
-          [answerId]: prob,
-        }
-      })
-    }
-  }
-
-  const onDeselect = (answerId: string) => {
-    setChosenAnswers((chosenAnswers) => {
-      const newChosenAnswers = { ...chosenAnswers }
-      delete newChosenAnswers[answerId]
-      return newChosenAnswers
-    })
-  }
-
-  useLayoutEffect(() => {
-    setChosenAnswers({})
-  }, [resolveOption])
-
-  const showChoice = resolution
-    ? undefined
-    : resolveOption === 'CHOOSE'
-    ? 'radio'
-    : resolveOption === 'CHOOSE_MULTIPLE'
-    ? 'checkbox'
-    : undefined
-
-  return (
-    <Col className="gap-3">
-      {sortedAnswers.map((answer) => (
-        <AnswerItem
-          key={answer.id}
-          answer={answer}
-          contract={contract}
-          showChoice={showChoice}
-          chosenProb={chosenAnswers[answer.id]}
-          totalChosenProb={chosenTotal}
-          onChoose={onChoose}
-          onDeselect={onDeselect}
-        />
-      ))}
-
-      {sortedAnswers.length === 0 ? (
-        <div className="text-gray-500 p-4">No answers yet...</div>
-      ) : (
-        <div className="text-gray-500 self-end p-4">
-          None of the above:{' '}
-          {formatPercent(getOutcomeProbability(contract.totalShares, '0'))}
-        </div>
-      )}
-
-      {tradingAllowed(contract) && !resolveOption && (
-        <CreateAnswerInput contract={contract} />
-      )}
-
-      {user?.id === creatorId && !resolution && (
-        <AnswerResolvePanel
-          contract={contract}
-          resolveOption={resolveOption}
-          setResolveOption={setResolveOption}
-          chosenAnswers={chosenAnswers}
-        />
-      )}
-    </Col>
-  )
-}
-
-function AnswerItem(props: {
-  answer: Answer
-  contract: Contract
-  showChoice: 'radio' | 'checkbox' | undefined
-  chosenProb: number | undefined
-  totalChosenProb?: number
-  onChoose: (answerId: string, prob: number) => void
-  onDeselect: (answerId: string) => void
-}) {
-  const {
-    answer,
-    contract,
-    showChoice,
-    chosenProb,
-    totalChosenProb,
-    onChoose,
-    onDeselect,
-  } = props
-  const { resolution, resolutions, totalShares } = contract
-  const { username, avatarUrl, name, createdTime, number, text } = answer
-  const isChosen = chosenProb !== undefined
-
-  const createdDate = dayjs(createdTime).format('MMM D')
-  const prob = getOutcomeProbability(totalShares, answer.id)
-  const roundedProb = Math.round(prob * 100)
-  const probPercent = formatPercent(prob)
-  const wasResolvedTo =
-    resolution === answer.id || (resolutions && resolutions[answer.id])
-
-  const [isBetting, setIsBetting] = useState(false)
-
-  return (
-    <Col
-      className={clsx(
-        'p-4 sm:flex-row rounded gap-4',
-        wasResolvedTo
-          ? resolution === 'MKT'
-            ? 'bg-blue-50 mb-2'
-            : 'bg-green-50 mb-8'
-          : chosenProb === undefined
-          ? 'bg-gray-50'
-          : showChoice === 'radio'
-          ? 'bg-green-50'
-          : 'bg-blue-50'
-      )}
-    >
-      <Col className="gap-3 flex-1">
-        <div className="whitespace-pre-line break-words">{text}</div>
-
-        <Row className="text-gray-500 text-sm gap-2 items-center">
-          <SiteLink className="relative" href={`/${username}`}>
-            <Row className="items-center gap-2">
-              <Avatar avatarUrl={avatarUrl} size={6} />
-              <div className="truncate">{name}</div>
-            </Row>
-          </SiteLink>
-
-          <div className="">•</div>
-
-          <div className="whitespace-nowrap">
-            <DateTimeTooltip text="" time={contract.createdTime}>
-              {createdDate}
-            </DateTimeTooltip>
-          </div>
-          <div className="">•</div>
-          <div className="text-base">#{number}</div>
-        </Row>
-      </Col>
-
-      {isBetting ? (
-        <AnswerBetPanel
-          answer={answer}
-          contract={contract}
-          closePanel={() => setIsBetting(false)}
-        />
-      ) : (
-        <Row className="self-end sm:self-start items-center gap-4 justify-end">
-          {!wasResolvedTo &&
-            (showChoice === 'checkbox' ? (
-              <input
-                className="input input-bordered text-2xl justify-self-end w-24"
-                type="number"
-                placeholder={`${roundedProb}`}
-                maxLength={9}
-                value={chosenProb ? Math.round(chosenProb) : ''}
-                onChange={(e) => {
-                  const { value } = e.target
-                  const numberValue = value
-                    ? parseInt(value.replace(/[^\d]/, ''))
-                    : 0
-                  if (!isNaN(numberValue)) onChoose(answer.id, numberValue)
-                }}
-              />
-            ) : (
-              <div
-                className={clsx(
-                  'text-2xl',
-                  tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
-                )}
-              >
-                {probPercent}
-              </div>
-            ))}
-          {showChoice ? (
-            <div className="form-control py-1">
-              <label className="cursor-pointer label gap-3">
-                <span className="">Choose this answer</span>
-                {showChoice === 'radio' && (
-                  <input
-                    className={clsx('radio', chosenProb && '!bg-green-500')}
-                    type="radio"
-                    name="opt"
-                    checked={isChosen}
-                    onChange={() => onChoose(answer.id, 1)}
-                    value={answer.id}
-                  />
-                )}
-                {showChoice === 'checkbox' && (
-                  <input
-                    className={clsx('checkbox', chosenProb && '!bg-blue-500')}
-                    type="checkbox"
-                    name="opt"
-                    checked={isChosen}
-                    onChange={() => {
-                      if (isChosen) onDeselect(answer.id)
-                      else {
-                        onChoose(answer.id, 100 * prob)
-                      }
-                    }}
-                    value={answer.id}
-                  />
-                )}
-              </label>
-              {showChoice === 'checkbox' && (
-                <div className="ml-1">
-                  {chosenProb && totalChosenProb
-                    ? Math.round((100 * chosenProb) / totalChosenProb)
-                    : 0}
-                  % share
-                </div>
-              )}
-            </div>
-          ) : (
-            <>
-              {tradingAllowed(contract) && (
-                <BuyButton
-                  className="justify-end self-end flex-initial btn-md !px-8"
-                  onClick={() => {
-                    setIsBetting(true)
-                  }}
-                />
-              )}
-              {wasResolvedTo && (
-                <Col className="items-end">
-                  <div
-                    className={clsx(
-                      'text-xl',
-                      resolution === 'MKT' ? 'text-blue-700' : 'text-green-700'
-                    )}
-                  >
-                    Chosen{' '}
-                    {resolutions
-                      ? `${Math.round(resolutions[answer.id])}%`
-                      : ''}
-                  </div>
-                  <div className="text-2xl text-gray-500">{probPercent}</div>
-                </Col>
-              )}
-            </>
-          )}
-        </Row>
-      )}
-    </Col>
-  )
-}
-
-function AnswerBetPanel(props: {
-  answer: Answer
-  contract: Contract
-  closePanel: () => void
-}) {
-  const { answer, contract, closePanel } = props
-  const { id: answerId } = answer
-
-  const user = useUser()
-  const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
-
-  const [error, setError] = useState<string | undefined>()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  const inputRef = useRef<HTMLElement>(null)
-  useEffect(() => {
-    inputRef.current && inputRef.current.focus()
-  }, [])
-
-  async function submitBet() {
-    if (!user || !betAmount) return
-
-    if (user.balance < betAmount) {
-      setError('Insufficient balance')
-      return
-    }
-
-    setError(undefined)
-    setIsSubmitting(true)
-
-    const result = await placeBet({
-      amount: betAmount,
-      outcome: answerId,
-      contractId: contract.id,
-    }).then((r) => r.data as any)
-
-    console.log('placed bet. Result:', result)
-
-    if (result?.status === 'success') {
-      setIsSubmitting(false)
-      closePanel()
-    } else {
-      setError(result?.error || 'Error placing bet')
-      setIsSubmitting(false)
-    }
-  }
-
-  const betDisabled = isSubmitting || !betAmount || error
-
-  const initialProb = getOutcomeProbability(contract.totalShares, answer.id)
-
-  const resultProb = getProbabilityAfterBet(
-    contract.totalShares,
-    answerId,
-    betAmount ?? 0
-  )
-
-  const shares = calculateShares(contract.totalShares, betAmount ?? 0, answerId)
-
-  const currentPayout = betAmount
-    ? calculatePayoutAfterCorrectBet(contract, {
-        outcome: answerId,
-        amount: betAmount,
-        shares,
-      } as Bet)
-    : 0
-
-  const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
-  const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
-
-  return (
-    <Col className="items-start px-2 pb-2 pt-4 sm:pt-0">
-      <Row className="self-stretch items-center justify-between">
-        <div className="text-xl">Buy this answer</div>
-
-        <button className="btn-ghost btn-circle" onClick={closePanel}>
-          <XIcon className="w-8 h-8 text-gray-500 mx-auto" aria-hidden="true" />
-        </button>
-      </Row>
-      <div className="my-3 text-left text-sm text-gray-500">Amount </div>
-      <AmountInput
-        inputClassName="w-full"
-        amount={betAmount}
-        onChange={setBetAmount}
-        error={error}
-        setError={setError}
-        disabled={isSubmitting}
-        inputRef={inputRef}
-      />
-
-      <Spacer h={4} />
-
-      <div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
-      <Row>
-        <div>{formatPercent(initialProb)}</div>
-        <div className="mx-2">→</div>
-        <div>{formatPercent(resultProb)}</div>
-      </Row>
-
-      <Spacer h={4} />
-
-      <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
-        Payout if chosen
-        <InfoTooltip
-          text={`Current payout for ${formatWithCommas(
-            shares
-          )} / ${formatWithCommas(
-            shares + contract.totalShares[answerId]
-          )} shares`}
-        />
-      </Row>
-      <div>
-        {formatMoney(currentPayout)}
-        &nbsp; <span>(+{currentReturnPercent})</span>
-      </div>
-
-      <Spacer h={6} />
-
-      {user ? (
-        <button
-          className={clsx(
-            'btn',
-            betDisabled ? 'btn-disabled' : 'btn-primary',
-            isSubmitting ? 'loading' : ''
-          )}
-          onClick={betDisabled ? undefined : submitBet}
-        >
-          {isSubmitting ? 'Submitting...' : 'Submit trade'}
-        </button>
-      ) : (
-        <button
-          className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
-          onClick={firebaseLogin}
-        >
-          Sign in to trade!
-        </button>
-      )}
-    </Col>
-  )
-}
-
-function CreateAnswerInput(props: { contract: Contract }) {
-  const { contract } = props
-  const user = useUser()
-  const [text, setText] = useState('')
-  const [betAmount, setBetAmount] = useState<number | undefined>(10)
-  const [amountError, setAmountError] = useState<string | undefined>()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  const canSubmit = text && betAmount && !amountError && !isSubmitting
-
-  const submitAnswer = async () => {
-    if (canSubmit) {
-      setIsSubmitting(true)
-      const result = await createAnswer({
-        contractId: contract.id,
-        text,
-        amount: betAmount,
-      }).then((r) => r.data)
-
-      setIsSubmitting(false)
-
-      if (result.status === 'success') {
-        setText('')
-        setBetAmount(10)
-        setAmountError(undefined)
-      }
-    }
-  }
-
-  const resultProb = getProbabilityAfterBet(
-    contract.totalShares,
-    'new',
-    betAmount ?? 0
-  )
-
-  const shares = calculateShares(contract.totalShares, betAmount ?? 0, 'new')
-
-  const currentPayout = betAmount
-    ? calculatePayoutAfterCorrectBet(contract, {
-        outcome: 'new',
-        amount: betAmount,
-        shares,
-      } as Bet)
-    : 0
-
-  const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
-  const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
-
-  return (
-    <Col className="gap-4 p-4 bg-gray-50 rounded">
-      <Col className="flex-1 gap-2">
-        <div className="mb-1">Add your answer</div>
-        <Textarea
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          className="textarea textarea-bordered w-full"
-          placeholder="Type your answer..."
-          rows={1}
-          maxLength={10000}
-        />
-        <div />
-        <Col
-          className={clsx(
-            'sm:flex-row gap-4',
-            text ? 'justify-between' : 'self-end'
-          )}
-        >
-          {text && (
-            <>
-              <Col className="gap-2 mt-1">
-                <div className="text-gray-500 text-sm">
-                  Ante (cannot be sold)
-                </div>
-                <AmountInput
-                  amount={betAmount}
-                  onChange={setBetAmount}
-                  error={amountError}
-                  setError={setAmountError}
-                  minimumAmount={10}
-                  disabled={isSubmitting}
-                />
-              </Col>
-              <Col className="gap-2 mt-1">
-                <div className="text-sm text-gray-500">Implied probability</div>
-                <Row>
-                  <div>{formatPercent(0)}</div>
-                  <div className="mx-2">→</div>
-                  <div>{formatPercent(resultProb)}</div>
-                </Row>
-                <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
-                  Payout if chosen
-                  <InfoTooltip
-                    text={`Current payout for ${formatWithCommas(
-                      shares
-                    )} / ${formatWithCommas(shares)} shares`}
-                  />
-                </Row>
-                <div>
-                  {formatMoney(currentPayout)}
-                  &nbsp; <span>(+{currentReturnPercent})</span>
-                </div>
-              </Col>
-            </>
-          )}
-          {user ? (
-            <button
-              className={clsx(
-                'btn self-end mt-2',
-                canSubmit ? 'btn-outline' : 'btn-disabled',
-                isSubmitting && 'loading'
-              )}
-              disabled={!canSubmit}
-              onClick={submitAnswer}
-            >
-              Submit answer & bet
-            </button>
-          ) : (
-            text && (
-              <button
-                className="btn self-end whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
-                onClick={firebaseLogin}
-              >
-                Sign in
-              </button>
-            )
-          )}
-        </Col>
-      </Col>
-    </Col>
-  )
-}
-
-function AnswerResolvePanel(props: {
-  contract: Contract
-  resolveOption: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
-  setResolveOption: (
-    option: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
-  ) => void
-  chosenAnswers: { [answerId: string]: number }
-}) {
-  const { contract, resolveOption, setResolveOption, chosenAnswers } = props
-  const answers = Object.keys(chosenAnswers)
-
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [error, setError] = useState<string | undefined>(undefined)
-
-  const onResolve = async () => {
-    if (resolveOption === 'CHOOSE' && answers.length !== 1) return
-    if (resolveOption === 'CHOOSE_MULTIPLE' && answers.length < 2) return
-
-    setIsSubmitting(true)
-
-    const totalProb = _.sum(Object.values(chosenAnswers))
-    const normalizedProbs = _.mapValues(
-      chosenAnswers,
-      (prob) => (100 * prob) / totalProb
-    )
-
-    const resolutionProps = removeUndefinedProps({
-      outcome:
-        resolveOption === 'CHOOSE'
-          ? answers[0]
-          : resolveOption === 'CHOOSE_MULTIPLE'
-          ? 'MKT'
-          : 'CANCEL',
-      resolutions:
-        resolveOption === 'CHOOSE_MULTIPLE' ? normalizedProbs : undefined,
-      contractId: contract.id,
-    })
-
-    const result = await resolveMarket(resolutionProps).then((r) => r.data)
-
-    console.log('resolved', resolutionProps, 'result:', result)
-
-    if (result?.status !== 'success') {
-      setError(result?.message || 'Error resolving market')
-    }
-    setResolveOption(undefined)
-    setIsSubmitting(false)
-  }
-
-  const resolutionButtonClass =
-    resolveOption === 'CANCEL'
-      ? 'bg-yellow-400 hover:bg-yellow-500'
-      : resolveOption === 'CHOOSE' && answers.length
-      ? 'btn-primary'
-      : resolveOption === 'CHOOSE_MULTIPLE' &&
-        answers.length > 1 &&
-        answers.every((answer) => chosenAnswers[answer] > 0)
-      ? 'bg-blue-400 hover:bg-blue-500'
-      : 'btn-disabled'
-
-  return (
-    <Col className="gap-4 p-4 bg-gray-50 rounded">
-      <div>Resolve your market</div>
-      <Col className="sm:flex-row sm:items-center gap-4">
-        <ChooseCancelSelector
-          className="sm:!flex-row sm:items-center"
-          selected={resolveOption}
-          onSelect={setResolveOption}
-        />
-
-        <Row
-          className={clsx(
-            'flex-1 items-center',
-            resolveOption ? 'justify-between' : 'justify-end'
-          )}
-        >
-          {resolveOption && (
-            <button
-              className="btn btn-ghost"
-              onClick={() => {
-                setResolveOption(undefined)
-              }}
-            >
-              Clear
-            </button>
-          )}
-          <ResolveConfirmationButton
-            onResolve={onResolve}
-            isSubmitting={isSubmitting}
-            openModelButtonClass={resolutionButtonClass}
-            submitButtonClass={resolutionButtonClass}
-          />
-        </Row>
-      </Col>
-
-      {!!error && <div className="text-red-500">{error}</div>}
-    </Col>
-  )
-}
diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
new file mode 100644
index 00000000..33a0593f
--- /dev/null
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -0,0 +1,168 @@
+import clsx from 'clsx'
+import _ from 'lodash'
+import { useEffect, useRef, useState } from 'react'
+import { XIcon } from '@heroicons/react/solid'
+
+import { Answer } from '../../../common/answer'
+import { Contract } from '../../../common/contract'
+import { AmountInput } from '../amount-input'
+import { Col } from '../layout/col'
+import { placeBet } from '../../lib/firebase/api-call'
+import { Row } from '../layout/row'
+import { Spacer } from '../layout/spacer'
+import {
+  formatMoney,
+  formatPercent,
+  formatWithCommas,
+} from '../../../common/util/format'
+import { InfoTooltip } from '../info-tooltip'
+import { useUser } from '../../hooks/use-user'
+import {
+  getProbabilityAfterBet,
+  getOutcomeProbability,
+  calculateShares,
+  calculatePayoutAfterCorrectBet,
+} from '../../../common/calculate'
+import { firebaseLogin } from '../../lib/firebase/users'
+import { Bet } from '../../../common/bet'
+
+export function AnswerBetPanel(props: {
+  answer: Answer
+  contract: Contract
+  closePanel: () => void
+}) {
+  const { answer, contract, closePanel } = props
+  const { id: answerId } = answer
+
+  const user = useUser()
+  const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
+
+  const [error, setError] = useState<string | undefined>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const inputRef = useRef<HTMLElement>(null)
+  useEffect(() => {
+    inputRef.current && inputRef.current.focus()
+  }, [])
+
+  async function submitBet() {
+    if (!user || !betAmount) return
+
+    if (user.balance < betAmount) {
+      setError('Insufficient balance')
+      return
+    }
+
+    setError(undefined)
+    setIsSubmitting(true)
+
+    const result = await placeBet({
+      amount: betAmount,
+      outcome: answerId,
+      contractId: contract.id,
+    }).then((r) => r.data as any)
+
+    console.log('placed bet. Result:', result)
+
+    if (result?.status === 'success') {
+      setIsSubmitting(false)
+      closePanel()
+    } else {
+      setError(result?.error || 'Error placing bet')
+      setIsSubmitting(false)
+    }
+  }
+
+  const betDisabled = isSubmitting || !betAmount || error
+
+  const initialProb = getOutcomeProbability(contract.totalShares, answer.id)
+
+  const resultProb = getProbabilityAfterBet(
+    contract.totalShares,
+    answerId,
+    betAmount ?? 0
+  )
+
+  const shares = calculateShares(contract.totalShares, betAmount ?? 0, answerId)
+
+  const currentPayout = betAmount
+    ? calculatePayoutAfterCorrectBet(contract, {
+        outcome: answerId,
+        amount: betAmount,
+        shares,
+      } as Bet)
+    : 0
+
+  const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
+  const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
+
+  return (
+    <Col className="items-start px-2 pb-2 pt-4 sm:pt-0">
+      <Row className="self-stretch items-center justify-between">
+        <div className="text-xl">Buy this answer</div>
+
+        <button className="btn-ghost btn-circle" onClick={closePanel}>
+          <XIcon className="w-8 h-8 text-gray-500 mx-auto" aria-hidden="true" />
+        </button>
+      </Row>
+      <div className="my-3 text-left text-sm text-gray-500">Amount </div>
+      <AmountInput
+        inputClassName="w-full"
+        amount={betAmount}
+        onChange={setBetAmount}
+        error={error}
+        setError={setError}
+        disabled={isSubmitting}
+        inputRef={inputRef}
+      />
+
+      <Spacer h={4} />
+
+      <div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
+      <Row>
+        <div>{formatPercent(initialProb)}</div>
+        <div className="mx-2">→</div>
+        <div>{formatPercent(resultProb)}</div>
+      </Row>
+
+      <Spacer h={4} />
+
+      <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
+        Payout if chosen
+        <InfoTooltip
+          text={`Current payout for ${formatWithCommas(
+            shares
+          )} / ${formatWithCommas(
+            shares + contract.totalShares[answerId]
+          )} shares`}
+        />
+      </Row>
+      <div>
+        {formatMoney(currentPayout)}
+        &nbsp; <span>(+{currentReturnPercent})</span>
+      </div>
+
+      <Spacer h={6} />
+
+      {user ? (
+        <button
+          className={clsx(
+            'btn',
+            betDisabled ? 'btn-disabled' : 'btn-primary',
+            isSubmitting ? 'loading' : ''
+          )}
+          onClick={betDisabled ? undefined : submitBet}
+        >
+          {isSubmitting ? 'Submitting...' : 'Submit trade'}
+        </button>
+      ) : (
+        <button
+          className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
+          onClick={firebaseLogin}
+        >
+          Sign in to trade!
+        </button>
+      )}
+    </Col>
+  )
+}
diff --git a/web/components/answers/answer-item.tsx b/web/components/answers/answer-item.tsx
new file mode 100644
index 00000000..7952a347
--- /dev/null
+++ b/web/components/answers/answer-item.tsx
@@ -0,0 +1,193 @@
+import clsx from 'clsx'
+import _ from 'lodash'
+import { useState } from 'react'
+
+import { Answer } from '../../../common/answer'
+import { Contract } from '../../../common/contract'
+import { Col } from '../layout/col'
+import { Row } from '../layout/row'
+import { Avatar } from '../avatar'
+import { SiteLink } from '../site-link'
+import { DateTimeTooltip } from '../datetime-tooltip'
+import dayjs from 'dayjs'
+import { BuyButton } from '../yes-no-selector'
+import { formatPercent } from '../../../common/util/format'
+import { getOutcomeProbability } from '../../../common/calculate'
+import { tradingAllowed } from '../../lib/firebase/contracts'
+import { AnswerBetPanel } from './answer-bet-panel'
+
+export function AnswerItem(props: {
+  answer: Answer
+  contract: Contract
+  showChoice: 'radio' | 'checkbox' | undefined
+  chosenProb: number | undefined
+  totalChosenProb?: number
+  onChoose: (answerId: string, prob: number) => void
+  onDeselect: (answerId: string) => void
+}) {
+  const {
+    answer,
+    contract,
+    showChoice,
+    chosenProb,
+    totalChosenProb,
+    onChoose,
+    onDeselect,
+  } = props
+  const { resolution, resolutions, totalShares } = contract
+  const { username, avatarUrl, name, createdTime, number, text } = answer
+  const isChosen = chosenProb !== undefined
+
+  const createdDate = dayjs(createdTime).format('MMM D')
+  const prob = getOutcomeProbability(totalShares, answer.id)
+  const roundedProb = Math.round(prob * 100)
+  const probPercent = formatPercent(prob)
+  const wasResolvedTo =
+    resolution === answer.id || (resolutions && resolutions[answer.id])
+
+  const [isBetting, setIsBetting] = useState(false)
+
+  return (
+    <Col
+      className={clsx(
+        'p-4 sm:flex-row rounded gap-4',
+        wasResolvedTo
+          ? resolution === 'MKT'
+            ? 'bg-blue-50 mb-2'
+            : 'bg-green-50 mb-8'
+          : chosenProb === undefined
+          ? 'bg-gray-50'
+          : showChoice === 'radio'
+          ? 'bg-green-50'
+          : 'bg-blue-50'
+      )}
+    >
+      <Col className="gap-3 flex-1">
+        <div className="whitespace-pre-line break-words">{text}</div>
+
+        <Row className="text-gray-500 text-sm gap-2 items-center">
+          <SiteLink className="relative" href={`/${username}`}>
+            <Row className="items-center gap-2">
+              <Avatar avatarUrl={avatarUrl} size={6} />
+              <div className="truncate">{name}</div>
+            </Row>
+          </SiteLink>
+
+          <div className="">•</div>
+
+          <div className="whitespace-nowrap">
+            <DateTimeTooltip text="" time={contract.createdTime}>
+              {createdDate}
+            </DateTimeTooltip>
+          </div>
+          <div className="">•</div>
+          <div className="text-base">#{number}</div>
+        </Row>
+      </Col>
+
+      {isBetting ? (
+        <AnswerBetPanel
+          answer={answer}
+          contract={contract}
+          closePanel={() => setIsBetting(false)}
+        />
+      ) : (
+        <Row className="self-end sm:self-start items-center gap-4 justify-end">
+          {!wasResolvedTo &&
+            (showChoice === 'checkbox' ? (
+              <input
+                className="input input-bordered text-2xl justify-self-end w-24"
+                type="number"
+                placeholder={`${roundedProb}`}
+                maxLength={9}
+                value={chosenProb ? Math.round(chosenProb) : ''}
+                onChange={(e) => {
+                  const { value } = e.target
+                  const numberValue = value
+                    ? parseInt(value.replace(/[^\d]/, ''))
+                    : 0
+                  if (!isNaN(numberValue)) onChoose(answer.id, numberValue)
+                }}
+              />
+            ) : (
+              <div
+                className={clsx(
+                  'text-2xl',
+                  tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
+                )}
+              >
+                {probPercent}
+              </div>
+            ))}
+          {showChoice ? (
+            <div className="form-control py-1">
+              <label className="cursor-pointer label gap-3">
+                <span className="">Choose this answer</span>
+                {showChoice === 'radio' && (
+                  <input
+                    className={clsx('radio', chosenProb && '!bg-green-500')}
+                    type="radio"
+                    name="opt"
+                    checked={isChosen}
+                    onChange={() => onChoose(answer.id, 1)}
+                    value={answer.id}
+                  />
+                )}
+                {showChoice === 'checkbox' && (
+                  <input
+                    className={clsx('checkbox', chosenProb && '!bg-blue-500')}
+                    type="checkbox"
+                    name="opt"
+                    checked={isChosen}
+                    onChange={() => {
+                      if (isChosen) onDeselect(answer.id)
+                      else {
+                        onChoose(answer.id, 100 * prob)
+                      }
+                    }}
+                    value={answer.id}
+                  />
+                )}
+              </label>
+              {showChoice === 'checkbox' && (
+                <div className="ml-1">
+                  {chosenProb && totalChosenProb
+                    ? Math.round((100 * chosenProb) / totalChosenProb)
+                    : 0}
+                  % share
+                </div>
+              )}
+            </div>
+          ) : (
+            <>
+              {tradingAllowed(contract) && (
+                <BuyButton
+                  className="justify-end self-end flex-initial btn-md !px-8"
+                  onClick={() => {
+                    setIsBetting(true)
+                  }}
+                />
+              )}
+              {wasResolvedTo && (
+                <Col className="items-end">
+                  <div
+                    className={clsx(
+                      'text-xl',
+                      resolution === 'MKT' ? 'text-blue-700' : 'text-green-700'
+                    )}
+                  >
+                    Chosen{' '}
+                    {resolutions
+                      ? `${Math.round(resolutions[answer.id])}%`
+                      : ''}
+                  </div>
+                  <div className="text-2xl text-gray-500">{probPercent}</div>
+                </Col>
+              )}
+            </>
+          )}
+        </Row>
+      )}
+    </Col>
+  )
+}
diff --git a/web/components/answers/answer-resolve-panel.tsx b/web/components/answers/answer-resolve-panel.tsx
new file mode 100644
index 00000000..b1146e19
--- /dev/null
+++ b/web/components/answers/answer-resolve-panel.tsx
@@ -0,0 +1,111 @@
+import clsx from 'clsx'
+import _ from 'lodash'
+import { useState } from 'react'
+
+import { Contract } from '../../../common/contract'
+import { Col } from '../layout/col'
+import { resolveMarket } from '../../lib/firebase/api-call'
+import { Row } from '../layout/row'
+import { ChooseCancelSelector } from '../yes-no-selector'
+import { ResolveConfirmationButton } from '../confirmation-button'
+import { removeUndefinedProps } from '../../../common/util/object'
+
+export function AnswerResolvePanel(props: {
+  contract: Contract
+  resolveOption: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
+  setResolveOption: (
+    option: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
+  ) => void
+  chosenAnswers: { [answerId: string]: number }
+}) {
+  const { contract, resolveOption, setResolveOption, chosenAnswers } = props
+  const answers = Object.keys(chosenAnswers)
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  const onResolve = async () => {
+    if (resolveOption === 'CHOOSE' && answers.length !== 1) return
+    if (resolveOption === 'CHOOSE_MULTIPLE' && answers.length < 2) return
+
+    setIsSubmitting(true)
+
+    const totalProb = _.sum(Object.values(chosenAnswers))
+    const normalizedProbs = _.mapValues(
+      chosenAnswers,
+      (prob) => (100 * prob) / totalProb
+    )
+
+    const resolutionProps = removeUndefinedProps({
+      outcome:
+        resolveOption === 'CHOOSE'
+          ? answers[0]
+          : resolveOption === 'CHOOSE_MULTIPLE'
+          ? 'MKT'
+          : 'CANCEL',
+      resolutions:
+        resolveOption === 'CHOOSE_MULTIPLE' ? normalizedProbs : undefined,
+      contractId: contract.id,
+    })
+
+    const result = await resolveMarket(resolutionProps).then((r) => r.data)
+
+    console.log('resolved', resolutionProps, 'result:', result)
+
+    if (result?.status !== 'success') {
+      setError(result?.message || 'Error resolving market')
+    }
+    setResolveOption(undefined)
+    setIsSubmitting(false)
+  }
+
+  const resolutionButtonClass =
+    resolveOption === 'CANCEL'
+      ? 'bg-yellow-400 hover:bg-yellow-500'
+      : resolveOption === 'CHOOSE' && answers.length
+      ? 'btn-primary'
+      : resolveOption === 'CHOOSE_MULTIPLE' &&
+        answers.length > 1 &&
+        answers.every((answer) => chosenAnswers[answer] > 0)
+      ? 'bg-blue-400 hover:bg-blue-500'
+      : 'btn-disabled'
+
+  return (
+    <Col className="gap-4 p-4 bg-gray-50 rounded">
+      <div>Resolve your market</div>
+      <Col className="sm:flex-row sm:items-center gap-4">
+        <ChooseCancelSelector
+          className="sm:!flex-row sm:items-center"
+          selected={resolveOption}
+          onSelect={setResolveOption}
+        />
+
+        <Row
+          className={clsx(
+            'flex-1 items-center',
+            resolveOption ? 'justify-between' : 'justify-end'
+          )}
+        >
+          {resolveOption && (
+            <button
+              className="btn btn-ghost"
+              onClick={() => {
+                setResolveOption(undefined)
+              }}
+            >
+              Clear
+            </button>
+          )}
+          <ResolveConfirmationButton
+            onResolve={onResolve}
+            isSubmitting={isSubmitting}
+            openModelButtonClass={resolutionButtonClass}
+            submitButtonClass={resolutionButtonClass}
+          />
+        </Row>
+      </Col>
+
+      {!!error && <div className="text-red-500">{error}</div>}
+    </Col>
+  )
+}
diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
new file mode 100644
index 00000000..aee69f5e
--- /dev/null
+++ b/web/components/answers/answers-panel.tsx
@@ -0,0 +1,118 @@
+import _ from 'lodash'
+import { useLayoutEffect, useState } from 'react'
+
+import { Answer } from '../../../common/answer'
+import { Contract } from '../../../common/contract'
+import { Col } from '../layout/col'
+import { formatPercent } from '../../../common/util/format'
+import { useUser } from '../../hooks/use-user'
+import { getOutcomeProbability } from '../../../common/calculate'
+import { useAnswers } from '../../hooks/use-answers'
+import { tradingAllowed } from '../../lib/firebase/contracts'
+import { AnswerItem } from './answer-item'
+import { CreateAnswerPanel } from './create-answer-panel'
+import { AnswerResolvePanel } from './answer-resolve-panel'
+
+export function AnswersPanel(props: { contract: Contract; answers: Answer[] }) {
+  const { contract } = props
+  const { creatorId, resolution, resolutions } = contract
+
+  const answers = useAnswers(contract.id) ?? props.answers
+  const [winningAnswers, otherAnswers] = _.partition(
+    answers.filter((answer) => answer.id !== '0'),
+    (answer) =>
+      answer.id === resolution || (resolutions && resolutions[answer.id])
+  )
+  const sortedAnswers = [
+    ..._.sortBy(winningAnswers, (answer) =>
+      resolutions ? -1 * resolutions[answer.id] : 0
+    ),
+    ..._.sortBy(
+      otherAnswers,
+      (answer) => -1 * getOutcomeProbability(contract.totalShares, answer.id)
+    ),
+  ]
+
+  const user = useUser()
+
+  const [resolveOption, setResolveOption] = useState<
+    'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
+  >()
+  const [chosenAnswers, setChosenAnswers] = useState<{
+    [answerId: string]: number
+  }>({})
+
+  const chosenTotal = _.sum(Object.values(chosenAnswers))
+
+  const onChoose = (answerId: string, prob: number) => {
+    if (resolveOption === 'CHOOSE') {
+      setChosenAnswers({ [answerId]: prob })
+    } else {
+      setChosenAnswers((chosenAnswers) => {
+        return {
+          ...chosenAnswers,
+          [answerId]: prob,
+        }
+      })
+    }
+  }
+
+  const onDeselect = (answerId: string) => {
+    setChosenAnswers((chosenAnswers) => {
+      const newChosenAnswers = { ...chosenAnswers }
+      delete newChosenAnswers[answerId]
+      return newChosenAnswers
+    })
+  }
+
+  useLayoutEffect(() => {
+    setChosenAnswers({})
+  }, [resolveOption])
+
+  const showChoice = resolution
+    ? undefined
+    : resolveOption === 'CHOOSE'
+    ? 'radio'
+    : resolveOption === 'CHOOSE_MULTIPLE'
+    ? 'checkbox'
+    : undefined
+
+  return (
+    <Col className="gap-3">
+      {sortedAnswers.map((answer) => (
+        <AnswerItem
+          key={answer.id}
+          answer={answer}
+          contract={contract}
+          showChoice={showChoice}
+          chosenProb={chosenAnswers[answer.id]}
+          totalChosenProb={chosenTotal}
+          onChoose={onChoose}
+          onDeselect={onDeselect}
+        />
+      ))}
+
+      {sortedAnswers.length === 0 ? (
+        <div className="text-gray-500 p-4">No answers yet...</div>
+      ) : (
+        <div className="text-gray-500 self-end p-4">
+          None of the above:{' '}
+          {formatPercent(getOutcomeProbability(contract.totalShares, '0'))}
+        </div>
+      )}
+
+      {tradingAllowed(contract) && !resolveOption && (
+        <CreateAnswerPanel contract={contract} />
+      )}
+
+      {user?.id === creatorId && !resolution && (
+        <AnswerResolvePanel
+          contract={contract}
+          resolveOption={resolveOption}
+          setResolveOption={setResolveOption}
+          chosenAnswers={chosenAnswers}
+        />
+      )}
+    </Col>
+  )
+}
diff --git a/web/components/answers/create-answer-panel.tsx b/web/components/answers/create-answer-panel.tsx
new file mode 100644
index 00000000..36eb1a7b
--- /dev/null
+++ b/web/components/answers/create-answer-panel.tsx
@@ -0,0 +1,156 @@
+import clsx from 'clsx'
+import _ from 'lodash'
+import { useState } from 'react'
+import Textarea from 'react-expanding-textarea'
+
+import { Contract } from '../../../common/contract'
+import { AmountInput } from '../amount-input'
+import { Col } from '../layout/col'
+import { createAnswer } from '../../lib/firebase/api-call'
+import { Row } from '../layout/row'
+import {
+  formatMoney,
+  formatPercent,
+  formatWithCommas,
+} from '../../../common/util/format'
+import { InfoTooltip } from '../info-tooltip'
+import { useUser } from '../../hooks/use-user'
+import {
+  getProbabilityAfterBet,
+  calculateShares,
+  calculatePayoutAfterCorrectBet,
+} from '../../../common/calculate'
+import { firebaseLogin } from '../../lib/firebase/users'
+import { Bet } from '../../../common/bet'
+
+export function CreateAnswerPanel(props: { contract: Contract }) {
+  const { contract } = props
+  const user = useUser()
+  const [text, setText] = useState('')
+  const [betAmount, setBetAmount] = useState<number | undefined>(10)
+  const [amountError, setAmountError] = useState<string | undefined>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const canSubmit = text && betAmount && !amountError && !isSubmitting
+
+  const submitAnswer = async () => {
+    if (canSubmit) {
+      setIsSubmitting(true)
+      const result = await createAnswer({
+        contractId: contract.id,
+        text,
+        amount: betAmount,
+      }).then((r) => r.data)
+
+      setIsSubmitting(false)
+
+      if (result.status === 'success') {
+        setText('')
+        setBetAmount(10)
+        setAmountError(undefined)
+      }
+    }
+  }
+
+  const resultProb = getProbabilityAfterBet(
+    contract.totalShares,
+    'new',
+    betAmount ?? 0
+  )
+
+  const shares = calculateShares(contract.totalShares, betAmount ?? 0, 'new')
+
+  const currentPayout = betAmount
+    ? calculatePayoutAfterCorrectBet(contract, {
+        outcome: 'new',
+        amount: betAmount,
+        shares,
+      } as Bet)
+    : 0
+
+  const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
+  const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
+
+  return (
+    <Col className="gap-4 p-4 bg-gray-50 rounded">
+      <Col className="flex-1 gap-2">
+        <div className="mb-1">Add your answer</div>
+        <Textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          className="textarea textarea-bordered w-full"
+          placeholder="Type your answer..."
+          rows={1}
+          maxLength={10000}
+        />
+        <div />
+        <Col
+          className={clsx(
+            'sm:flex-row gap-4',
+            text ? 'justify-between' : 'self-end'
+          )}
+        >
+          {text && (
+            <>
+              <Col className="gap-2 mt-1">
+                <div className="text-gray-500 text-sm">
+                  Ante (cannot be sold)
+                </div>
+                <AmountInput
+                  amount={betAmount}
+                  onChange={setBetAmount}
+                  error={amountError}
+                  setError={setAmountError}
+                  minimumAmount={10}
+                  disabled={isSubmitting}
+                />
+              </Col>
+              <Col className="gap-2 mt-1">
+                <div className="text-sm text-gray-500">Implied probability</div>
+                <Row>
+                  <div>{formatPercent(0)}</div>
+                  <div className="mx-2">→</div>
+                  <div>{formatPercent(resultProb)}</div>
+                </Row>
+                <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
+                  Payout if chosen
+                  <InfoTooltip
+                    text={`Current payout for ${formatWithCommas(
+                      shares
+                    )} / ${formatWithCommas(shares)} shares`}
+                  />
+                </Row>
+                <div>
+                  {formatMoney(currentPayout)}
+                  &nbsp; <span>(+{currentReturnPercent})</span>
+                </div>
+              </Col>
+            </>
+          )}
+          {user ? (
+            <button
+              className={clsx(
+                'btn self-end mt-2',
+                canSubmit ? 'btn-outline' : 'btn-disabled',
+                isSubmitting && 'loading'
+              )}
+              disabled={!canSubmit}
+              onClick={submitAnswer}
+            >
+              Submit answer & bet
+            </button>
+          ) : (
+            text && (
+              <button
+                className="btn self-end whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
+                onClick={firebaseLogin}
+              >
+                Sign in
+              </button>
+            )
+          )}
+        </Col>
+      </Col>
+    </Col>
+  )
+}
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 557d5a45..8584a9f9 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -28,7 +28,7 @@ import { Fold } from '../../../common/fold'
 import { useFoldsWithTags } from '../../hooks/use-fold'
 import { listAllAnswers } from '../../lib/firebase/answers'
 import { Answer } from '../../../common/answer'
-import { AnswersPanel } from '../../components/answers-panel'
+import { AnswersPanel } from '../../components/answers/answers-panel'
 
 export async function getStaticProps(props: {
   params: { username: string; contractSlug: string }