diff --git a/app/components/UI/Ramp/Aggregator/components/ErrorView.tsx b/app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
index d4750508dc1..740adee21d2 100644
--- a/app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
+++ b/app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
@@ -28,7 +28,6 @@ const createStyles = (
       flex: options?.asScreen ? 1 : undefined,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: colors.background.default,
     },
     content: {
       width: '100%',
diff --git a/app/components/UI/Ramp/Views/Checkout/Checkout.styles.ts b/app/components/UI/Ramp/Views/Checkout/Checkout.styles.ts
index f93576d81a8..bcb7acf465a 100644
--- a/app/components/UI/Ramp/Views/Checkout/Checkout.styles.ts
+++ b/app/components/UI/Ramp/Views/Checkout/Checkout.styles.ts
@@ -1,14 +1,19 @@
 import { StyleSheet } from 'react-native';
-import { Theme } from '../../../../../util/theme/models';
+import { Theme, AppThemeKey } from '../../../../../util/theme/models';
+import { colors } from '../../../../../styles/common';
 
-const styleSheet = (params: { theme: Theme }) =>
-  StyleSheet.create({
+const styleSheet = (params: { theme: Theme }) => {
+  const isDark = params.theme.themeAppearance === AppThemeKey.dark;
+  return StyleSheet.create({
     headerWithoutPadding: {
       paddingVertical: 0,
     },
     webview: {
-      backgroundColor: params.theme.colors.background.default,
+      backgroundColor: isDark
+        ? colors.transakBackgroundDark
+        : colors.transakBackgroundLight,
     },
   });
+};
 
 export default styleSheet;
diff --git a/app/components/UI/Ramp/Views/Checkout/Checkout.tsx b/app/components/UI/Ramp/Views/Checkout/Checkout.tsx
index 36112af360f..5e15e2c132f 100644
--- a/app/components/UI/Ramp/Views/Checkout/Checkout.tsx
+++ b/app/components/UI/Ramp/Views/Checkout/Checkout.tsx
@@ -44,6 +44,9 @@ import {
 } from '../../headless/headlessEntryNavigation';
 import { useStyles } from '../../../../hooks/useStyles';
 import styleSheet from './Checkout.styles';
+import { useTheme } from '../../../../../util/theme';
+import { AppThemeKey } from '../../../../../util/theme/models';
+import { colors } from '../../../../../styles/common';
 import Device from '../../../../../util/device';
 import { shouldStartLoadWithRequest } from '../../../../../util/browser';
 import { CHECKOUT_TEST_IDS } from './Checkout.testIds';
@@ -99,6 +102,14 @@ const Checkout = () => {
   const navigation = useNavigation();
   const params = useParams<CheckoutParams>();
   const { styles } = useStyles(styleSheet, {});
+  const { themeAppearance } = useTheme();
+  // Intentionally overrides the design-system BottomSheet background to match
+  // Transak's iframe, which we cannot style. Keeps the native chrome seamless
+  // with the embedded checkout flow. See colors.transak* in app/styles/common.ts.
+  const transakBgClassName =
+    themeAppearance === AppThemeKey.dark
+      ? `bg-[${colors.transakBackgroundDark}]`
+      : `bg-[${colors.transakBackgroundLight}]`;
   const { addOrder, addPrecreatedOrder, getOrderFromCallback } =
     useRampsOrders();
   const { trackEvent, createEventBuilder } = useAnalytics();
@@ -663,26 +674,22 @@ const Checkout = () => {
         keyboardAvoidingViewEnabled={false}
       >
         {sharedHeader}
-        <ScreenLayout>
-          <ScreenLayout.Body>
-            <ErrorView
-              description={error}
-              ctaOnPress={() => {
-                setKey((prevKey) => prevKey + 1);
-                setError('');
-                isRedirectionHandledRef.current = false;
-                lastLoadCompleteUrlRef.current = null;
-                loadUrlErrorsRef.current.clear();
-                loadStartTimeRef.current = null;
-                closeSourceRef.current = null;
-                urlHistoryRef.current = { current: null, previous: null };
-                stepIndexRef.current = 0;
-                previousNavStateUrlRef.current = null;
-              }}
-              location="Provider Webview"
-            />
-          </ScreenLayout.Body>
-        </ScreenLayout>
+        <ErrorView
+          description={error}
+          ctaOnPress={() => {
+            setKey((prevKey) => prevKey + 1);
+            setError('');
+            isRedirectionHandledRef.current = false;
+            lastLoadCompleteUrlRef.current = null;
+            loadUrlErrorsRef.current.clear();
+            loadStartTimeRef.current = null;
+            closeSourceRef.current = null;
+            urlHistoryRef.current = { current: null, previous: null };
+            stepIndexRef.current = 0;
+            previousNavStateUrlRef.current = null;
+          }}
+          location="Provider Webview"
+        />
       </BottomSheet>
     );
   }
@@ -695,6 +702,7 @@ const Checkout = () => {
         isFullscreen
         isInteractable={!Device.isAndroid()}
         keyboardAvoidingViewEnabled={false}
+        twClassName={transakBgClassName}
       >
         {sharedHeader}
         <WebView
diff --git a/app/styles/common.ts b/app/styles/common.ts
index 13de042dbbe..7949c79a0a5 100644
--- a/app/styles/common.ts
+++ b/app/styles/common.ts
@@ -27,6 +27,11 @@ export const colors = {
   gettingStartedPageBackgroundColor: '#EAC2FF',
   gettingStartedTextColor: '#3D065F',
   gettingStartedPageBackgroundColorLightMode: '#FFF2EB',
+  // Transak's iframe renders these background colors — values are set by Transak
+  // and outside our control. Used to match the BottomSheet surface so the
+  // checkout feels seamless. Update only if Transak changes their theme colors.
+  transakBackgroundDark: '#1a1a1a',
+  transakBackgroundLight: '#ffffff',
 };
 
 export const onboardingCarouselColors: Record<