diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 8343d696..7188c19a 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -40,6 +40,7 @@ import { useUnfilledBets } from 'web/hooks/use-bets'
 import { LimitBets } from './limit-bets'
 import { BucketInput } from './bucket-input'
 import { PillButton } from './buttons/pill-button'
+import { YesNoSelector } from './yes-no-selector'
 
 export function BetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -268,25 +269,16 @@ function BuyPanel(props: {
 
   return (
     <>
-      <div className="my-3 text-left text-sm text-gray-500">Direction</div>
-      <Row className="mb-4 items-center gap-2">
-        <PillButton
-          selected={betChoice === 'YES'}
-          onSelect={() => onBetChoice('YES')}
-          big
-          color="bg-primary"
-        >
-          {isPseudoNumeric ? 'Higher' : 'Yes'}
-        </PillButton>
-        <PillButton
-          selected={betChoice === 'NO'}
-          onSelect={() => onBetChoice('NO')}
-          big
-          color="bg-red-400"
-        >
-          {isPseudoNumeric ? 'Lower' : 'No'}
-        </PillButton>
-      </Row>
+      <div className="my-3 text-left text-sm text-gray-500">
+        {isPseudoNumeric ? 'Direction' : 'Outcome'}
+      </div>
+      <YesNoSelector
+        className="mb-4"
+        btnClassName="flex-1"
+        selected={betChoice}
+        onSelect={(choice) => onBetChoice(choice)}
+        isPseudoNumeric={isPseudoNumeric}
+      />
 
       <div className="my-3 text-left text-sm text-gray-500">Amount</div>
       <BuyAmountInput
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index dda97c0c..3b3cc21d 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -5,6 +5,68 @@ import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { resolution } from 'common/contract'
 
+export function YesNoSelector(props: {
+  selected?: 'YES' | 'NO'
+  onSelect: (selected: 'YES' | 'NO') => void
+  className?: string
+  btnClassName?: string
+  replaceYesButton?: React.ReactNode
+  replaceNoButton?: React.ReactNode
+  isPseudoNumeric?: boolean
+}) {
+  const {
+    selected,
+    onSelect,
+    className,
+    btnClassName,
+    replaceNoButton,
+    replaceYesButton,
+    isPseudoNumeric,
+  } = props
+
+  const commonClassNames =
+    'inline-flex items-center justify-center rounded-3xl border-2 p-2'
+
+  return (
+    <Row className={clsx('space-x-3', className)}>
+      {replaceYesButton ? (
+        replaceYesButton
+      ) : (
+        <button
+          className={clsx(
+            commonClassNames,
+            'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
+            selected == 'YES'
+              ? 'bg-primary text-white'
+              : 'text-primary bg-transparent',
+            btnClassName
+          )}
+          onClick={() => onSelect('YES')}
+        >
+          {isPseudoNumeric ? 'HIGHER' : 'YES'}
+        </button>
+      )}
+      {replaceNoButton ? (
+        replaceNoButton
+      ) : (
+        <button
+          className={clsx(
+            commonClassNames,
+            'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
+            selected == 'NO'
+              ? 'bg-red-400 text-white'
+              : 'bg-transparent text-red-400',
+            btnClassName
+          )}
+          onClick={() => onSelect('NO')}
+        >
+          {isPseudoNumeric ? 'LOWER' : 'NO'}
+        </button>
+      )}
+    </Row>
+  )
+}
+
 export function YesNoCancelSelector(props: {
   selected: resolution | undefined
   onSelect: (selected: resolution) => void