diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
index 8ecfde5a0..27b8a3bc7 100644
--- a/examples/react/src/components/Connected.tsx
+++ b/examples/react/src/components/Connected.tsx
@@ -33,6 +33,8 @@ import { delay, getCheckoutSettings, getOrderbookCalldata } from '../utils'
 // append ?debug to url to enable debug mode
 const searchParams = new URLSearchParams(location.search)
 const isDebugMode = searchParams.has('debug')
+const checkoutProvider = searchParams.get('checkoutProvider')
+const onRampProvider = searchParams.get('onRampProvider')
 
 export const Connected = () => {
   const { setOpenConnectModal } = useOpenConnectModal()
@@ -391,8 +393,8 @@ export const Connected = () => {
       recipientAddress: address,
       currencyAddress,
       collectionAddress,
-      creditCardProviders: ['sardine', 'transak'],
-      onRampProvider: TransactionOnRampProvider.sardine,
+      creditCardProviders: [checkoutProvider || 'transak'],
+      onRampProvider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak,
       transakConfig: {
         contractId,
         apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
@@ -444,7 +446,7 @@ export const Connected = () => {
   const onClickAddFunds = () => {
     triggerAddFunds({
       walletAddress: address || '',
-      provider: TransactionOnRampProvider.transak
+      provider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak
     })
   }
 
diff --git a/packages/connect/src/styles.ts b/packages/connect/src/styles.ts
index b8541913c..70baa624f 100644
--- a/packages/connect/src/styles.ts
+++ b/packages/connect/src/styles.ts
@@ -553,6 +553,9 @@ export const styles = String.raw`
   .w-screen {
     width: 100vw;
   }
+  .max-w-1 {
+    max-width: calc(var(--spacing) * 1);
+  }
   .max-w-\[532px\] {
     max-width: 532px;
   }