diff --git a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/en.ftl b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/en.ftl
index 7d9671621e4..37b8aa2fc2a 100644
--- a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/en.ftl
+++ b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/en.ftl
@@ -1,6 +1,8 @@
 ## Page
-next-new-user-step-1-2 = 1. Create a { -product-mozilla-account }
-next-new-user-sign-in-link-2 = Already have a { -product-mozilla-account }? <a>Sign in</a>
+checkout-signin-or-create = 1. Sign in or create a { -product-mozilla-account }
+checkout-create-account = Create a { -product-mozilla-account }
+next-continue-with-google-button = Continue with { -brand-google }
+next-continue-with-apple-button = Continue with { -brand-apple }
 next-payment-confirm-with-legal-links-static-3 = I authorize { -brand-mozilla } to charge my payment method for the amount shown, according to <termsOfServiceLink>Terms of Service</termsOfServiceLink> and <privacyNoticeLink>Privacy Notice</privacyNoticeLink>, until I cancel my subscription.
 
 next-payment-method-header = Choose your payment method
diff --git a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx
index 7c40d1d9475..9fed805cf4e 100644
--- a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx
+++ b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx
@@ -2,17 +2,28 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { revalidatePath } from 'next/cache';
 import { headers } from 'next/headers';
-import { BaseButton, ButtonVariant, PaymentSection } from '@fxa/payments/ui';
-import { getApp, SupportedPages,   CheckoutParams, } from '@fxa/payments/ui/server';
+import Image from 'next/image';
+import {
+  BaseButton,
+  ButtonVariant,
+  PaymentSection,
+  SignInForm,
+} from '@fxa/payments/ui';
+import {
+  getApp,
+  CheckoutParams,
+  SupportedPages,
+} from '@fxa/payments/ui/server';
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
+import AppleLogo from '@fxa/shared/assets/images/apple-logo.svg';
+import GoogleLogo from '@fxa/shared/assets/images/google-logo.svg';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
 import {
   getFakeCartData,
   getCMSContent,
 } from 'apps/payments/next/app/_lib/apiClient';
-import { auth, signIn } from 'apps/payments/next/auth';
+import { auth } from 'apps/payments/next/auth';
 
 export const dynamic = 'force-dynamic';
 
