diff --git a/.changeset/chatty-lobsters-approve.md b/.changeset/chatty-lobsters-approve.md
new file mode 100644
index 00000000000..f997c925561
--- /dev/null
+++ b/.changeset/chatty-lobsters-approve.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix `<CheckoutForm />` select positioning and option text color.
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 2d6cb7e122d..2e8e1626242 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -191,6 +191,7 @@ const PaymentSourceMethods = ({
             const paymentSource = paymentSources.find(source => source.id === option.value);
             setSelectedPaymentSource(paymentSource);
           }}
+          portal
         >
           {/*Store value inside an input in order to be accessible as form data*/}
           <input
@@ -217,7 +218,12 @@ const PaymentSourceMethods = ({
               </Flex>
             )}
           </SelectButton>
-          <SelectOptionList />
+          <SelectOptionList
+            sx={t => ({
+              paddingBlock: t.space.$1,
+              color: t.colors.$colorText,
+            })}
+          />
         </Select>
         <Button
           type='submit'