diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..d832421b
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Attach to Chrome",
+      "type": "chrome",
+      "request": "attach",
+      "port": 9222, // chrome needs to be started with the parameter "--remote-debugging-port=9222"
+      "urlFilter": "http://localhost:3000/*",
+      "webRoot": "${workspaceFolder}/web"
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 951df486..117338f4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,4 +2,15 @@
   "javascript.preferences.importModuleSpecifier": "shortest",
   "typescript.preferences.importModuleSpecifier": "shortest",
   "files.eol": "\r\n",
+<<<<<<< HEAD
+=======
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/package-lock.json": true,
+    "**/yarn.lock": true
+  },
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+>>>>>>> vscode_files
 }
diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx
index e1a2eead..1740a6d9 100644
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@@ -22,11 +22,14 @@ import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
 import { Col } from '../layout/col'
 import { OUTCOME_TO_COLOR } from '../outcome-label'
 import { useSaveShares } from '../use-save-shares'
+import { sellShares } from 'web/lib/firebase/fn-call'
+import { calculateCpmmSale, getCpmmProbability } from 'common/calculate-cpmm'
 
 const BET_SIZE = 10
 
 export function QuickBet(props: { contract: Contract; user: User }) {
   const { contract, user } = props
+  const isCpmm = contract.mechanism === 'cpmm-1'
 
   const userBets = useUserContractBets(user.id, contract.id)
   const topAnswer =
@@ -35,7 +38,7 @@ export function QuickBet(props: { contract: Contract; user: User }) {
       : undefined
 
   // TODO: yes/no from useSaveShares doesn't work on numeric contracts
-  const { yesFloorShares, noFloorShares } = useSaveShares(
+  const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
     contract,
     userBets,
     topAnswer?.number.toString() || undefined
@@ -68,8 +71,38 @@ export function QuickBet(props: { contract: Contract; user: User }) {
     // Catch any errors from hovering on an invalid option
   }
 
+  let sharesSold: number | undefined
+  let sellOutcome: 'YES' | 'NO' | undefined
+  let saleAmount: number | undefined
+  if (isCpmm && (upHover || downHover)) {
+    const oppositeShares = upHover ? noShares : yesShares
+    if (oppositeShares) {
+      sellOutcome = upHover ? 'NO' : 'YES'
+
+      const prob = getProb(contract)
+      const maxSharesSold = BET_SIZE / (sellOutcome === 'YES' ? prob : 1 - prob)
+      sharesSold = Math.min(oppositeShares, maxSharesSold)
+
+      const { newPool, saleValue } = calculateCpmmSale(
+        contract,
+        sharesSold,
+        sellOutcome
+      )
+      saleAmount = saleValue
+      previewProb = getCpmmProbability(newPool, contract.p)
+    }
+  }
+
   async function placeQuickBet(direction: 'UP' | 'DOWN') {
     const betPromise = async () => {
+      if (sharesSold && sellOutcome) {
+        return await sellShares({
+          shares: sharesSold,
+          outcome: sellOutcome,
+          contractId: contract.id,
+        })
+      }
+
       const outcome = quickOutcome(contract, direction)
       return await placeBet({
         amount: BET_SIZE,
@@ -78,9 +111,14 @@ export function QuickBet(props: { contract: Contract; user: User }) {
       })
     }
     const shortQ = contract.question.slice(0, 20)
+    const message =
+      sellOutcome && saleAmount
+        ? `${formatMoney(saleAmount)} sold of "${shortQ}"...`
+        : `${formatMoney(BET_SIZE)} on "${shortQ}"...`
+
     toast.promise(betPromise(), {
-      loading: `${formatMoney(BET_SIZE)} on "${shortQ}"...`,
-      success: `${formatMoney(BET_SIZE)} on "${shortQ}"...`,
+      loading: message,
+      success: message,
       error: (err) => `${err.message}`,
     })
   }
@@ -142,32 +180,41 @@ export function QuickBet(props: { contract: Contract; user: User }) {
       <QuickOutcomeView contract={contract} previewProb={previewProb} />
 
       {/* Down bet triangle */}
-      <div>
-        <div
-          className="peer absolute bottom-0 left-0 right-0 h-[50%]"
-          onMouseEnter={() => setDownHover(true)}
-          onMouseLeave={() => setDownHover(false)}
-          onClick={() => placeQuickBet('DOWN')}
-        ></div>
-        {hasDownShares > 0 ? (
+      {contract.outcomeType !== 'BINARY' ? (
+        <div>
+          <div className="peer absolute bottom-0 left-0 right-0 h-[50%] cursor-default"></div>
           <TriangleDownFillIcon
-            className={clsx(
-              'mx-auto h-5 w-5',
-              downHover ? 'text-red-500' : 'text-gray-400'
-            )}
+            className={clsx('mx-auto h-5 w-5 text-gray-200')}
           />
-        ) : (
-          <TriangleDownFillIcon
-            className={clsx(
-              'mx-auto h-5 w-5',
-              downHover ? 'text-red-500' : 'text-gray-200'
-            )}
-          />
-        )}
-        <div className="mb-2 text-center text-xs text-transparent peer-hover:text-gray-400">
-          {formatMoney(10)}
         </div>
-      </div>
+      ) : (
+        <div>
+          <div
+            className="peer absolute bottom-0 left-0 right-0 h-[50%]"
+            onMouseEnter={() => setDownHover(true)}
+            onMouseLeave={() => setDownHover(false)}
+            onClick={() => placeQuickBet('DOWN')}
+          ></div>
+          {hasDownShares > 0 ? (
+            <TriangleDownFillIcon
+              className={clsx(
+                'mx-auto h-5 w-5',
+                downHover ? 'text-red-500' : 'text-gray-400'
+              )}
+            />
+          ) : (
+            <TriangleDownFillIcon
+              className={clsx(
+                'mx-auto h-5 w-5',
+                downHover ? 'text-red-500' : 'text-gray-200'
+              )}
+            />
+          )}
+          <div className="mb-2 text-center text-xs text-transparent peer-hover:text-gray-400">
+            {formatMoney(10)}
+          </div>
+        </div>
+      )}
     </Col>
   )
 }