@@ -46,74 +57,37 @@ export default async function Checkout({ params }: { params: CheckoutParams }) {
         <>
           <h2 className="font-semibold text-grey-600 text-lg mt-10">
             {l10n.getString(
-              'next-new-user-step-1-2',
-              '1. Create a Mozilla account'
+              'checkout-signin-or-create',
+              '1. Sign in or create a Mozilla account'
             )}
           </h2>
 
-          <form
-            action={async () => {
-              'use server';
-              await signIn('fxa');
-            }}
-          >
-            <p className="text-grey-400 text-sm mt-2 pb-4 ">
-              {l10n.getFragmentWithSource(
-                'next-new-user-sign-in-link-2',
-                {
-                  elems: {
-                    a: (
-                      <button className="underline hover:text-grey-400">
-                        Sign in
-                      </button>
-                    ),
-                  },
-                },
-                <>
-                  Already have a Mozilla account?&nbsp;
-                  <button className="underline hover:text-grey-400">
-                    Sign in
-                  </button>
-                </>
-              )}
-            </p>
-          </form>
+          <SignInForm
+            newsletterLabel={cms.commonContent.newsletterLabelTextCode}
+          />
+
+          <h3 className="font-semibold text-grey-600 text-start">
+            {l10n.getString(
+              'checkout-create-account',
+              'Create a Mozilla account'
+            )}
+          </h3>
 
-          <div className="p-6 text-center">
-            {/**
-              Temporary Content. This will be replaced in M3b by the Passwordless
-              email signup form.
-            */}
-            <p className="mb-6">{`Current cart email: ${cart.email}`}</p>
-            <form
-              action={async (formData: FormData) => {
-                'use server';
-                const email =
-                  formData.get('email')?.toString() || 'test@example.com';
-                await getApp().getActionsService().updateCart({
-                  cartId: cart.id,
-                  version: cart.version,
-                  cartDetails: {
-                    email,
-                  },
-                });
-                revalidatePath('/');
-              }}
-            >
-              <input
-                type="email"
-                name="email"
-                className="w-full border rounded-md border-black/30 p-3 placeholder:text-grey-500 placeholder:font-normal focus:border focus:!border-black/30 focus:!shadow-[0_0_0_3px_rgba(10,132,255,0.3)] focus-visible:outline-none data-[invalid=true]:border-alert-red data-[invalid=true]:text-alert-red data-[invalid=true]:shadow-inputError"
-              />
-              <BaseButton
-                className="mt-10 w-full"
-                type="submit"
-                variant={ButtonVariant.Primary}
-              >
-                {' '}
-                Set email
-              </BaseButton>
-            </form>
+          <div className="flex flex-col gap-4 mt-6 mb-10 desktop:flex-row desktop:items-center desktop:justify-center">
+            <BaseButton variant={ButtonVariant.ThirdParty}>
+              <Image src={GoogleLogo} alt="" />
+              {l10n.getString(
+                'next-continue-with-google-button',
+                'Continue with Google'
+              )}
+            </BaseButton>
+            <BaseButton variant={ButtonVariant.ThirdParty}>
+              <Image src={AppleLogo} alt="" />
+              {l10n.getString(
+                'next-continue-with-apple-button',
+                'Continue with Apple'
+              )}
+            </BaseButton>
           </div>
 
           <hr className="mx-auto w-full border-grey-200" />
diff --git a/libs/payments/ui/src/index.ts b/libs/payments/ui/src/index.ts
index 4521086eb69..168ee079fb2 100644
--- a/libs/payments/ui/src/index.ts
+++ b/libs/payments/ui/src/index.ts
@@ -10,6 +10,7 @@ export * from './lib/client/components/CheckoutCheckbox';
 export * from './lib/client/components/CouponForm';
 export * from './lib/client/components/PaymentSection';
 export * from './lib/client/components/PurchaseDetails';
+export * from './lib/client/components/SignInForm';
 export * from './lib/client/components/SubmitButton';
 export * from './lib/client/components/LoadingSpinner';
 export * from './lib/client/components/MetricsWrapper';
diff --git a/libs/payments/ui/src/lib/client/components/BaseButton/index.tsx b/libs/payments/ui/src/lib/client/components/BaseButton/index.tsx
index 089bf195f97..23dc44b440f 100644
--- a/libs/payments/ui/src/lib/client/components/BaseButton/index.tsx
+++ b/libs/payments/ui/src/lib/client/components/BaseButton/index.tsx
@@ -5,6 +5,7 @@
 export enum ButtonVariant {
   Primary,
   Secondary,
+  ThirdParty,
 }
 
 interface BaseButtonProps
@@ -17,17 +18,21 @@ export function BaseButton({ children, variant, ...props }: BaseButtonProps) {
   let variantStyles = '';
   switch (variant) {
     case ButtonVariant.Primary:
-      variantStyles = 'bg-blue-500 hover:bg-blue-700 text-white';
+      variantStyles = 'bg-blue-500 font-semibold hover:bg-blue-700 text-white';
       break;
     case ButtonVariant.Secondary:
-      variantStyles = 'bg-grey-100 hover:bg-grey-200 text-black';
+      variantStyles = 'bg-grey-100 font-semibold hover:bg-grey-200 text-black';
+      break;
+    case ButtonVariant.ThirdParty:
+      variantStyles =
+        'w-full bg-transparent border border-grey-300 font-normal text-black hover:border-black';
       break;
   }
 
   return (
     <button
       {...props}
-      className={`flex items-center justify-center font-semibold h-12 rounded-md p-4 z-10 aria-disabled:relative aria-disabled:after:absolute aria-disabled:after:content-[''] aria-disabled:after:top-0 aria-disabled:after:left-0 aria-disabled:after:w-full aria-disabled:after:h-full aria-disabled:after:bg-white aria-disabled:after:opacity-50 aria-disabled:after:z-30 aria-disabled:border-none ${props.className} ${variantStyles}`}
+      className={`flex items-center justify-center h-12 rounded-md p-4 z-10 cursor-pointer aria-disabled:relative aria-disabled:after:absolute aria-disabled:after:content-[''] aria-disabled:after:top-0 aria-disabled:after:left-0 aria-disabled:after:w-full aria-disabled:after:h-full aria-disabled:after:bg-white aria-disabled:after:opacity-50 aria-disabled:after:z-30 aria-disabled:border-none ${props.className} ${variantStyles}`}
     >
       {children}
     </button>
diff --git a/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx b/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx
index 7a2a976b60b..a3d543ae7ff 100644
--- a/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx
+++ b/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx
@@ -169,6 +169,7 @@ export function CheckoutForm({
 
   return (
     <Form.Root
+      aria-label="Checkout form"
       onSubmit={submitHandler}
       onChange={() => {
         engageGlean();
diff --git a/libs/payments/ui/src/lib/client/components/SignInForm/en.ftl b/libs/payments/ui/src/lib/client/components/SignInForm/en.ftl
new file mode 100644
index 00000000000..df6707dbb1c
--- /dev/null
+++ b/libs/payments/ui/src/lib/client/components/SignInForm/en.ftl
@@ -0,0 +1,7 @@
+signin-form-continue-button = Continue
+signin-form-email-input = Enter your email
+
+next-new-user-subscribe-product-updates-mdnplus = I’d like to receive product news and updates from { -product-mdn-plus } and { -brand-mozilla }
+next-new-user-subscribe-product-updates-mozilla = I’d like to receive product news and updates from { -brand-mozilla }
+next-new-user-subscribe-product-updates-snp = I’d like to receive security and privacy news and updates from { -brand-mozilla }
+next-new-user-subscribe-product-assurance = We only use your email to create your account. We will never sell it to a third party.
diff --git a/libs/payments/ui/src/lib/client/components/SignInForm/images/shield.svg b/libs/payments/ui/src/lib/client/components/SignInForm/images/shield.svg
new file mode 100644
index 00000000000..4663d3454f1
--- /dev/null
+++ b/libs/payments/ui/src/lib/client/components/SignInForm/images/shield.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3508 18.5923C9.43574 16.2788 9.23239 13.3484 9.37494 9.71623L16 8.0413L22.6251 9.71623C22.7676 13.3484 22.5643 16.2788 21.6492 18.5923C20.7382 20.8955 19.0785 22.6903 16 23.9075C12.9216 22.6903 11.2618 20.8955 10.3508 18.5923ZM8.08913 8.66602L16 6.66602L23.9109 8.66602C24.3504 16.8882 23.3835 22.666 16 25.3327C8.61653 22.666 7.64964 16.8882 8.08913 8.66602ZM12.0446 11.7374L16 10.666V20.666C12.3083 19.2374 11.8248 16.1422 12.0446 11.7374Z" fill="#00736C"/>
+</svg>
diff --git a/libs/payments/ui/src/lib/client/components/SignInForm/index.tsx b/libs/payments/ui/src/lib/client/components/SignInForm/index.tsx
new file mode 100644
index 00000000000..5dc1d9a4d3f
--- /dev/null
+++ b/libs/payments/ui/src/lib/client/components/SignInForm/index.tsx
@@ -0,0 +1,107 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use client';
+
+import { Localized } from '@fluent/react';
+import * as Form from '@radix-ui/react-form';
+import Image from 'next/image';
+import { BaseButton, ButtonVariant } from '@fxa/payments/ui';
+import shieldIcon from './images/shield.svg';
+
+const DEFAULT_NEWSLETTER_STRING_ID =
+  'next-new-user-subscribe-product-updates-mozilla';
+
+/**
+ * The newsletter string is a configurable field. This function returns the correct
+ * localization string ID and fallback text for the different newsletter string ID options.
+ */
+function getNewsletterStringInfo(newsletterLabelTextCode: string) {
+  switch (newsletterLabelTextCode) {
+    case 'mdnplus':
+      return {
+        newsletterStringId: 'next-new-user-subscribe-product-updates-mdnplus',
+        newsletterStringFallbackText: `I’d like to receive product news and updates from MDN Plus and Mozilla`,
+      };
+    case 'snp':
+      return {
+        newsletterStringId: 'next-new-user-subscribe-product-updates-snp',
+        newsletterStringFallbackText: `I’d like to receive security and privacy news and updates from Mozilla`,
+      };
+    default:
+      return {
+        newsletterStringId: DEFAULT_NEWSLETTER_STRING_ID,
+        newsletterStringFallbackText: `I’d like to receive product news and updates from Mozilla`,
+      };
+  }
+}
+
+interface SignInFormProps {
+  newsletterLabel: string;
+}
+
+export const SignInForm = ({ newsletterLabel }: SignInFormProps) => {
+  const { newsletterStringId, newsletterStringFallbackText } =
+    getNewsletterStringInfo(newsletterLabel);
+  return (
+    <Form.Root aria-label="Sign-in/sign-up form">
+      <Form.Field name="email" className="my-6">
+        <Form.Label className="text-grey-400 block mb-1 text-start">
+          <Localized id="checkout-enter-your-email">Enter your email</Localized>
+        </Form.Label>
+        <Form.Control asChild>
+          <input
+            className="w-full border rounded-md border-black/30 p-3 placeholder:text-grey-500 placeholder:font-normal focus:border focus:!border-black/30 focus:!shadow-[0_0_0_3px_rgba(10,132,255,0.3)] focus-visible:outline-none data-[invalid=true]:border-alert-red data-[invalid=true]:text-alert-red data-[invalid=true]:shadow-inputError"
+            type="email"
+            data-testid="email"
+            aria-required
+          />
+        </Form.Control>
+      </Form.Field>
+
+      <Form.Field
+        name="newsletter"
+        className="flex gap-4 items-center mb-4"
+        data-testid="new-user-subscribe-product-updates"
+      >
+        <Form.Control asChild>
+          <input
+            id="newsletter-checkbox"
+            type="checkbox"
+            name="confirm"
+            className="grow-0 shrink-0 basis-4 scale-150 cursor-pointer"
+          />
+        </Form.Control>
+
+        <Form.Label htmlFor="newsletter-checkbox" className="text-sm">
+          <Localized id={newsletterStringId}>
+            {newsletterStringFallbackText}
+          </Localized>
+        </Form.Label>
+      </Form.Field>
+
+      <Form.Field
+        name="assurance"
+        className="flex items-center gap-4 text-sm"
+        data-testid="assurance-copy"
+      >
+        <Image src={shieldIcon} alt="" className="-mx-2" />
+        <Localized id="next-new-user-subscribe-product-assurance">
+          We only use your email to create your account. We will never sell it
+          to a third party.
+        </Localized>
+      </Form.Field>
+
+      <Form.Submit asChild>
+        <BaseButton
+          className="mt-6 my-8"
+          type="submit"
+          variant={ButtonVariant.Primary}
+        >
+          <Localized id="continue">Continue</Localized>
+        </BaseButton>
+      </Form.Submit>
+    </Form.Root>
+  );
+};
diff --git a/libs/shared/assets/src/images/apple-logo.svg b/libs/shared/assets/src/images/apple-logo.svg
new file mode 100644
index 00000000000..8565622109c
--- /dev/null
+++ b/libs/shared/assets/src/images/apple-logo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="46" width="46" viewBox="7 0 17 44">
+    <path d="M15.71 14.885c.858 0 1.933-.58 2.573-1.353.58-.7 1.002-1.68 1.002-2.658a1.79 1.79 0 0 0-.036-.374c-.954.036-2.102.64-2.79 1.45-.544.615-1.039 1.582-1.039 2.572 0 .145.024.29.036.338a1.3 1.3 0 0 0 .254.025ZM12.69 29.5c1.172 0 1.691-.785 3.153-.785 1.486 0 1.812.76 3.116.76 1.28 0 2.138-1.183 2.947-2.342.906-1.33 1.28-2.634 1.305-2.694-.085-.024-2.537-1.027-2.537-3.841 0-2.44 1.933-3.54 2.042-3.624-1.28-1.836-3.225-1.884-3.757-1.884-1.437 0-2.609.87-3.346.87-.797 0-1.848-.822-3.092-.822-2.367 0-4.771 1.957-4.771 5.653 0 2.295.894 4.723 1.993 6.293.942 1.329 1.764 2.416 2.947 2.416Z"/>
+</svg>
\ No newline at end of file
diff --git a/libs/shared/assets/src/images/google-logo.svg b/libs/shared/assets/src/images/google-logo.svg
new file mode 100644
index 00000000000..141ace815c4
--- /dev/null
+++ b/libs/shared/assets/src/images/google-logo.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="46" height="46">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M31.64 23.205c0-.639-.057-1.252-.164-1.841H23v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z"
+              fill="#4285F4"/>
+        <path d="M23 32c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711h-3.007v2.332A8.997 8.997 0 0 0 23 32Z"
+              fill="#34A853"/>
+        <path d="M17.964 24.71a5.41 5.41 0 0 1-.282-1.71c0-.593.102-1.17.282-1.71v-2.332h-3.007A8.996 8.996 0 0 0 14 23c0 1.452.348 2.827.957 4.042l3.007-2.332Z"
+              fill="#FBBC05"/>
+        <path d="M23 17.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C27.463 14.891 25.426 14 23 14a8.997 8.997 0 0 0-8.043 4.958l3.007 2.332c.708-2.127 2.692-3.71 5.036-3.71Z"
+              fill="#EA4335"/>
+        <path d="M14 14h18v18H14V14Z"/>
+    </g>
+</svg>