diff --git a/packages/fxa-settings/src/components/AppLayout/index.test.tsx b/packages/fxa-settings/src/components/AppLayout/index.test.tsx
index 4ce9e23669e..b8456c12404 100644
--- a/packages/fxa-settings/src/components/AppLayout/index.test.tsx
+++ b/packages/fxa-settings/src/components/AppLayout/index.test.tsx
@@ -74,6 +74,26 @@ describe('<AppLayout />', () => {
     screen.getByText('Hello, world!');
   });
 
+  it('renders the page background white with the whiteBackground prop', async () => {
+    renderWithLocalizationProvider(
+      <AppLayout whiteBackground>
+        <p>Hello, world!</p>
+      </AppLayout>
+    );
+
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
+
+  it('leaves the page background at the default without the whiteBackground prop', async () => {
+    renderWithLocalizationProvider(
+      <AppLayout>
+        <p>Hello, world!</p>
+      </AppLayout>
+    );
+
+    expect(screen.getByTestId('app')).not.toHaveClass('bg-white');
+  });
+
   it('renders with integration prop and valid background image', async () => {
     renderWithLocalizationProvider(
       <AppLayout cmsInfo={MOCK_CMS_INFO_VALID_LINEAR_BG}>
diff --git a/packages/fxa-settings/src/components/AppLayout/index.tsx b/packages/fxa-settings/src/components/AppLayout/index.tsx
index f1d5887ec87..fc44216cfb9 100644
--- a/packages/fxa-settings/src/components/AppLayout/index.tsx
+++ b/packages/fxa-settings/src/components/AppLayout/index.tsx
@@ -30,6 +30,11 @@ type AppLayoutProps = {
    */
   wrapInCard?: boolean;
   splitLayout?: boolean;
+  /** Whether the page behind the card is white rather than the default grey.
+   * The mobile pairing screens need this: below `mobileLandscape` the card is
+   * transparent, so the page colour is the screen colour.
+   */
+  whiteBackground?: boolean;
   /** Whether to show the locale toggle in the footer */
   showLocaleToggle?: boolean;
   /** Whether to show a loading spinner instead of children.
@@ -48,6 +53,7 @@ export const AppLayout = ({
   widthClass,
   cmsInfo,
   splitLayout = false,
+  whiteBackground = false,
   wrapInCard = true,
   loading = false,
   setCurrentSplitLayout,
@@ -83,6 +89,7 @@ export const AppLayout = ({
       <div
         className={classNames(
           'flex min-h-screen flex-col items-center dark:bg-grey-900',
+          whiteBackground && 'bg-white',
           cmsBackgrounds?.defaultLayout &&
             'mobileLandscape:[background:var(--cms-bg)]',
           splitLayout && 'mobileLandscape:relative'
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.test.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.test.tsx
index 6b41e17fb13..7aa00d25579 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.test.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.test.tsx
@@ -86,4 +86,13 @@ describe('Pair2/Supplicant/ApproveSignIn page', () => {
 
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<Subject />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.tsx
index 91b832104a3..749ec23529b 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.tsx
@@ -41,7 +41,7 @@ export const ApproveSignIn = ({ remoteMetadata, onCancel }: ApproveSignInProps)
       region: 'region-foo',
       city: 'city-foo',
   };
-  return <AppLayout>
+  return <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/ConnectThisDevice/index.test.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/ConnectThisDevice/index.test.tsx
index 95940fc387b..d90741e3a47 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/ConnectThisDevice/index.test.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/ConnectThisDevice/index.test.tsx
@@ -97,4 +97,13 @@ describe('Pair2/Supplicant/ConnectThisDevice page', () => {
 
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<Subject />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/ConnectThisDevice/index.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/ConnectThisDevice/index.tsx
index 98b8d6d0976..63145f42803 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/ConnectThisDevice/index.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/ConnectThisDevice/index.tsx
@@ -49,7 +49,7 @@ export const ConnectThisDevice = ({
   const awaitingRemoteMetadata = remoteMetadata == null;
   email = email ?? 'foo@mozilla.com';
 
-  return <AppLayout>
+  return <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.test.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.test.tsx
index 53f53029520..12489924591 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.test.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.test.tsx
@@ -100,4 +100,13 @@ describe('Pair2/Supplicant/DownloadFirefox page', () => {
       LINK.FX_SYNC
     );
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<DownloadFirefox />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.tsx
index fc7644fa893..3ceb404dd7e 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.tsx
@@ -35,7 +35,7 @@ const learnMoreLink = (
  * mozilla.org already routes mobile visitors to the right store.
  */
 const DownloadFirefox = () => (
-  <AppLayout>
+  <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/ReadyToScan/index.test.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/ReadyToScan/index.test.tsx
index aba42e468dc..03ca6807c7a 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/ReadyToScan/index.test.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/ReadyToScan/index.test.tsx
@@ -89,4 +89,13 @@ describe('Pair2/Supplicant/ReadyToScan page', () => {
       'Firefox logo'
     ]);
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<ReadyToScan />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/ReadyToScan/index.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/ReadyToScan/index.tsx
index b7c60170e55..7e4312fcc43 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/ReadyToScan/index.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/ReadyToScan/index.tsx
@@ -22,7 +22,7 @@ import { SYNC_SUPPORT_URL } from '../../../../constants';
  * metrics that sibling pairing pages emit land with the flow wiring.
  */
 const ReadyToScan = () => (
-  <AppLayout>
+  <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/SyncSuccess/index.test.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/SyncSuccess/index.test.tsx
index d7735a064c2..29924ff7074 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/SyncSuccess/index.test.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/SyncSuccess/index.test.tsx
@@ -70,4 +70,13 @@ describe('Pair2/Supplicant/SyncSuccess page', () => {
 
     expect(onSyncSettings).toHaveBeenCalledTimes(1);
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<Subject />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/SyncSuccess/index.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/SyncSuccess/index.tsx
index 6934c72091e..a2f994f92ca 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/SyncSuccess/index.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/SyncSuccess/index.tsx
@@ -30,7 +30,7 @@ const SyncSuccess = ({
   onViewSyncedTabs,
   onSyncSettings,
 }: SyncSuccessProps) => {
-  return <AppLayout>
+  return <AppLayout whiteBackground>
     <div className="flex flex-col items-center text-center">
       <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />
 
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.test.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.test.tsx
index 8f04e490941..f615edc9d59 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.test.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.test.tsx
@@ -132,4 +132,13 @@ describe('Pair2/Supplicant/TimeoutAndCancel page', () => {
       timedOutHeading
     );
   });
+
+  it('renders the card on a white page background', () => {
+    renderWithLocalizationProvider(<Subject />);
+
+    // Below `mobileLandscape` the card is transparent, so the page colour is
+    // the colour the phone shows. The designs call for white, not the default
+    // grey the desktop cards sit on.
+    expect(screen.getByTestId('app')).toHaveClass('bg-white');
+  });
 });
diff --git a/packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.tsx b/packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.tsx
index f50a14f1a97..49df5e01a4b 100644
--- a/packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.tsx
@@ -78,7 +78,7 @@ const TimeoutAndCancel = ({ reason }: TimeoutAndCancelProps) => {
   const { headingFtlId, heading, descriptionFtlId, description } = COPY[reason];
 
   return (
-    <AppLayout>
+    <AppLayout whiteBackground>
       <div className="flex flex-col items-center text-center">
         <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" />