diff --git a/apps/deploy-web/src/components/layout/CreditCardBanner.tsx b/apps/deploy-web/src/components/layout/CreditCardBanner.tsx
index 4492a0023..cc7ac0dff 100644
--- a/apps/deploy-web/src/components/layout/CreditCardBanner.tsx
+++ b/apps/deploy-web/src/components/layout/CreditCardBanner.tsx
@@ -8,7 +8,7 @@ export function CreditCardBanner() {
     <div className="fixed top-0 z-10 flex h-[40px] w-full items-center justify-center space-x-4 bg-primary px-3 py-2">
       <span className="text-sm font-semibold text-white">Credit Card payments are now available!</span>
 
-      {!hasManagedWallet && <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto" size="sm" />}
+      {!hasManagedWallet && <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto text-white hover:text-white" size="sm" variant="text" />}
     </div>
   );
 }
diff --git a/apps/deploy-web/src/components/wallet/ConnectManagedWalletButton.tsx b/apps/deploy-web/src/components/wallet/ConnectManagedWalletButton.tsx
index aacbfae35..d251ecca9 100644
--- a/apps/deploy-web/src/components/wallet/ConnectManagedWalletButton.tsx
+++ b/apps/deploy-web/src/components/wallet/ConnectManagedWalletButton.tsx
@@ -22,7 +22,7 @@ export const ConnectManagedWalletButton: React.FunctionComponent<Props> = ({ cla
       {...rest}
       disabled={isWalletLoading}
     >
-      {isWalletLoading ? <Spinner size="small" className="mr-2" /> : <Rocket className="rotate-45 text-xs" />}
+      {isWalletLoading ? <Spinner size="small" className="mr-2" variant="dark" /> : <Rocket className="rotate-45 text-xs" />}
       <span className="m-2 whitespace-nowrap">{hasManagedWallet ? "Switch to USD Payments" : "Start Trial"}</span>
     </Button>
   );