diff --git a/apps/payments/next/app/[locale]/subscriptions/en.ftl b/apps/payments/next/app/[locale]/subscriptions/en.ftl
new file mode 100644
index 00000000000..23df65a5d22
--- /dev/null
+++ b/apps/payments/next/app/[locale]/subscriptions/en.ftl
@@ -0,0 +1,3 @@
+## Layout - Subscription Management
+
+subscription-management-account-profile-picture = Account profile picture
diff --git a/apps/payments/next/app/[locale]/subscriptions/layout.tsx b/apps/payments/next/app/[locale]/subscriptions/layout.tsx
index fddb94dea6f..36f8ca1cf94 100644
--- a/apps/payments/next/app/[locale]/subscriptions/layout.tsx
+++ b/apps/payments/next/app/[locale]/subscriptions/layout.tsx
@@ -2,15 +2,27 @@
  * 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 { headers } from 'next/headers';
+import Image from 'next/image';
+
 import { Breadcrumbs, Header } from '@fxa/payments/ui';
+import { getApp } from '@fxa/payments/ui/server';
+import defaultAvatarIcon from '@fxa/shared/assets/images/avatar-default.svg';
 import { auth } from 'apps/payments/next/auth';
 import { config } from 'apps/payments/next/config';
 
 export default async function SubscriptionsLayout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: {
+    locale: string;
+  };
 }) {
+  const { locale } = params;
+  const acceptLanguage = headers().get('accept-language');
+  const l10n = getApp().getL10n(acceptLanguage, locale);
   const session = await auth();
 
   return (
@@ -26,7 +38,41 @@ export default async function SubscriptionsLayout({
         paymentsNextUrl={config.paymentsNextHostedUrl}
       />
 
-      <div className="flex justify-center">{children}</div>
+      <div className="flex justify-center">
+        <div className="w-full py-6 text-grey-600 tablet:bg-white tablet:w-[640px] tablet:rounded-2xl tablet:shadow-sm tablet:shadow-grey-300 tablet:border-t-0 tablet:clip-shadow">
+          <section
+            aria-labelledby="profile-heading"
+            className="flex items-center gap-4 px-4 tablet:px-8"
+          >
+            <Image
+              unoptimized={true}
+              src={session?.user?.image ?? defaultAvatarIcon}
+              alt={l10n.getString(
+                'subscription-management-account-profile-picture',
+                'Account profile picture'
+              )}
+              width="48"
+              height="48"
+              className="w-12 h-12 rounded-full tablet:w-16 tablet:h-16"
+            />
+            <h1
+              id="profile-heading"
+              className="overflow-hidden text-start tablet:text-xl"
+            >
+              <div className="font-semibold mb-1 overflow-hidden text-ellipsis text-nowrap">
+                {session?.user?.name || session?.user?.email}
+              </div>
+              {session?.user?.name && (
+                <div className="font-normal overflow-hidden text-base text-ellipsis text-grey-400 text-nowrap mb-0">
+                  {session?.user?.email}
+                </div>
+              )}
+            </h1>
+          </section>
+          <hr className="border-b border-grey-50 my-6" aria-hidden="true" />
+          {children}
+        </div>
+      </div>
     </>
   );
 }
diff --git a/apps/payments/next/app/[locale]/subscriptions/manage/en.ftl b/apps/payments/next/app/[locale]/subscriptions/manage/en.ftl
index c53484cc18c..6e159557af5 100644
--- a/apps/payments/next/app/[locale]/subscriptions/manage/en.ftl
+++ b/apps/payments/next/app/[locale]/subscriptions/manage/en.ftl
@@ -1,43 +1,41 @@
 ## Page - Subscription Management
 
-subscription-management-page-paypal-error-banner-title-invalid-payment-information = Invalid payment information
-subscription-management-page-paypal-error-banner-message-account-error = There is an error with your account.
-subscription-management-button-manage-payment-method-1 = Manage payment method
-subscription-management-page-banner-warning-title-no-payment-method = No payment method added
-subscription-management-page-banner-warning-link-no-payment-method = Add a payment method
-subscription-management-subscriptions-heading = Subscriptions
-# Heading for mobile only quick links menu
-subscription-management-jump-to-heading = Jump to
-subscription-management-nav-payment-details = Payment details
-subscription-management-nav-active-subscriptions = Active subscriptions
-subscription-management-payment-details-heading = Payment details
-subscription-management-email-label = Email
-subscription-management-credit-balance-label = Credit balance
-subscription-management-credit-balance-message = Credit will automatically be applied to future invoices
-subscription-management-payment-method-label = Payment method
+subscription-management-account-credit-balance-heading = Account credit balance
+subscription-management-account-credit-balance-message = Credit will be automatically applied towards future invoices
+subscription-management-payment-information-heading = Payment Information
 subscription-management-button-add-payment-method-aria = Add payment method
 subscription-management-button-add-payment-method = Add
-subscription-management-page-warning-message-no-payment-method = Please add a payment method to avoid interruption to your subscriptions.
+subscription-management-button-change-payment-method-aria = Change payment method
+subscription-management-button-change-payment-method = Change
 subscription-management-button-manage-payment-method-aria = Manage payment method
 subscription-management-button-manage-payment-method = Manage
 # $last4 (String) - Last four numbers of credit card
 subscription-management-card-ending-in = Card ending in { $last4 }
 # $expirationDate (Date) - Payment card's expiration date
 subscription-management-card-expires-date = Expires { $expirationDate }
-subscription-management-error-paypal-billing-agreement = There is an issue with your PayPal account. Please resolve the issue to maintain your active subscriptions.
-subscription-management-active-subscriptions-heading = Active subscriptions
-subscription-management-you-have-no-active-subscriptions = You have no active subscriptions
-subscription-management-new-subs-will-appear-here = New subscriptions will appear here.
-subscription-management-your-active-subscriptions-aria = Your active subscriptions
+subscription-management-subscriptions-heading = Subscriptions
+subscription-management-your-subscriptions-aria = Your subscriptions
+subscription-management-no-subscriptions = You don’t have any subscriptions yet
 subscription-management-button-support = Get help
 # $productName (String) - The name of the subscribed product, e.g. Mozilla VPN
 subscription-management-button-support-aria = Get help for { $productName }
 subscription-management-your-apple-iap-subscriptions-aria = Your { -brand-apple } In-App Subscriptions
-subscription-management-apple-in-app-purchase-2 = { -brand-apple } in-app purchase
+subscription-management-apple-in-app-purchase-1 = { -brand-apple }: in-app purchase
 subscription-management-your-google-iap-subscriptions-aria = Your { -brand-google } In-App Subscriptions
-subscription-management-google-in-app-purchase-2 = { -brand-google } in-app purchase
+subscription-management-google-in-app-purchase-1 = { -brand-google }: in-app purchase
 # $date (String) - Date of next bill
-subscription-management-iap-sub-expires-on-expiry-date = Expires on { $date }
+subscription-management-iap-sub-next-bill-is-due = Next bill is due <strong>{ $date }</strong>
+# $date (String) - Date of In-App purchase expires
+subscription-management-iap-sub-will-expire-on = Your subscription will expire on <strong>{ $date }</strong>
 # $productName (String) - The name of the subscribed product, e.g. Mozilla VPN
 subscription-management-button-manage-subscription-aria = Manage subscription for { $productName }
-subscription-management-button-manage-subscription-1 = Manage subscription
+subscription-management-button-manage-subscription = Manage
+## $productName (String) - The name of the subscribed product, e.g. Mozilla VPN
+## Daily/Weekly/Monthly/Yearly refers to the subscription interval/amount of time between billing occurrences
+subscription-management-page-subscription-interval-daily = { $productName } (daily)
+subscription-management-page-subscription-interval-weekly = { $productName } (weekly)
+subscription-management-page-subscription-interval-monthly = { $productName } (monthly)
+subscription-management-page-subscription-interval-halfyearly = { $productName } (6-month)
+subscription-management-page-subscription-interval-yearly = { $productName } (yearly)
+subscription-management-page-paypal-error-banner = Invalid payment information; there is an error with your account.
+subscription-management-page-paypal-error-banner-link = Manage
diff --git a/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx b/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx
index ce8085cf6ad..e7342393e20 100644
--- a/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx
+++ b/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx
@@ -10,8 +10,7 @@ import React from 'react';
 import { URLSearchParams } from 'url';
 
 import {
-  Banner,
-  BannerVariant,
+  AlertBar,
   formatPlanInterval,
   getCardIcon,
   ManageParams,
@@ -19,11 +18,7 @@ import {
 } from '@fxa/payments/ui';
 import { getSubManPageContentAction } from '@fxa/payments/ui/actions';
 import { getApp } from '@fxa/payments/ui/server';
-import alertIcon from '@fxa/shared/assets/images/alert-yellow.svg';
-import arrowDownIcon from '@fxa/shared/assets/images/arrow-down.svg';
-import iapAppleLogo from '@fxa/shared/assets/images/apple-logo.svg';
-import iapGoogleLogo from '@fxa/shared/assets/images/google-logo.svg';
-import newWindowIcon from '@fxa/shared/assets/images/new-window.svg';
+import helpIcon from '@fxa/shared/assets/images/help2.svg';
 import { LinkExternal } from '@fxa/shared/react';
 import { auth } from 'apps/payments/next/auth';
 import { config } from 'apps/payments/next/config';
@@ -72,458 +67,323 @@ export default async function Manage({
     expMonth && expYear
       ? l10n.getLocalizedMonthYearString(expMonth, expYear, locale)
       : undefined;
+
+  const CSS_LINK_SHARED =
+    "flex items-center justify-center h-10 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 font-semibold";
+  const CSS_PRIMARY_LINK = `${CSS_LINK_SHARED} bg-blue-500 hover:bg-blue-700 text-white`;
+  const CSS_SECONDARY_LINK = `${CSS_LINK_SHARED} bg-grey-100 hover:bg-grey-200 text-black`;
+  const CSS_ERROR_LINK = `${CSS_LINK_SHARED} bg-red-500 hover:bg-red-600 text-white`;
+
+  const getSubscriptionIntervalFtlId = (interval: string) => {
+    switch (interval) {
+      case 'daily':
+        return 'subscription-management-page-subscription-interval-daily';
+      case 'weekly':
+        return 'subscription-management-page-subscription-interval-weekly';
+      case 'monthly':
+      default:
+        return 'subscription-management-page-subscription-interval-monthly';
+      case 'halfyearly':
+        return 'subscription-management-page-subscription-interval-halfyearly';
+      case 'yearly':
+        return 'subscription-management-page-subscription-interval-yearly';
+    }
+  };
   return (
-    <div
-      className="w-full tablet:px-8 desktop:max-w-[1024px]"
-      aria-labelledby="subscription-management"
-    >
+    <>
       {isPaypalBillingAgreementError && (
-        <Banner variant={BannerVariant.Error}>
-          <div className="leading-6 text-base">
-            <p className="font-bold">
-              {l10n.getString(
-                'subscription-management-page-paypal-error-banner-title-invalid-payment-information',
-                'Invalid payment information'
-              )}
-            </p>
-
-            <p className="font-normal">
-              {l10n.getString(
-                'subscription-management-page-paypal-error-banner-message-account-error',
-                'There is an error with your account.'
-              )}
-            </p>
+        <AlertBar>
+          <span className={'font-semibold'}>
+            {l10n.getString(
+              'subscription-management-page-paypal-error-banner',
+              'Invalid payment information; there is an error with your account.'
+            )}
 
             <LinkExternal
-              className="font-normal text-blue-500 hover:text-blue-600 cursor-pointer underline"
+              className={'underline hover:text-grey-100 pl-1'}
               href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/paypal`}
             >
               {l10n.getString(
-                'subscription-management-button-manage-payment-method-1',
-                'Manage payment method'
+                'subscription-management-page-paypal-error-banner-link',
+                'Manage'
               )}
             </LinkExternal>
-          </div>
-        </Banner>
+          </span>
+        </AlertBar>
       )}
-      {isStripeCustomer &&
-        !defaultPaymentMethod &&
-        subscriptions.length > 0 && (
-          <Banner variant={BannerVariant.Warning}>
-            <div className="leading-6 text-base">
-              <p className="font-bold">
-                {l10n.getString(
-                  'subscription-management-page-banner-warning-title-no-payment-method',
-                  'No payment method added'
-                )}
-              </p>
-              <p className="font-normal">
-                {l10n.getString(
-                  'subscription-management-page-warning-message-no-payment-method',
-                  'Please add a payment method to avoid interruption to your subscriptions.'
-                )}
-              </p>
-              <Link
-                className="font-normal text-blue-500 hover:text-blue-600 cursor-pointer underline"
-                href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
-              >
+      {accountCreditBalance.balance > 0 &&
+        accountCreditBalance.currency !== null && (
+          <>
+            <section
+              className="px-4 tablet:px-8"
+              aria-labelledby="account-credit-balance-heading"
+            >
+              <div className="flex items-center gap-2 mb-4">
+                <h2
+                  id="account-credit-balance-heading"
+                  className="font-semibold"
+                >
+                  {l10n.getString(
+                    'subscription-management-account-credit-balance-heading',
+                    'Account credit balance'
+                  )}
+                </h2>
+                <span>
+                  {l10n.getLocalizedCurrencyString(
+                    accountCreditBalance.balance,
+                    accountCreditBalance.currency,
+                    locale
+                  )}
+                </span>
+              </div>
+              <div className="text-sm">
                 {l10n.getString(
-                  'subscription-management-page-banner-warning-link-no-payment-method',
-                  'Add a payment method'
+                  'subscription-management-account-credit-balance-message',
+                  'Credit will be automatically applied towards future invoices'
                 )}
-              </Link>
-            </div>
-          </Banner>
-        )}
-      <h1
-        id="subscription-management"
-        className="font-bold leading-6 mt-8 px-4 text-xl tablet:px-6"
-      >
-        {l10n.getString(
-          'subscription-management-subscriptions-heading',
-          'Subscriptions'
+              </div>
+            </section>
+
+            <hr className="border-b border-grey-50 my-6" aria-hidden="true" />
+          </>
         )}
-      </h1>
 
-      {(subscriptions.length > 0 ||
-        appleIapSubscriptions.length > 0 ||
-        googleIapSubscriptions.length > 0) && (
-        <nav
-          className="px-4 tablet:hidden"
-          aria-labelledby="mobile-quick-links-menu"
-        >
-          <h2 id="mobile-quick-links-menu" className="font-bold my-6">
-            {l10n.getString(
-              'subscription-management-jump-to-heading',
-              'Jump to'
-            )}
-          </h2>
-          <ul className="flex flex-col gap-6">
-            <li>
-              <Link
-                className="flex items-center justify-between text-blue-500 hover:text-blue-600 cursor-pointer underline"
-                href="#payment-details"
+      {isStripeCustomer && (
+        <>
+          <section
+            className="px-4 tablet:px-8"
+            aria-labelledby="payment-information-heading"
+          >
+            <div className="flex items-center justify-between">
+              <h2
+                id="payment-information-heading"
+                className={`font-semibold ${defaultPaymentMethod ? 'mb-4' : 'mb-0'}`}
               >
                 {l10n.getString(
-                  'subscription-management-nav-payment-details',
-                  'Payment details'
+                  'subscription-management-payment-information-heading',
+                  'Payment Information'
                 )}
-                <Image
-                  src={arrowDownIcon}
-                  alt=""
-                  width={12}
-                  height={12}
-                  aria-hidden="true"
-                />
-              </Link>
-            </li>
-            {(subscriptions.length > 0 ||
-              appleIapSubscriptions.length > 0 ||
-              googleIapSubscriptions.length > 0) && (
-              <li>
+              </h2>
+              {!defaultPaymentMethod && (
+                <Link
+                  className={CSS_PRIMARY_LINK}
+                  href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
+                  aria-label={l10n.getString(
+                    'subscription-management-button-add-payment-method-aria',
+                    'Add payment method'
+                  )}
+                >
+                  <span>
+                    {l10n.getString(
+                      'subscription-management-button-add-payment-method',
+                      'Add'
+                    )}
+                  </span>
+                </Link>
+              )}
+            </div>
+
+            {type === 'card' && walletType && (
+              <div className="flex items-center justify-between">
+                <div className="leading-5 text-sm">
+                  <div className="flex items-center gap-3 py-2">
+                    <Image
+                      src={
+                        getCardIcon(
+                          walletType === 'apple_pay'
+                            ? 'apple_pay'
+                            : 'google_pay',
+                          l10n
+                        ).img
+                      }
+                      alt={
+                        walletType === 'apple_pay'
+                          ? l10n.getString(
+                              'apple-pay-logo-alt-text',
+                              'Apple Pay logo'
+                            )
+                          : l10n.getString(
+                              'google-pay-logo-alt-text',
+                              'Google Pay logo'
+                            )
+                      }
+                      width={40}
+                      height={24}
+                    />
+                  </div>
+                </div>
                 <Link
-                  className="flex items-center justify-between text-blue-500 hover:text-blue-600 cursor-pointer underline"
-                  href="#active-subscriptions"
+                  className={CSS_SECONDARY_LINK}
+                  href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
+                  aria-label={l10n.getString(
+                    'subscription-management-button-change-payment-method-aria',
+                    'Change payment method'
+                  )}
                 >
                   {l10n.getString(
-                    'subscription-management-nav-active-subscriptions',
-                    'Active subscriptions'
+                    'subscription-management-button-change-payment-method',
+                    'Change'
                   )}
-                  <Image
-                    src={arrowDownIcon}
-                    alt=""
-                    width={12}
-                    height={12}
-                    aria-hidden="true"
-                  />
                 </Link>
-              </li>
+              </div>
             )}
-          </ul>
-        </nav>
-      )}
 
-      <section
-        id="payment-details"
-        className="scroll-mt-16"
-        aria-labelledby="payment-details-heading"
-      >
-        <h2
-          id="payment-details-heading"
-          className="font-bold px-4 pt-8 pb-4 text-lg tablet:px-6"
-        >
-          {l10n.getString(
-            'subscription-management-payment-details-heading',
-            'Payment details'
-          )}
-        </h2>
-        <div className="w-full py-6 text-grey-600 bg-white rounded-xl border border-grey-200 opacity-100 shadow-[0_0_16px_0_rgba(0,0,0,0.08)] tablet:px-6 tablet:py-8">
-          <div className="px-4 tablet:px-0">
-            <div className="flex flex-col gap-2 tablet:flex-row tablet:items-center">
-              <h3 className="tablet:min-w-[160px]">
-                {l10n.getString('subscription-management-email-label', 'Email')}
-              </h3>
-              <p className="font-bold">{session?.user?.email}</p>
-            </div>
-
-            {accountCreditBalance.balance > 0 &&
-              accountCreditBalance.currency !== null && (
-                <>
-                  <div
-                    className="border-none h-px bg-grey-100 my-5 tablet:my-8"
-                    role="separator"
-                    aria-hidden="true"
-                  ></div>
-
-                  <div className="flex flex-col gap-2 items-start tablet:flex-row tablet:items-start">
-                    <h3 className="tablet:min-w-[160px]">
+            {type === 'card' && brand && !walletType && (
+              <div className="flex items-center justify-between">
+                <div className="leading-5 text-sm">
+                  <Image
+                    className="py-2"
+                    src={getCardIcon(brand, l10n).img}
+                    alt={getCardIcon(brand, l10n).altText}
+                    width={40}
+                    height={24}
+                  />
+                  {last4 && (
+                    <div className="pt-2">
                       {l10n.getString(
-                        'subscription-management-credit-balance-label',
-                        'Credit balance'
+                        'subscription-management-card-ending-in',
+                        { last4 },
+                        `Card ending in ${last4}`
                       )}
-                    </h3>
-                    <div className="leading-6">
-                      <p className="font-bold">
-                        {l10n.getLocalizedCurrencyString(
-                          accountCreditBalance.balance,
-                          accountCreditBalance.currency,
-                          locale
-                        )}
-                      </p>
-                      <p className="text-sm">
-                        {l10n.getString(
-                          'subscription-management-credit-balance-message',
-                          'Credit will automatically be applied to future invoices'
-                        )}
-                      </p>
                     </div>
-                  </div>
-                </>
-              )}
-
-            {isStripeCustomer &&
-              (defaultPaymentMethod || subscriptions.length > 0) && (
-                <>
-                  <div
-                    className="border-none h-px bg-grey-100 my-5 tablet:my-8"
-                    role="separator"
-                    aria-hidden="true"
-                  ></div>
-                  <div
-                    className={`w-full flex flex-col gap-2 tablet:flex-row ${(type === 'card' && brand && !walletType) || isPaypalBillingAgreementError ? 'tablet:items-start' : 'tablet:items-center'}`}
-                  >
-                    <h3 className="tablet:min-w-[160px]">
+                  )}
+                  {expirationDate && (
+                    <div>
                       {l10n.getString(
-                        'subscription-management-payment-method-label',
-                        'Payment method'
+                        'subscription-management-card-expires-date',
+                        { expirationDate },
+                        `Expires ${expirationDate}`
                       )}
-                    </h3>
+                    </div>
+                  )}
+                </div>
+                <Link
+                  className={CSS_SECONDARY_LINK}
+                  href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
+                  aria-label={l10n.getString(
+                    'subscription-management-button-change-payment-method-aria',
+                    'Change payment method'
+                  )}
+                >
+                  {l10n.getString(
+                    'subscription-management-button-change-payment-method',
+                    'Change'
+                  )}
+                </Link>
+              </div>
+            )}
 
-                    {!defaultPaymentMethod && (
-                      <div className="w-full flex flex-col gap-2 tablet:flex-row tablet:items-center tablet:justify-between">
-                        <p>
-                          {l10n.getString(
-                            'subscription-management-page-warning-message-no-payment-method',
-                            'Please add a payment method to avoid interruption to your subscriptions.'
-                          )}
-                        </p>
-                        <Link
-                          className="bg-blue-500 border border-blue-600 box-border font-bold font-header inline-block rounded text-center text-white w-full py-2 px-5 tablet:w-auto"
-                          href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
-                          aria-label={l10n.getString(
-                            'subscription-management-button-add-payment-method-aria',
-                            'Add payment method'
-                          )}
-                        >
-                          <span>
-                            {l10n.getString(
-                              'subscription-management-button-add-payment-method',
-                              'Add'
-                            )}
-                          </span>
-                        </Link>
-                      </div>
-                    )}
+            {type === 'link' && (
+              <div className="flex items-center justify-between">
+                <div className="leading-5 text-sm">
+                  <Image
+                    src={getCardIcon('link', l10n).img}
+                    alt={l10n.getString('link-logo-alt-text', 'Link logo')}
+                    width={70}
+                    height={24}
+                  />
+                </div>
+                <Link
+                  className={CSS_SECONDARY_LINK}
+                  href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
+                  aria-label={l10n.getString(
+                    'subscription-management-button-change-payment-method-aria',
+                    'Change payment method'
+                  )}
+                >
+                  {l10n.getString(
+                    'subscription-management-button-change-payment-method',
+                    'Change'
+                  )}
+                </Link>
+              </div>
+            )}
 
-                    {type === 'card' && walletType && (
-                      <div className="w-full flex items-center justify-between">
-                        <Image
-                          src={
-                            getCardIcon(
-                              walletType === 'apple_pay'
-                                ? 'apple_pay'
-                                : 'google_pay',
-                              l10n
-                            ).img
-                          }
-                          alt={
-                            walletType === 'apple_pay'
-                              ? l10n.getString(
-                                  'apple-pay-logo-alt-text',
-                                  'Apple Pay logo'
-                                )
-                              : l10n.getString(
-                                  'google-pay-logo-alt-text',
-                                  'Google Pay logo'
-                                )
-                          }
-                          width={45}
-                          height={24}
-                        />
-                        <Link
-                          className="bg-grey-10 border border-grey-200 box-border font-bold font-header inline-block rounded text-center py-2 px-5 w-auto"
-                          href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
-                          aria-label={l10n.getString(
-                            'subscription-management-button-manage-payment-method-aria',
-                            'Manage payment method'
-                          )}
-                        >
-                          {l10n.getString(
-                            'subscription-management-button-manage-payment-method',
-                            'Manage'
-                          )}
-                        </Link>
-                      </div>
-                    )}
+            {type === 'external_paypal' && brand && (
+              <div className="flex items-center justify-between">
+                <div className="leading-5 text-sm">
+                  <Image
+                    className="py-2"
+                    src={getCardIcon('paypal', l10n).img}
+                    alt={l10n.getString('paypal-logo-alt-text', 'PayPal logo')}
+                    width={91}
+                    height={24}
+                  />
+                </div>
 
-                    {type === 'card' && brand && !walletType && (
-                      <div className="w-full flex flex-col leading-6 tablet:flex-row tablet:items-center tablet:justify-between">
-                        <div>
-                          <div className="flex items-center gap-2">
-                            <Image
-                              src={getCardIcon(brand, l10n).img}
-                              alt={getCardIcon(brand, l10n).altText}
-                              width={32}
-                              height={20}
-                            />
-                            {last4 && (
-                              <span className="font-bold">
-                                {l10n.getString(
-                                  'subscription-management-card-ending-in',
-                                  { last4 },
-                                  `Card ending in ${last4}`
-                                )}
-                              </span>
-                            )}
-                          </div>
-                          {expirationDate && (
-                            <p className="pt-1 pb-2 tablet:pb-0 text-sm">
-                              {l10n.getString(
-                                'subscription-management-card-expires-date',
-                                { expirationDate },
-                                `Expires ${expirationDate}`
-                              )}
-                            </p>
-                          )}
-                        </div>
-                        <Link
-                          className="bg-grey-10 border border-grey-200 box-border font-bold font-header inline-block rounded text-center w-full py-2 px-5 tablet:w-auto"
-                          href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
-                          aria-label={l10n.getString(
-                            'subscription-management-button-manage-payment-method-aria',
-                            'Manage payment method'
-                          )}
-                        >
-                          {l10n.getString(
-                            'subscription-management-button-manage-payment-method',
-                            'Manage'
-                          )}
-                        </Link>
-                      </div>
+                {isPaypalBillingAgreementError ? (
+                  <LinkExternal
+                    className={CSS_ERROR_LINK}
+                    href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/paypal`}
+                    aria-label={l10n.getString(
+                      'subscription-management-button-manage-payment-method-aria',
+                      'Manage payment method'
                     )}
-
-                    {type === 'link' && (
-                      <div className="w-full flex items-center justify-between">
-                        <Image
-                          src={getCardIcon('link', l10n).img}
-                          alt={l10n.getString(
-                            'link-logo-alt-text',
-                            'Link logo'
-                          )}
-                          width={72}
-                          height={24}
-                        />
-                        <Link
-                          className="bg-grey-10 border border-grey-200 box-border font-bold font-header inline-block rounded text-center py-2 px-5 w-auto"
-                          href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/stripe`}
-                          aria-label={l10n.getString(
-                            'subscription-management-button-manage-payment-method-aria',
-                            'Manage payment method'
-                          )}
-                        >
-                          {l10n.getString(
-                            'subscription-management-button-manage-payment-method',
-                            'Manage'
-                          )}
-                        </Link>
-                      </div>
+                  >
+                    <span>
+                      {l10n.getString(
+                        'subscription-management-button-manage-payment-method',
+                        'Manage'
+                      )}
+                    </span>
+                  </LinkExternal>
+                ) : (
+                  <LinkExternal
+                    className={CSS_SECONDARY_LINK}
+                    href={`${config.csp.paypalApi}/myaccount/autopay/connect/${billingAgreementId}`}
+                    aria-label={l10n.getString(
+                      'subscription-management-button-change-payment-method-aria',
+                      'Change payment method'
                     )}
+                  >
+                    <span>
+                      {l10n.getString(
+                        'subscription-management-button-change-payment-method',
+                        'Change'
+                      )}
+                    </span>
+                  </LinkExternal>
+                )}
+              </div>
+            )}
+          </section>
 
-                    {type === 'external_paypal' && (
-                      <div
-                        className={`w-full flex ${isPaypalBillingAgreementError ? 'flex-col items-start tablet:flex-row' : 'items-center'} justify-between gap-4`}
-                      >
-                        <div className="leading-6">
-                          <Image
-                            src={getCardIcon('paypal', l10n).img}
-                            alt={l10n.getString(
-                              'paypal-logo-alt-text',
-                              'PayPal logo'
-                            )}
-                            width={91}
-                            height={24}
-                          />
-                          {isPaypalBillingAgreementError && (
-                            <p className="pt-3 text-red-700">
-                              {l10n.getString(
-                                'subscription-management-error-paypal-billing-agreement',
-                                'There is an issue with your PayPal account. Please resolve the issue to maintain your active subscriptions.'
-                              )}
-                            </p>
-                          )}
-                        </div>
-                        <div
-                          className={`${isPaypalBillingAgreementError && 'flex tablet:justify-end w-full tablet:w-auto'}`}
-                        >
-                          <LinkExternal
-                            className={
-                              isPaypalBillingAgreementError
-                                ? `flex items-center justify-center bg-blue-500 border border-blue-600 box-border font-bold font-header rounded text-center py-2 px-5 tablet:w-auto text-white w-full h-10`
-                                : 'bg-grey-10 border border-grey-200 box-border font-bold font-header inline-block rounded text-center py-2 px-5 w-auto'
-                            }
-                            href={
-                              isPaypalBillingAgreementError
-                                ? `${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/paypal`
-                                : `${config.csp.paypalApi}/myaccount/autopay/connect/${billingAgreementId}`
-                            }
-                            aria-label={l10n.getString(
-                              'subscription-management-button-manage-payment-method-aria',
-                              'Manage payment method'
-                            )}
-                          >
-                            <span>
-                              {l10n.getString(
-                                'subscription-management-button-manage-payment-method',
-                                'Manage'
-                              )}
-                            </span>
-                          </LinkExternal>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </>
-              )}
-          </div>
-        </div>
-      </section>
+          <hr className="border-b border-grey-50 my-6" aria-hidden="true" />
+        </>
+      )}
 
       <section
-        id="active-subscriptions"
-        className="scroll-mt-16"
-        aria-labelledby="active-subscriptions-list-heading"
+        className="px-4 tablet:px-8"
+        aria-labelledby="subscriptions-list-heading"
       >
-        <h2
-          id="active-subscriptions-list-heading"
-          className="font-bold px-4 pt-8 pb-4 text-lg tablet:px-6"
-        >
+        <h2 id="subscriptions-list-heading" className="font-semibold mb-4">
           {l10n.getString(
-            'subscription-management-active-subscriptions-heading',
-            'Active subscriptions'
+            'subscription-management-subscriptions-heading',
+            'Subscriptions'
           )}
         </h2>
+
         {subscriptions.length === 0 &&
           googleIapSubscriptions.length === 0 &&
           appleIapSubscriptions.length === 0 && (
-            <div className="w-full py-6 text-grey-600 bg-white rounded-xl border border-grey-200 opacity-100 shadow-[0_0_16px_0_rgba(0,0,0,0.08)]">
-              <div
-                className="flex flex-col gap-1 rounded-lg py-6 text-center"
-                role="status"
-                aria-live="polite"
-              >
-                <p className="font-bold leading-7 text-lg">
-                  {l10n.getString(
-                    'subscription-management-you-have-no-active-subscriptions',
-                    'You have no active subscriptions'
-                  )}
-                </p>
-                <p>
-                  {l10n.getString(
-                    'subscription-management-new-subs-will-appear-here',
-                    'New subscriptions will appear here.'
-                  )}
-                </p>
-              </div>
+            <div
+              className="bg-grey-10 font-semibold rounded-lg py-6 text-center text-sm"
+              role="status"
+              aria-live="polite"
+            >
+              {l10n.getString(
+                'subscription-management-no-subscriptions',
+                'You don’t have any subscriptions yet'
+              )}
             </div>
           )}
-        {(subscriptions.length > 0 ||
-          appleIapSubscriptions.length > 0 ||
-          googleIapSubscriptions.length > 0) && (
+
+        {subscriptions.length > 0 && (
           <>
             <ul
               aria-label={l10n.getString(
-                'subscription-management-your-active-subscriptions-aria',
-                'Your active subscriptions'
+                'subscription-management-your-subscriptions-aria',
+                'Your subscriptions'
               )}
             >
               {subscriptions.map((sub, index: number) => {
@@ -531,355 +391,320 @@ export default async function Manage({
                   <li
                     key={`${sub.productName}-${index}`}
                     aria-labelledby={`${sub.productName}-information`}
-                    className="leading-6 pb-4"
+                    className="leading-5"
                   >
-                    <div className="w-full py-1 text-grey-600 rounded-lg border-2 border-[#E0E0E6] bg-white">
-                      <div className="flex flex-col p-4 tablet:flex-row tablet:items-start tablet:px-6">
-                        <div className="tablet:min-w-[140px]">
-                          <Image
-                            src={sub.webIcon}
-                            alt={sub.productName}
-                            height={64}
-                            width={64}
-                          />
-                        </div>
-                        <div className="flex flex-col gap-4 w-full">
-                          <div className="flex items-start justify-between mt-4 tablet:mt-0">
-                            <div>
-                              <h3
-                                id={`${sub.productName}-information`}
-                                className="font-bold text-lg"
-                              >
-                                {sub.productName}
-                              </h3>
-                              <p className="text-grey-500">
-                                {sub.interval &&
-                                  formatPlanInterval(sub.interval)}
-                              </p>
-                            </div>
-                            <LinkExternal
-                              href={sub.supportUrl}
-                              className="text-blue-500 hover:text-blue-600 cursor-pointer overflow-hidden text-ellipsis underline whitespace-nowrap"
-                              aria-label={l10n.getString(
-                                'subscription-management-button-support-aria',
-                                { productName: sub.productName },
-                                `Get help for ${sub.productName}`
-                              )}
-                              data-testid={`link-external-support-${sub.productName}`}
-                            >
-                              <span>
-                                {l10n.getString(
-                                  'subscription-management-button-support',
-                                  'Get help'
-                                )}
-                              </span>
-                            </LinkExternal>
-                          </div>
-                          <SubscriptionContent
-                            userId={userId}
-                            subscription={sub}
-                            locale={locale}
-                            supportUrl={sub.supportUrl}
-                          />
-                        </div>
-                      </div>
+                    <div className="flex justify-between">
+                      <h3
+                        id={`${sub.productName}-information`}
+                        className="font-semibold"
+                      >
+                        {sub.interval
+                          ? l10n.getString(
+                              getSubscriptionIntervalFtlId(sub.interval),
+                              { productName: sub.productName },
+                              `${sub.productName} (${formatPlanInterval(sub.interval)})`
+                            )
+                          : sub.productName}
+                      </h3>
+                      <LinkExternal
+                        href={sub.supportUrl}
+                        className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis whitespace-nowrap"
+                        aria-label={l10n.getString(
+                          'subscription-management-button-support-aria',
+                          { productName: sub.productName },
+                          `Get help for ${sub.productName}`
+                        )}
+                        data-testid={`link-external-support-${sub.productName}`}
+                      >
+                        <Image
+                          src={helpIcon}
+                          alt=""
+                          width={16}
+                          height={16}
+                          role="presentation"
+                          aria-hidden="true"
+                        />
+                        <span>
+                          {l10n.getString(
+                            'subscription-management-button-support',
+                            'Get help'
+                          )}
+                        </span>
+                      </LinkExternal>
                     </div>
+                    <SubscriptionContent
+                      userId={userId}
+                      subscription={sub}
+                      locale={locale}
+                      supportUrl={sub.supportUrl}
+                    />
+                    {index !== subscriptions.length - 1 && (
+                      <hr
+                        className="border-b border-grey-50 my-6"
+                        aria-hidden="true"
+                      />
+                    )}
                   </li>
                 );
               })}
             </ul>
-
-            {appleIapSubscriptions.length > 0 && (
-              <ul
-                aria-label={l10n.getString(
-                  'subscription-management-your-apple-iap-subscriptions-aria',
-                  'Your Apple In-App Subscriptions'
-                )}
-              >
-                {appleIapSubscriptions.map((purchase, index: number) => {
-                  let nextBillDate: string | undefined;
-                  if (purchase.expiresDate) {
-                    const dateExpired = new Date(purchase.expiresDate);
-                    nextBillDate = l10n.getLocalizedDateString(
-                      Math.floor(dateExpired.getTime() / 1000),
-                      false,
-                      locale
-                    );
-                  }
-                  return (
-                    <li
-                      key={`${purchase.storeId}-${index}`}
-                      aria-labelledby={`${purchase.productName}-heading`}
-                      className="leading-6 pb-4"
-                    >
-                      <div className="w-full py-1 text-grey-600 rounded-lg border-2 border-[#E0E0E6] bg-white">
-                        <div className="flex flex-col p-4 tablet:flex-row tablet:items-start tablet:px-6">
-                          <div className="tablet:min-w-[140px]">
-                            <Image
-                              src={purchase.webIcon}
-                              alt={purchase.productName}
-                              height={64}
-                              width={64}
-                            />
-                          </div>
-                          <div className="flex flex-col gap-4 w-full">
-                            <div className="flex items-start justify-between mt-4 tablet:mt-0">
-                              <h3
-                                id={`${purchase.productName}-heading`}
-                                className="font-bold text-lg"
-                              >
-                                {purchase.productName}
-                              </h3>
-                              <LinkExternal
-                                href={purchase.supportUrl}
-                                className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis underline whitespace-nowrap"
-                                aria-label={l10n.getString(
-                                  'subscription-management-button-support-aria',
-                                  { productName: purchase.productName },
-                                  `Get help for ${purchase.productName}`
-                                )}
-                                data-testid={`link-external-support-${purchase.productName}`}
-                              >
-                                <span>
-                                  {l10n.getString(
-                                    'subscription-management-button-support',
-                                    'Get help'
-                                  )}
-                                </span>
-                              </LinkExternal>
-                            </div>
-                            <div className="bg-grey-10 leading-6 p-4 rounded-lg">
-                              <div className="flex items-center -my-2 -mx-3">
-                                <Image
-                                  src={iapAppleLogo}
-                                  alt=""
-                                  width={46}
-                                  height={46}
-                                  aria-hidden="true"
-                                />
-                                <p>
-                                  {l10n.getString(
-                                    'subscription-management-apple-in-app-purchase-2',
-                                    'Apple in-app purchase'
-                                  )}
-                                </p>
-                              </div>
-                              {nextBillDate && (
-                                <>
-                                  <div
-                                    className="border-none h-px bg-grey-200 my-2"
-                                    role="separator"
-                                    aria-hidden="true"
-                                  ></div>
-                                  <div className="flex items-center gap-1">
-                                    <Image
-                                      src={alertIcon}
-                                      alt=""
-                                      width={20}
-                                      height={20}
-                                      aria-hidden="true"
-                                    />
-                                    <p className="text-sm text-yellow-800">
-                                      {l10n.getString(
-                                        'subscription-management-iap-sub-expires-on-expiry-date',
-                                        {
-                                          date: nextBillDate,
-                                        },
-                                        `Expires on ${nextBillDate}`
-                                      )}
-                                    </p>
-                                  </div>
-                                </>
-                              )}
-                            </div>
-                            <div className="flex justify-end w-full tablet:w-auto">
-                              <LinkExternal
-                                className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis underline whitespace-nowrap"
-                                href={`https://apps.apple.com/account/subscriptions`}
-                                aria-label={l10n.getString(
-                                  'subscription-management-button-manage-subscription-aria',
-                                  {
-                                    productName: purchase.productName,
-                                  },
-                                  `Manage subscription for ${purchase.productName}`
-                                )}
-                              >
-                                <span>
-                                  {l10n.getString(
-                                    'subscription-management-button-manage-subscription-1',
-                                    'Manage subscription'
-                                  )}
-                                </span>
-                                <Image
-                                  src={newWindowIcon}
-                                  alt=""
-                                  width={16}
-                                  height={16}
-                                  aria-hidden="true"
-                                />
-                              </LinkExternal>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </li>
-                  );
-                })}
-              </ul>
+            {(appleIapSubscriptions.length > 0 ||
+              googleIapSubscriptions.length > 0) && (
+              <hr className="border-b border-grey-50 my-6" aria-hidden="true" />
             )}
+          </>
+        )}
 
-            {googleIapSubscriptions.length > 0 && (
-              <ul
-                aria-label={l10n.getString(
-                  'subscription-management-your-google-iap-subscriptions-aria',
-                  'Your Google In-App Subscriptions'
-                )}
-              >
-                {googleIapSubscriptions.map((purchase, index: number) => {
-                  const nextBillDate = l10n.getLocalizedDateString(
-                    purchase.expiryTimeMillis / 1000,
+        {appleIapSubscriptions.length > 0 && (
+          <>
+            <ul
+              aria-label={l10n.getString(
+                'subscription-management-your-apple-iap-subscriptions-aria',
+                'Your Apple In-App Subscriptions'
+              )}
+            >
+              {appleIapSubscriptions.map((purchase, index: number) => {
+                let nextBillDate: string | undefined;
+                if (purchase.expiresDate) {
+                  const dateExpired = new Date(purchase.expiresDate);
+                  nextBillDate = l10n.getLocalizedDateString(
+                    Math.floor(dateExpired.getTime() / 1000),
                     false,
                     locale
                   );
-                  return (
-                    <li
-                      key={`${purchase.storeId}-${index}`}
-                      aria-labelledby={`${purchase.productName}-heading`}
-                      className="leading-6 pb-4"
+                }
+                return (
+                  <li
+                    key={`${purchase.storeId}-${index}`}
+                    aria-labelledby={`${purchase.productName}-heading`}
+                  >
+                    <div className="flex justify-between">
+                      <h3
+                        id={`${purchase.productName}-heading`}
+                        className="font-semibold pb-2"
+                      >
+                        {purchase.productName}
+                      </h3>
+                      <LinkExternal
+                        href={purchase.supportUrl}
+                        className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis whitespace-nowrap"
+                        aria-label={l10n.getString(
+                          'subscription-management-button-support-aria',
+                          { productName: purchase.productName },
+                          `Get help for ${purchase.productName}`
+                        )}
+                        data-testid={`link-external-support-${purchase.productName}`}
+                      >
+                        <Image
+                          src={helpIcon}
+                          alt=""
+                          width={16}
+                          height={16}
+                          role="presentation"
+                          aria-hidden="true"
+                        />
+                        <span>
+                          {l10n.getString(
+                            'subscription-management-button-support',
+                            'Get help'
+                          )}
+                        </span>
+                      </LinkExternal>
+                    </div>
+                    <div className="flex items-center justify-between my-4">
+                      <div className="leading-5 text-sm">
+                        <p>
+                          {l10n.getString(
+                            'subscription-management-apple-in-app-purchase-1',
+                            'Apple: in-app purchase'
+                          )}
+                        </p>
+                        {nextBillDate && (
+                          <p>
+                            {l10n.getFragmentWithSource(
+                              'subscription-management-iap-sub-will-expire-on',
+                              {
+                                vars: {
+                                  date: nextBillDate,
+                                },
+                                elems: {
+                                  strong: <strong />,
+                                },
+                              },
+                              <>
+                                Your subscription will expire on{' '}
+                                <strong>${nextBillDate}</strong>
+                              </>
+                            )}
+                          </p>
+                        )}
+                      </div>
+                      <div>
+                        <LinkExternal
+                          className={CSS_SECONDARY_LINK}
+                          href={`https://apps.apple.com/account/subscriptions`}
+                          aria-label={l10n.getString(
+                            'subscription-management-button-manage-subscription-aria',
+                            {
+                              productName: purchase.productName,
+                            },
+                            `Manage subscription for ${purchase.productName}`
+                          )}
+                        >
+                          <span>
+                            {l10n.getString(
+                              'subscription-management-button-manage-subscription',
+                              'Manage'
+                            )}
+                          </span>
+                        </LinkExternal>
+                      </div>
+                    </div>
+                    {index !== appleIapSubscriptions.length - 1 && (
+                      <hr
+                        className="border-b border-grey-50 my-6"
+                        aria-hidden="true"
+                      />
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+            {googleIapSubscriptions.length > 0 && (
+              <hr className="border-b border-grey-50 my-6" aria-hidden="true" />
+            )}
+          </>
+        )}
+
+        {googleIapSubscriptions.length > 0 && (
+          <ul
+            aria-label={l10n.getString(
+              'subscription-management-your-google-iap-subscriptions-aria',
+              'Your Google In-App Subscriptions'
+            )}
+          >
+            {googleIapSubscriptions.map((purchase, index: number) => {
+              const nextBillDate = l10n.getLocalizedDateString(
+                purchase.expiryTimeMillis / 1000,
+                false,
+                locale
+              );
+              return (
+                <li
+                  key={`${purchase.storeId}-${index}`}
+                  aria-labelledby={`${purchase.productName}-heading`}
+                >
+                  <div className="flex justify-between">
+                    <h3
+                      id={`${purchase.productName}-heading`}
+                      className="font-semibold pb-2"
+                    >
+                      {purchase.productName}
+                    </h3>
+                    <LinkExternal
+                      href={purchase.supportUrl}
+                      className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis whitespace-nowrap"
+                      aria-label={l10n.getString(
+                        'subscription-management-button-support-aria',
+                        { productName: purchase.productName },
+                        `Get help for ${purchase.productName}`
+                      )}
+                      data-testid={`link-external-support-${purchase.productName}`}
                     >
-                      <div className="w-full py-1 text-grey-600 rounded-lg border-2 border-[#E0E0E6] bg-white">
-                        <div className="flex flex-col p-4 tablet:flex-row tablet:items-start tablet:px-6">
-                          <div className="tablet:min-w-[140px]">
-                            <Image
-                              src={purchase.webIcon}
-                              alt={purchase.productName}
-                              height={64}
-                              width={64}
-                            />
-                          </div>
-                          <div className="flex flex-col gap-4 w-full">
-                            <div className="flex items-start justify-between mt-4 tablet:mt-0">
-                              <h3
-                                id={`${purchase.productName}-heading`}
-                                className="font-bold text-lg"
-                              >
-                                {purchase.productName}
-                              </h3>
-                              <LinkExternal
-                                href={purchase.supportUrl}
-                                className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis underline whitespace-nowrap"
-                                aria-label={l10n.getString(
-                                  'subscription-management-button-support-aria',
-                                  { productName: purchase.productName },
-                                  `Get help for ${purchase.productName}`
-                                )}
-                                data-testid={`link-external-support-${purchase.productName}`}
-                              >
-                                <span>
-                                  {l10n.getString(
-                                    'subscription-management-button-support',
-                                    'Get help'
-                                  )}
-                                </span>
-                              </LinkExternal>
-                            </div>
-                            <div className="bg-grey-10 leading-6 p-4 rounded-lg">
-                              <div className="flex items-center -my-2 -mx-3">
-                                <Image
-                                  src={iapGoogleLogo}
-                                  alt=""
-                                  width={46}
-                                  height={46}
-                                  aria-hidden="true"
-                                />
-                                <p>
-                                  {l10n.getString(
-                                    'subscription-management-google-in-app-purchase-2',
-                                    'Google in-app purchase'
-                                  )}
-                                </p>
-                              </div>
-                              {!!purchase.expiryTimeMillis && (
+                      <Image
+                        src={helpIcon}
+                        alt=""
+                        width={16}
+                        height={16}
+                        role="presentation"
+                        aria-hidden="true"
+                      />
+                      <span>
+                        {l10n.getString(
+                          'subscription-management-button-support',
+                          'Get help'
+                        )}
+                      </span>
+                    </LinkExternal>
+                  </div>
+                  <div className="flex items-center justify-between my-4">
+                    <div className="leading-5 text-sm">
+                      <p>
+                        {l10n.getString(
+                          'subscription-management-google-in-app-purchase-1',
+                          'Google: in-app purchase'
+                        )}
+                      </p>
+                      <p>
+                        {!!purchase.expiryTimeMillis &&
+                          (purchase.autoRenewing
+                            ? l10n.getFragmentWithSource(
+                                'subscription-management-iap-sub-next-bill-is-due',
+                                {
+                                  vars: {
+                                    date: nextBillDate,
+                                  },
+                                  elems: {
+                                    strong: <strong />,
+                                  },
+                                },
                                 <>
-                                  <div
-                                    className="border-none h-px bg-grey-200 my-2"
-                                    role="separator"
-                                    aria-hidden="true"
-                                  ></div>
-
-                                  {purchase.autoRenewing ? (
-                                    <p className="text-grey-500 text-sm">
-                                      {l10n.getFragmentWithSource(
-                                        'subscription-management-iap-sub-next-bill-1',
-                                        {
-                                          vars: { date: nextBillDate },
-                                        },
-                                        <p>Next bill &bull; {nextBillDate}</p>
-                                      )}
-                                    </p>
-                                  ) : (
-                                    <div className="flex items-center gap-1">
-                                      <Image
-                                        src={alertIcon}
-                                        alt=""
-                                        width={20}
-                                        height={20}
-                                        aria-hidden="true"
-                                      />
-                                      <p className="text-sm text-yellow-800">
-                                        {l10n.getString(
-                                          'subscription-management-iap-sub-expires-on-expiry-date',
-                                          {
-                                            date: nextBillDate,
-                                          },
-                                          `Expires on ${nextBillDate}`
-                                        )}
-                                      </p>
-                                    </div>
-                                  )}
+                                  Next bill is due{' '}
+                                  <strong>{nextBillDate}</strong>
                                 </>
-                              )}
-                            </div>
-                            <div className="flex justify-end w-full tablet:w-auto">
-                              <LinkExternal
-                                className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis underline whitespace-nowrap"
-                                href={`https://play.google.com/store/account/subscriptions?sku=${encodeURIComponent(
-                                  purchase.sku
-                                )}&package=${encodeURIComponent(purchase.packageName)}`}
-                                aria-label={l10n.getString(
-                                  'subscription-management-button-manage-subscription-aria',
-                                  {
-                                    productName: purchase.productName,
+                              )
+                            : l10n.getFragmentWithSource(
+                                'subscription-management-iap-sub-will-expire-on',
+                                {
+                                  vars: {
+                                    date: nextBillDate,
                                   },
-                                  `Manage subscription for ${purchase.productName}`
-                                )}
-                              >
-                                <span>
-                                  {l10n.getString(
-                                    'subscription-management-button-manage-subscription-1',
-                                    'Manage subscription'
-                                  )}
-                                </span>
-                                <Image
-                                  src={newWindowIcon}
-                                  alt=""
-                                  width={16}
-                                  height={16}
-                                  aria-hidden="true"
-                                />
-                              </LinkExternal>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </li>
-                  );
-                })}
-              </ul>
-            )}
-          </>
+                                  elems: {
+                                    strong: <strong />,
+                                  },
+                                },
+                                <>
+                                  Your subscription will expire on{' '}
+                                  <strong>{nextBillDate}</strong>
+                                </>
+                              ))}
+                      </p>
+                    </div>
+                    <div>
+                      <LinkExternal
+                        className={CSS_SECONDARY_LINK}
+                        href={`https://play.google.com/store/account/subscriptions?sku=${encodeURIComponent(
+                          purchase.sku
+                        )}&package=${encodeURIComponent(purchase.packageName)}`}
+                        aria-label={l10n.getString(
+                          'subscription-management-button-manage-subscription-aria',
+                          {
+                            productName: purchase.productName,
+                          },
+                          `Manage subscription for ${purchase.productName}`
+                        )}
+                      >
+                        <span>
+                          {l10n.getString(
+                            'subscription-management-button-manage-subscription',
+                            'Manage'
+                          )}
+                        </span>
+                      </LinkExternal>
+                    </div>
+                  </div>
+                  {index !== googleIapSubscriptions.length - 1 && (
+                    <hr
+                      className="border-b border-grey-50 my-6"
+                      aria-hidden="true"
+                    />
+                  )}
+                </li>
+              );
+            })}
+          </ul>
         )}
       </section>
-    </div>
+    </>
   );
 }
diff --git a/apps/payments/next/app/[locale]/subscriptions/payments/paypal/en.ftl b/apps/payments/next/app/[locale]/subscriptions/payments/paypal/en.ftl
index f8314f0661f..d0437ebc415 100644
--- a/apps/payments/next/app/[locale]/subscriptions/payments/paypal/en.ftl
+++ b/apps/payments/next/app/[locale]/subscriptions/payments/paypal/en.ftl
@@ -1,3 +1,2 @@
-manage-payment-methods-heading = Manage payment methods
 paypal-payment-management-page-invalid-header = Invalid billing information
 paypal-payment-management-page-invalid-description = There seems to be an error with your { -brand-paypal } account. We need you to take the necessary steps to resolve this payment issue.
diff --git a/apps/payments/next/app/[locale]/subscriptions/payments/paypal/page.tsx b/apps/payments/next/app/[locale]/subscriptions/payments/paypal/page.tsx
index d357d55399c..563be0b6cd8 100644
--- a/apps/payments/next/app/[locale]/subscriptions/payments/paypal/page.tsx
+++ b/apps/payments/next/app/[locale]/subscriptions/payments/paypal/page.tsx
@@ -46,64 +46,48 @@ export default async function PaypalPaymentManagementPage({
 
   return (
     <section
-      className="w-full tablet:px-8 desktop:max-w-[1024px]"
+      className="px-4 tablet:px-8"
       data-testid="paypal-payment-management"
       aria-labelledby="paypal-payment-management"
     >
-      <h1
-        className="font-bold leading-6 mt-8 px-4 pb-4 text-xl tablet:px-6"
-        id="paypal-payment-management"
-      >
-        {l10n.getString(
-          'manage-payment-methods-heading',
-          'Manage payment methods'
-        )}
-      </h1>
-      <div className="py-6 text-grey-600 bg-white rounded-xl border border-grey-200 opacity-100 shadow-[0_0_16px_0_rgba(0,0,0,0.08)] tablet:px-6 tablet:py-8">
-        <div className="flex flex-col items-center text-center pb-8 mt-5 desktop:mt-2">
-          <Image
-            src={errorIcon}
-            alt=""
-            className="h-10 w-10"
+      <div className="flex flex-col items-center text-center pb-8 mt-5 desktop:mt-2 h-[640px]">
+        <Image
+          src={errorIcon}
+          alt=""
+          className="h-10 w-10"
+          aria-hidden="true"
+        />
+        <h2 className="font-semibold text-grey-600 text-xl my-5">
+          {l10n.getString(
+            'paypal-payment-management-page-invalid-header',
+            'Invalid billing information'
+          )}
+        </h2>
+        <span className={'px-24 leading-6'}>
+          {l10n.getString(
+            'paypal-payment-management-page-invalid-description',
+            'There seems to be an error with your PayPal account, we need you to take the necessary steps to resolve this payment issue.'
+          )}
+        </span>
+        <div className="flex items-center w-2/3 py-10">
+          <hr
+            className="border-b border-grey-100 my-6 grow"
             aria-hidden="true"
           />
-          <h2 className="font-semibold text-grey-600 text-xl my-5">
-            {l10n.getString(
-              'paypal-payment-management-page-invalid-header',
-              'Invalid billing information'
-            )}
-          </h2>
-          <span className="px-12 tablet:px-24 leading-6">
-            {l10n.getString(
-              'paypal-payment-management-page-invalid-description',
-              'There seems to be an error with your PayPal account, we need you to take the necessary steps to resolve this payment issue.'
-            )}
+          <span className="flex-none px-4">
+            {l10n.getString('next-pay-with-heading-paypal', 'Pay with PayPal')}
           </span>
-          <div className="flex items-center w-2/3 py-5">
-            <div
-              className="border-b border-grey-100 my-6 grow"
-              role="presentation"
-              aria-hidden="true"
-            ></div>
-            <span className="flex-none px-4">
-              {l10n.getString(
-                'next-pay-with-heading-paypal',
-                'Pay with PayPal'
-              )}
-            </span>
-            <div
-              className="border-b border-grey-100 my-6 grow"
-              role="presentation"
-              aria-hidden="true"
-            ></div>
-          </div>
-          <PaypalManagement
-            sessionUid={sessionUid}
-            paypalClientId={'sb'}
-            nonce={nonce}
-            currency={currency}
+          <hr
+            className="border-b border-grey-100 my-6 grow"
+            aria-hidden="true"
           />
         </div>
+        <PaypalManagement
+          sessionUid={sessionUid}
+          paypalClientId={'sb'}
+          nonce={nonce}
+          currency={currency}
+        />
       </div>
     </section>
   );
diff --git a/apps/payments/next/app/[locale]/subscriptions/payments/stripe/page.tsx b/apps/payments/next/app/[locale]/subscriptions/payments/stripe/page.tsx
index 0efe3972cb3..52d5e29beba 100644
--- a/apps/payments/next/app/[locale]/subscriptions/payments/stripe/page.tsx
+++ b/apps/payments/next/app/[locale]/subscriptions/payments/stripe/page.tsx
@@ -46,7 +46,7 @@ export default async function StripePaymentManagementPage({
 
   return (
     <section
-      className="w-full tablet:px-8 desktop:max-w-[1024px]"
+      className="px-4 tablet:px-8"
       data-testid="stripe-payment-management"
       aria-labelledby="stripe-payment-management"
     >
diff --git a/libs/payments/customer/src/lib/types.ts b/libs/payments/customer/src/lib/types.ts
index 4575c1ba7ed..928558fb71c 100644
--- a/libs/payments/customer/src/lib/types.ts
+++ b/libs/payments/customer/src/lib/types.ts
@@ -16,7 +16,6 @@ export type InvoicePreview = {
   number: string | null; // customer-facing invoice identifier
   paypalTransactionId?: string;
   invoiceDate: number;
-  invoiceUrl?: string | null;
   nextInvoiceDate: number;
   amountDue: number;
   creditApplied: number | null;
diff --git a/libs/payments/customer/src/lib/util/stripeInvoiceToFirstInvoicePreviewDTO.ts b/libs/payments/customer/src/lib/util/stripeInvoiceToFirstInvoicePreviewDTO.ts
index b1c978e23e0..1aaff0e9384 100644
--- a/libs/payments/customer/src/lib/util/stripeInvoiceToFirstInvoicePreviewDTO.ts
+++ b/libs/payments/customer/src/lib/util/stripeInvoiceToFirstInvoicePreviewDTO.ts
@@ -70,7 +70,6 @@ export function stripeInvoiceToInvoicePreviewDTO(
     paypalTransactionId:
       invoice.metadata?.[STRIPE_INVOICE_METADATA.PaypalTransactionId],
     invoiceDate: invoice.created,
-    invoiceUrl: invoice.hosted_invoice_url,
     nextInvoiceDate: invoice.lines.data[0].period.end,
     amountDue: invoice.amount_due,
     creditApplied: invoice.ending_balance
diff --git a/libs/payments/management/src/lib/factories/subscriptionContent.factory.ts b/libs/payments/management/src/lib/factories/subscriptionContent.factory.ts
index c8d6b1ec1a8..e6d594d6340 100644
--- a/libs/payments/management/src/lib/factories/subscriptionContent.factory.ts
+++ b/libs/payments/management/src/lib/factories/subscriptionContent.factory.ts
@@ -28,7 +28,6 @@ export const AppleIapSubscriptionContentFactory = (
   ...AppleIapPurchaseFactory(),
   productName: faker.string.sample(),
   supportUrl: faker.internet.url(),
-  webIcon: faker.internet.url(),
   ...override,
 });
 
@@ -57,7 +56,6 @@ export const GoogleIapSubscriptionContentFactory = (
   ...GoogleIapPurchaseFactory(),
   productName: faker.string.sample(),
   supportUrl: faker.internet.url(),
-  webIcon: faker.internet.url(),
   ...override,
 });
 
diff --git a/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts b/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts
index e4b92fe8fc4..2b1e53c0f91 100644
--- a/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts
+++ b/libs/payments/management/src/lib/subscriptionManagement.service.spec.ts
@@ -338,9 +338,6 @@ describe('SubscriptionManagementService', () => {
           mockIapOfferingResult1.offering.defaultPurchase.purchaseDetails
             .productName,
         supportUrl: mockIapOfferingResult1.offering.commonContent.supportUrl,
-        webIcon:
-          mockIapOfferingResult1.offering.defaultPurchase.purchaseDetails
-            .webIcon,
       };
       const mockGoogleIapSubscriptionContent = {
         ...mockGoogleIapPurchase,
@@ -350,9 +347,6 @@ describe('SubscriptionManagementService', () => {
           mockIapOfferingResult2.offering.defaultPurchase.purchaseDetails
             .productName,
         supportUrl: mockIapOfferingResult2.offering.commonContent.supportUrl,
-        webIcon:
-          mockIapOfferingResult2.offering.defaultPurchase.purchaseDetails
-            .webIcon,
       };
 
       jest
@@ -525,9 +519,6 @@ describe('SubscriptionManagementService', () => {
           mockIapOfferingResult1.offering.defaultPurchase.purchaseDetails
             .productName,
         supportUrl: mockIapOfferingResult1.offering.commonContent.supportUrl,
-        webIcon:
-          mockIapOfferingResult1.offering.defaultPurchase.purchaseDetails
-            .webIcon,
       };
       const mockGoogleIapSubscriptionContent = {
         ...mockGoogleIapPurchase,
@@ -537,9 +528,6 @@ describe('SubscriptionManagementService', () => {
           mockIapOfferingResult2.offering.defaultPurchase.purchaseDetails
             .productName,
         supportUrl: mockIapOfferingResult2.offering.commonContent.supportUrl,
-        webIcon:
-          mockIapOfferingResult2.offering.defaultPurchase.purchaseDetails
-            .webIcon,
       };
 
       jest
@@ -840,6 +828,7 @@ describe('SubscriptionManagementService', () => {
       const mockAccountCustomer = ResultAccountCustomerFactory({
         stripeCustomerId: mockStripeCustomer.id,
       });
+      const mockPrice = StripePriceFactory();
       const mockSubscription = StripeSubscriptionFactory();
       const mockAppleIapPurchaseResult = AppleIapPurchaseResultFactory({
         storeIds: [],
@@ -885,6 +874,8 @@ describe('SubscriptionManagementService', () => {
         .mockRejectedValue(
           new SubscriptionContentMissingUpcomingInvoicePreviewError(
             mockSubscription.id,
+            mockPrice.id,
+            mockCurrency,
             mockStripeCustomer
           )
         );
@@ -1729,12 +1720,10 @@ describe('SubscriptionManagementService', () => {
         .spyOn(paypalBillingAgreementManager, 'retrieveActiveId')
         .mockResolvedValue(faker.string.uuid());
 
-      await expect(
-        subscriptionManagementService.createPaypalBillingAgreementId(
-          faker.string.uuid(),
-          faker.string.uuid()
-        )
-      ).rejects.toBeInstanceOf(CreateBillingAgreementActiveBillingAgreement);
+      await expect(subscriptionManagementService.createPaypalBillingAgreementId(
+        faker.string.uuid(),
+        faker.string.uuid()
+      )).rejects.toBeInstanceOf(CreateBillingAgreementActiveBillingAgreement)
       expect(privateCustomerChanged).not.toHaveBeenCalled();
     });
     it('throws an error if the account customer has no stripe id', async () => {
@@ -1751,14 +1740,10 @@ describe('SubscriptionManagementService', () => {
         .spyOn(accountCustomerManager, 'getAccountCustomerByUid')
         .mockResolvedValue(mockAccountCustomer);
 
-      await expect(
-        subscriptionManagementService.createPaypalBillingAgreementId(
-          faker.string.uuid(),
-          faker.string.uuid()
-        )
-      ).rejects.toBeInstanceOf(
-        CreateBillingAgreementAccountCustomerMissingStripeId
-      );
+      await expect(subscriptionManagementService.createPaypalBillingAgreementId(
+        faker.string.uuid(),
+        faker.string.uuid()
+      )).rejects.toBeInstanceOf(CreateBillingAgreementAccountCustomerMissingStripeId)
       expect(privateCustomerChanged).not.toHaveBeenCalled();
     });
     it('throws an error if no currency can be found', async () => {
@@ -1785,12 +1770,10 @@ describe('SubscriptionManagementService', () => {
         .spyOn(subscriptionManagementService, 'getCurrencyForCustomer')
         .mockResolvedValue(undefined);
 
-      await expect(
-        subscriptionManagementService.createPaypalBillingAgreementId(
-          faker.string.uuid(),
-          faker.string.uuid()
-        )
-      ).rejects.toBeInstanceOf(CreateBillingAgreementCurrencyNotFound);
+      await expect(subscriptionManagementService.createPaypalBillingAgreementId(
+        faker.string.uuid(),
+        faker.string.uuid()
+      )).rejects.toBeInstanceOf(CreateBillingAgreementCurrencyNotFound)
       expect(privateCustomerChanged).not.toHaveBeenCalled();
     });
     it('throws an error if the customer has no active paypal subscriptions', async () => {
@@ -1816,16 +1799,14 @@ describe('SubscriptionManagementService', () => {
       jest
         .spyOn(subscriptionManagementService, 'getCurrencyForCustomer')
         .mockResolvedValue(faker.finance.currencyCode().toLowerCase());
-      jest.spyOn(subscriptionManager, 'listForCustomer').mockResolvedValue([]);
+      jest
+        .spyOn(subscriptionManager, 'listForCustomer')
+        .mockResolvedValue([]);
 
-      await expect(
-        subscriptionManagementService.createPaypalBillingAgreementId(
-          faker.string.uuid(),
-          faker.string.uuid()
-        )
-      ).rejects.toBeInstanceOf(
-        CreateBillingAgreementPaypalSubscriptionNotFound
-      );
+      await expect(subscriptionManagementService.createPaypalBillingAgreementId(
+        faker.string.uuid(),
+        faker.string.uuid()
+      )).rejects.toBeInstanceOf(CreateBillingAgreementPaypalSubscriptionNotFound)
       expect(privateCustomerChanged).not.toHaveBeenCalled();
     });
   });
diff --git a/libs/payments/management/src/lib/subscriptionManagement.service.ts b/libs/payments/management/src/lib/subscriptionManagement.service.ts
index 2f8f89e5fbf..ac8d0ebc30d 100644
--- a/libs/payments/management/src/lib/subscriptionManagement.service.ts
+++ b/libs/payments/management/src/lib/subscriptionManagement.service.ts
@@ -288,14 +288,11 @@ export class SubscriptionManagementService {
               ?.productName ||
             cmsContent.offering.defaultPurchase.purchaseDetails.productName;
           const supportUrl = cmsContent.offering.commonContent.supportUrl;
-          const webIcon =
-            cmsContent.offering.defaultPurchase.purchaseDetails.webIcon;
 
           appleIapSubscriptions.push({
             ...purchase,
             productName,
             supportUrl,
-            webIcon,
           });
         }
       }
@@ -308,14 +305,11 @@ export class SubscriptionManagementService {
               ?.productName ||
             cmsContent.offering.defaultPurchase.purchaseDetails.productName;
           const supportUrl = cmsContent.offering.commonContent.supportUrl;
-          const webIcon =
-            cmsContent.offering.defaultPurchase.purchaseDetails.webIcon;
 
           googleIapSubscriptions.push({
             ...purchase,
             productName,
             supportUrl,
-            webIcon,
           });
         }
       }
@@ -424,7 +418,6 @@ export class SubscriptionManagementService {
       amountDue,
       creditApplied,
       invoiceDate: currentInvoiceDate,
-      invoiceUrl: currentInvoiceUrl,
       promotionName,
       taxAmounts,
       totalAmount,
@@ -468,7 +461,6 @@ export class SubscriptionManagementService {
             : totalAmount,
       currentPeriodEnd: subscription.current_period_end,
       currentInvoiceDate,
-      currentInvoiceUrl,
       nextInvoiceDate,
       nextInvoiceTax: nextInvoiceTotalExclusiveTax,
       nextInvoiceTotal:
diff --git a/libs/payments/management/src/lib/types.ts b/libs/payments/management/src/lib/types.ts
index 9683950046d..c8ecaa10b76 100644
--- a/libs/payments/management/src/lib/types.ts
+++ b/libs/payments/management/src/lib/types.ts
@@ -12,7 +12,6 @@ export interface AppleIapPurchase {
 export interface AppleIapSubscriptionContent extends AppleIapPurchase {
   productName: string;
   supportUrl: string;
-  webIcon: string;
 }
 
 export interface AppleIapPurchaseResult {
@@ -31,7 +30,6 @@ export interface GoogleIapPurchase {
 export interface GoogleIapSubscriptionContent extends GoogleIapPurchase {
   productName: string;
   supportUrl: string;
-  webIcon: string;
 }
 
 export interface GoogleIapPurchaseResult {
@@ -52,7 +50,6 @@ export interface SubscriptionContent {
   currentInvoiceDate: number;
   currentInvoiceTax: number;
   currentInvoiceTotal: number;
-  currentInvoiceUrl?: string | null;
   currentPeriodEnd: number;
   nextInvoiceDate: number;
   nextInvoiceTax?: number;
diff --git a/libs/payments/ui/src/lib/actions/cancelSubscriptionAtPeriodEnd.ts b/libs/payments/ui/src/lib/actions/cancelSubscriptionAtPeriodEnd.ts
index 3f823059d66..c11f3baff78 100644
--- a/libs/payments/ui/src/lib/actions/cancelSubscriptionAtPeriodEnd.ts
+++ b/libs/payments/ui/src/lib/actions/cancelSubscriptionAtPeriodEnd.ts
@@ -18,7 +18,7 @@ export const cancelSubscriptionAtPeriodEndAction = async (
       subscriptionId,
     });
 
-  revalidatePath('/[locale]/subscriptions/manage', 'page');
+  revalidatePath('/[locale]/subscriptions/manage');
 
   return result;
 };
diff --git a/libs/payments/ui/src/lib/actions/resubscribeSubscription.ts b/libs/payments/ui/src/lib/actions/resubscribeSubscription.ts
index cba911ad036..b1530726765 100644
--- a/libs/payments/ui/src/lib/actions/resubscribeSubscription.ts
+++ b/libs/payments/ui/src/lib/actions/resubscribeSubscription.ts
@@ -16,7 +16,7 @@ export const resubscribeSubscriptionAction = async (
     subscriptionId,
   });
 
-  revalidatePath('/[locale]/subscriptions/manage', 'page');
+  revalidatePath('/[locale]/subscriptions/manage');
 
   return result;
 };
diff --git a/libs/payments/ui/src/lib/client/components/Banner/index.tsx b/libs/payments/ui/src/lib/client/components/Banner/index.tsx
index e1aed70199f..35049332dca 100644
--- a/libs/payments/ui/src/lib/client/components/Banner/index.tsx
+++ b/libs/payments/ui/src/lib/client/components/Banner/index.tsx
@@ -11,7 +11,6 @@ import closeIcon from '@fxa/shared/assets/images/icon_close.min.svg';
 import checkmarkIcon from '@fxa/shared/assets/images/icon_checkmark_circle_outline_current.min.svg';
 import errorIcon from '@fxa/shared/assets/images/icon_error_circle_outline_current.min.svg';
 import infoIcon from '@fxa/shared/assets/images/icon_information_circle_outline_current.min.svg';
-import warningIcon from '@fxa/shared/assets/images/alert-black.svg';
 import { BannerVariant } from '../../../constants';
 
 interface BannerProps extends React.HTMLProps<HTMLDivElement> {
@@ -39,7 +38,7 @@ export function Banner({
       bannerAriaLive = 'assertive';
       bannerIcon = errorIcon;
       bannerRole = 'alert';
-      bannerStyle = 'bg-red-50 my-4 rounded-md';
+      bannerStyle = 'bg-red-100 my-4 rounded-md';
       closeStyle = 'hover:bg-red-200 focus:bg-red-300';
       break;
     case BannerVariant.SignedIn:
@@ -57,13 +56,6 @@ export function Banner({
       bannerStyle = 'bg-green-200 my-4 rounded-md ';
       closeStyle = 'hover:bg-green-300 focus:bg-green-500';
       break;
-    case BannerVariant.Warning:
-      bannerAriaLive = 'polite';
-      bannerIcon = warningIcon;
-      bannerRole = 'status';
-      bannerStyle = 'bg-orange-50 my-4 rounded-md ';
-      closeStyle = 'hover:bg-orange-100 focus:bg-orange-200';
-      break;
     case BannerVariant.Info:
     default:
       bannerAriaLive = 'polite';
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 28a7d2afb69..9512f1e1aac 100644
--- a/libs/payments/ui/src/lib/client/components/BaseButton/index.tsx
+++ b/libs/payments/ui/src/lib/client/components/BaseButton/index.tsx
@@ -8,8 +8,6 @@ export enum ButtonVariant {
   Primary,
   Secondary,
   ThirdParty,
-  SubscriptionManagementPrimary,
-  SubscriptionManagementSecondary,
 }
 
 interface BaseButtonProps
@@ -36,14 +34,6 @@ export const BaseButton = forwardRef(function BaseButton(
       variantStyles =
         'w-full bg-transparent border border-grey-300 font-normal text-black hover:border-black aria-disabled:hover:border-grey-300';
       break;
-    case ButtonVariant.SubscriptionManagementPrimary:
-      variantStyles =
-        'bg-blue-500 border border-blue-600 box-border font-header inline-block rounded text-center text-white w-full py-2 px-5 tablet:w-auto';
-      break;
-    case ButtonVariant.SubscriptionManagementSecondary:
-      variantStyles =
-        'bg-grey-10 border border-grey-200 box-border font-header inline-block rounded text-center w-full py-2 px-5 tablet:w-auto';
-      break;
   }
 
   return (
diff --git a/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx b/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx
index 432fafff9d1..1b971080e0a 100644
--- a/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx
+++ b/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx
@@ -184,166 +184,156 @@ export function PaymentMethodManagement({
   };
 
   return (
-    <>
-      <h1
-        className="font-bold leading-6 mt-8 px-4 pb-4 text-xl tablet:px-6"
-        id="stripe-payment-management"
-      >
-        {l10n.getString(
-          'manage-stripe-payments-title',
-          {},
-          'Manage payment methods'
-        )}
-      </h1>
-      <div className="w-full py-6 text-grey-600 bg-white rounded-[12px] border border-grey-200 opacity-100 shadow-[0_0_16px_0_rgba(0,0,0,0.08)]">
-        {!isReady && (
-          <div className="w-full flex bg-white bg-opacity-75 items-center justify-center">
-            <LoadingSpinner className="h-10 w-10" />
-          </div>
-        )}
-        <Form.Root
-          ref={formRef}
-          onSubmit={handleSubmit}
-          className="px-4 tablet:px-6"
+    <div className="p-4">
+      {!isReady && (
+        <div className="w-full flex bg-white bg-opacity-75 items-center justify-center">
+          <LoadingSpinner className="h-10 w-10" />
+        </div>
+      )}
+      {isReady && (
+        <h2
+          className="font-semibold mb-4 text-lg"
+          id="stripe-payment-management"
         >
-          {isInputNewCardDetails && (
-            <>
-              <Localized id="next-new-user-card-title">
-                <h2 className="font-semibold text-grey-600 text-start mt-6">
-                  Enter your card information
-                </h2>
-              </Localized>
-              <Form.Field
-                name="name"
-                serverInvalid={hasFullNameError}
-                className="my-6"
-              >
-                <Form.Label className="text-grey-400 block mb-1 text-start">
-                  <Localized id="payment-name-label">
-                    Name as it appears on your card
-                  </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="text"
-                    data-testid="name"
-                    placeholder={l10n.getString(
-                      'payment-name-placeholder',
-                      {},
-                      'Full Name'
-                    )}
-                    value={fullName}
-                    onChange={(e) => {
-                      setFullName(e.target.value);
-                      setHasFullNameError(!e.target.value);
-                    }}
-                    aria-required
-                  />
-                </Form.Control>
-                {hasFullNameError && (
-                  <Form.Message asChild>
-                    <Localized id="next-payment-validate-name-error">
-                      <p
-                        className="mt-1 text-alert-red font-normal"
-                        role="alert"
-                      >
-                        Please enter your full name
-                      </p>
-                    </Localized>
-                  </Form.Message>
-                )}
-              </Form.Field>
-            </>
+          {l10n.getString(
+            'manage-stripe-payments-title',
+            {},
+            'Manage payment methods'
           )}
-          <Form.Field name="payment">
-            <Form.Control asChild>
-              <div
-                className={`relative ${hideOverflow ? 'overflow-hidden' : ''}`}
-              >
-                <PaymentElement
-                  onChange={handlePaymentElementChange}
-                  onLoaderStart={handleReady}
-                  onReady={handleElementReady}
-                  options={{
-                    layout: {
-                      type: 'accordion',
-                      defaultCollapsed: false,
-                      radios: false,
-                      spacedAccordionItems: true,
-                    },
-                    defaultValues: {
-                      billingDetails: {
-                        email: sessionEmail || undefined,
-                      },
-                    },
+        </h2>
+      )}
+      <Form.Root ref={formRef} onSubmit={handleSubmit}>
+        {isInputNewCardDetails && (
+          <>
+            <Localized id="next-new-user-card-title">
+              <h3 className="font-semibold text-grey-600 text-start mt-6">
+                Enter your card information
+              </h3>
+            </Localized>
+            <Form.Field
+              name="name"
+              serverInvalid={hasFullNameError}
+              className="my-6"
+            >
+              <Form.Label className="text-grey-400 block mb-1 text-start">
+                <Localized id="payment-name-label">
+                  Name as it appears on your card
+                </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="text"
+                  data-testid="name"
+                  placeholder={l10n.getString(
+                    'payment-name-placeholder',
+                    {},
+                    'Full Name'
+                  )}
+                  value={fullName}
+                  onChange={(e) => {
+                    setFullName(e.target.value);
+                    setHasFullNameError(!e.target.value);
                   }}
+                  aria-required
                 />
-              </div>
-            </Form.Control>
-
-            {error && (
-              <Form.Message>
-                <div className="mt-5 text-alert-red font-normal">{error}</div>
-              </Form.Message>
-            )}
-          </Form.Field>
-          {(isInputNewCardDetails ||
-            (isNonCardSelected && !hasPaymentMethod)) && (
-            <div className="flex flex-row justify-center pt-4">
-              <Form.Submit asChild>
-                <BaseButton
-                  className="h-10 mt-10 w-full"
-                  type="submit"
-                  variant={ButtonVariant.Primary}
-                  aria-disabled={
-                    !stripe || !isComplete || isLoading || hasFullNameError
-                  }
-                  disabled={
-                    !stripe || !isComplete || isLoading || hasFullNameError
-                  }
-                >
-                  {isLoading ? (
-                    <Image
-                      src={spinnerWhiteImage}
-                      alt=""
-                      className="absolute animate-spin h-8 w-8"
-                    />
-                  ) : (
-                    <Localized id="payment-method-management-save-method">
-                      Save payment method
-                    </Localized>
-                  )}
-                </BaseButton>
-              </Form.Submit>
-            </div>
-          )}
-          {isNonDefaultCardSelected && !isInputNewCardDetails && (
-            <div className="flex flex-row justify-center pt-4">
-              <Form.Submit asChild>
-                <BaseButton
-                  className="h-10 mt-10 w-full"
-                  type="submit"
-                  variant={ButtonVariant.Primary}
-                  aria-disabled={!stripe || !isComplete || isLoading}
-                >
-                  {isLoading ? (
-                    <Image
-                      src={spinnerWhiteImage}
-                      alt=""
-                      className="absolute animate-spin h-8 w-8"
-                    />
-                  ) : (
-                    <Localized id="payment-method-management-save-default">
-                      Set as default payment method
-                    </Localized>
-                  )}
-                </BaseButton>
-              </Form.Submit>
+              </Form.Control>
+              {hasFullNameError && (
+                <Form.Message asChild>
+                  <Localized id="next-payment-validate-name-error">
+                    <p className="mt-1 text-alert-red font-normal" role="alert">
+                      Please enter your full name
+                    </p>
+                  </Localized>
+                </Form.Message>
+              )}
+            </Form.Field>
+          </>
+        )}
+        <Form.Field name="payment">
+          <Form.Control asChild>
+            <div className={`relative ${hideOverflow ? 'overflow-hidden' : ''}`}>
+              <PaymentElement
+                onChange={handlePaymentElementChange}
+                onLoaderStart={handleReady}
+                onReady={handleElementReady}
+                options={{
+                  layout: {
+                    type: 'accordion',
+                    defaultCollapsed: false,
+                    radios: false,
+                    spacedAccordionItems: true,
+                  },
+                  defaultValues: {
+                    billingDetails: {
+                      email: sessionEmail || undefined,
+                    },
+                  },
+                }}
+              />
             </div>
+          </Form.Control>
+
+          {error && (
+            <Form.Message>
+              <div className="mt-5 text-alert-red font-normal">{error}</div>
+            </Form.Message>
           )}
-        </Form.Root>
-      </div>
-    </>
+        </Form.Field>
+        {(isInputNewCardDetails || (isNonCardSelected && !hasPaymentMethod)) && (
+          <div className="flex flex-row justify-center pt-4">
+            <Form.Submit asChild>
+              <BaseButton
+                className="h-10 mt-10 w-full"
+                type="submit"
+                variant={ButtonVariant.Primary}
+                aria-disabled={
+                  !stripe || !isComplete || isLoading || hasFullNameError
+                }
+                disabled={
+                  !stripe || !isComplete || isLoading || hasFullNameError
+                }
+              >
+                {isLoading ? (
+                  <Image
+                    src={spinnerWhiteImage}
+                    alt=""
+                    className="absolute animate-spin h-8 w-8"
+                  />
+                ) : (
+                  <Localized id="payment-method-management-save-method">
+                    Save payment method
+                  </Localized>
+                )}
+              </BaseButton>
+            </Form.Submit>
+          </div>
+        )}
+        {isNonDefaultCardSelected && !isInputNewCardDetails && (
+          <div className="flex flex-row justify-center pt-4">
+            <Form.Submit asChild>
+              <BaseButton
+                className="h-10 mt-10 w-full"
+                type="submit"
+                variant={ButtonVariant.Primary}
+                aria-disabled={!stripe || !isComplete || isLoading}
+              >
+                {isLoading ? (
+                  <Image
+                    src={spinnerWhiteImage}
+                    alt=""
+                    className="absolute animate-spin h-8 w-8"
+                  />
+                ) : (
+                  <Localized id="payment-method-management-save-default">
+                    Set as default payment method
+                  </Localized>
+                )}
+              </BaseButton>
+            </Form.Submit>
+          </div>
+        )}
+      </Form.Root>
+    </div>
   );
 }
diff --git a/libs/payments/ui/src/lib/client/components/SubscriptionContent/en.ftl b/libs/payments/ui/src/lib/client/components/SubscriptionContent/en.ftl
index f8ee5ce2975..8f91b10967e 100644
--- a/libs/payments/ui/src/lib/client/components/SubscriptionContent/en.ftl
+++ b/libs/payments/ui/src/lib/client/components/SubscriptionContent/en.ftl
@@ -9,25 +9,19 @@
 ## $promotionName (String) - The name of the promotion.
 ## $taxDue (Number) - The tax added on, not included in amount. It will be formatted as currency.
 
+subscription-content-current-billed-on-tax = <strong>{ $invoiceTotal } + { $taxDue } tax</strong><span> billed on { $billedOnDate }</span>
+subscription-content-current-billed-on-no-tax = <strong>{ $invoiceTotal }</strong><span> billed on { $billedOnDate }</span>
+subscription-content-credit-issued-to-your-account = <strong>{ $creditApplied }</strong> credit issued to your account
+subscription-content-coupon-applied = { $promotionName } applied
 subscription-content-coupon-will-be-applied = { $promotionName } discount will be applied
+subscription-content-next-bill-excl-disc-with-tax = Next bill of <strong>{ $nextInvoiceTotal } + { $taxDue } tax</strong>, excluding discounts, is due on <strong>{ $nextBillDate }</strong>
+subscription-content-next-bill-excl-no-tax = Next bill of <strong>{ $nextInvoiceTotal }</strong>, excluding discounts, is due on <strong>{ $nextBillDate }</strong>
 subscription-content-heading-cancel-subscription = Cancel Subscription
 subscription-content-no-longer-use-message = You will no longer be able to use { $productName } after { $currentPeriodEnd }, the last day of your billing cycle.
 subscription-content-cancel-access-message = Cancel my access and my saved information within { $productName } on { $currentPeriodEnd }
-# • is acting as a separator between "Last bill" and the billing date.
-subscription-content-last-bill = Last bill • { $billedOnDate }
-subscription-content-last-bill-with-tax = { $invoiceTotal } + { $taxDue } tax
-subscription-content-last-bill-no-tax = { $invoiceTotal }
-subscription-content-view-invoice = View invoice
-subscription-management-link-view-invoice-aria = View invoice for { $productName }
-subscription-content-expires-on-expiry-date = Expires on { $date }
-# • is acting as a separator between "Next bill" and the next billing date.
-subscription-content-next-bill = Next bill • { $billedOnDate}
-subscription-content-next-bill-with-tax-1 = { $nextInvoiceTotal } + { $taxDue } tax
-subscription-content-next-bill-no-tax-1 = { $nextInvoiceTotal }
 subscription-content-button-stay-subscribed =
   Stay Subscribed
   .aria-label = Stay subscribed to { $productName }
-subscription-content-button-cancel-subscription-1 = Cancel subscription
 subscription-content-button-cancel-subscription =
   Cancel Subscription
   .aria-label = Cancel your subscription to { $productName }
diff --git a/libs/payments/ui/src/lib/client/components/SubscriptionContent/index.tsx b/libs/payments/ui/src/lib/client/components/SubscriptionContent/index.tsx
index 27745e04b9e..36bf3ddce37 100644
--- a/libs/payments/ui/src/lib/client/components/SubscriptionContent/index.tsx
+++ b/libs/payments/ui/src/lib/client/components/SubscriptionContent/index.tsx
@@ -10,8 +10,6 @@ import { Localized, useLocalization } from '@fluent/react';
 import * as Form from '@radix-ui/react-form';
 
 import { ActionButton, ButtonVariant, SubmitButton } from '@fxa/payments/ui';
-import alertIcon from '@fxa/shared/assets/images/alert-yellow.svg';
-import newWindowIcon from '@fxa/shared/assets/images/new-window.svg';
 import {
   getLocalizedCurrencyString,
   getLocalizedDateString,
@@ -34,7 +32,6 @@ interface Subscription {
   currentInvoiceDate: number;
   currentInvoiceTax: number;
   currentInvoiceTotal: number;
-  currentInvoiceUrl?: string | null;
   currentPeriodEnd: number;
   nextInvoiceDate: number;
   nextInvoiceTax?: number;
@@ -58,17 +55,18 @@ export const SubscriptionContent = ({
 }: SubscriptionContentProps) => {
   const {
     canResubscribe,
+    creditApplied,
     currency,
     currentInvoiceDate,
     currentInvoiceTax,
     currentInvoiceTotal,
-    currentInvoiceUrl,
     currentPeriodEnd,
     nextInvoiceTax,
     nextInvoiceTotal,
     nextPromotionName,
     productName,
     webIcon,
+    promotionName,
   } = subscription;
 
   const [checkedState, setCheckedState] = useState(false);
@@ -147,18 +145,26 @@ export const SubscriptionContent = ({
           <Dialog.Overlay className="fixed inset-0 bg-black/75 z-50" />
           <Dialog.Content
             className="w-11/12 max-w-[545px] text-center px-7 pt-6 pb-8 rounded-xl shadow inline-block fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] bg-white"
-            aria-describedby={undefined}
+            aria-labelledby="subscription-cancellation-dialog-title"
+            aria-describedby="subscription-cancellation-dialog-description"
             onEscapeKeyDown={() => setOpenCancellationDialog(false)}
             onPointerDownOutside={() => setOpenCancellationDialog(false)}
             onInteractOutside={() => setOpenCancellationDialog(false)}
           >
-            <Dialog.Title className="font-bold leading-6 m-5">
+            <Dialog.Title
+              id="subscription-cancellation-dialog-title"
+              className="font-bold leading-6 m-5"
+            >
               <Localized id="subscription-cancellation-dialog-title">
-                <span>We’re sorry to see you go</span>
+                We’re sorry to see you go
               </Localized>
             </Dialog.Title>
-            <Dialog.Description asChild className="leading-6 space-y-4">
-              <>
+            <Dialog.Description
+              asChild
+              id="subscription-cancellation-dialog-description"
+              className="leading-6 space-y-4"
+            >
+              <div>
                 <Localized
                   id="subscription-cancellation-dialog-msg"
                   vars={{
@@ -191,19 +197,17 @@ export const SubscriptionContent = ({
                     .
                   </p>
                 </Localized>
-              </>
+              </div>
             </Dialog.Description>
             <Dialog.Close asChild>
               <button
                 className="absolute bg-transparent border-0 cursor-pointer flex items-center justify-center w-6 h-6 m-0 p-0 top-4 right-4 hover:bg-grey-200 hover:rounded focus:border-blue-400 focus:rounded focus:shadow-input-blue-focus after:absolute after:content-[''] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10"
                 onClick={() => setOpenCancellationDialog(false)}
-                aria-label={l10n.getString(
-                  'dialog-close',
-                  null,
-                  'Close dialog'
-                )}
               >
-                <Image src={CloseIcon} alt="" aria-hidden="true" />
+                <Image
+                  src={CloseIcon}
+                  alt={l10n.getString('dialog-close', null, 'Close dialog')}
+                />
               </button>
             </Dialog.Close>
           </Dialog.Content>
@@ -214,48 +218,55 @@ export const SubscriptionContent = ({
         <Dialog.Portal>
           <Dialog.Overlay className="fixed inset-0 bg-black/75 z-50" />
           <Dialog.Content
-            className="w-11/12 max-w-[545px] text-center px-7 pt-6 pb-8 rounded-xl shadow inline-block fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[9999] bg-white"
-            aria-describedby={undefined}
+            className="w-11/12 max-w-[545px] text-center px-7 pt-6 pb-8 rounded-xl shadow inline-block fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-9999 bg-white"
+            aria-labelledby="resubscribe-success-title"
+            aria-describedby="resubscribe-success-description"
             onEscapeKeyDown={() => setOpenResubscribeSuccessDialog(false)}
             onPointerDownOutside={() => setOpenResubscribeSuccessDialog(false)}
             onInteractOutside={() => setOpenResubscribeSuccessDialog(false)}
           >
-            <Dialog.Title className="font-bold leading-6 m-5 space-y-5">
+            <Dialog.Title
+              id="resubscribe-success-title"
+              className="font-bold leading-6 m-5 space-y-5"
+            >
               <Image
                 src={webIcon}
                 alt={productName}
                 height={64}
                 width={64}
-                className="h-16 w-16 mb-4 mx-auto"
+                className="h-16 w-16 mx-auto"
               />
               <Localized id="resubscribe-success-dialog-title">
-                <span>Thanks! You’re all set.</span>
+                <p>Thanks! You’re all set.</p>
               </Localized>
             </Dialog.Title>
-            <Localized
-              id="resubscribe-success-dialog-action-button-close"
-              attrs={{ 'aria-label': true }}
+            <Dialog.Description
+              id="resubscribe-success-description"
+              className="leading-6 space-y-4"
             >
-              <SubmitButton
-                className="h-10 w-full"
-                variant={ButtonVariant.Primary}
-                onClick={() => setOpenResubscribeSuccessDialog(false)}
-                aria-label="Close dialog"
+              <Localized
+                id="resubscribe-success-dialog-action-button-close"
+                attrs={{ 'aria-label': true }}
               >
-                Close
-              </SubmitButton>
-            </Localized>
+                <SubmitButton
+                  className="h-10 w-full"
+                  variant={ButtonVariant.Primary}
+                  onClick={() => setOpenResubscribeSuccessDialog(false)}
+                  aria-label="Close dialog"
+                >
+                  Close
+                </SubmitButton>
+              </Localized>
+            </Dialog.Description>
             <Dialog.Close asChild>
               <button
                 className="absolute bg-transparent border-0 cursor-pointer flex items-center justify-center w-6 h-6 m-0 p-0 top-4 right-4 hover:bg-grey-200 hover:rounded focus:border-blue-400 focus:rounded focus:shadow-input-blue-focus after:absolute after:content-[''] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10"
                 onClick={() => setOpenResubscribeSuccessDialog(false)}
-                aria-label={l10n.getString(
-                  'dialog-close',
-                  null,
-                  'Close dialog'
-                )}
               >
-                <Image src={CloseIcon} alt="" aria-hidden="true" />
+                <Image
+                  src={CloseIcon}
+                  alt={l10n.getString('dialog-close', null, 'Close dialog')}
+                />
               </button>
             </Dialog.Close>
           </Dialog.Content>
@@ -266,18 +277,23 @@ export const SubscriptionContent = ({
         <Dialog.Portal>
           <Dialog.Overlay className="fixed inset-0 bg-black/75 z-50" />
           <Dialog.Content
-            className="w-11/12 max-w-[545px] text-center px-7 pt-6 pb-8 rounded-xl shadow inline-block fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[9999] bg-white"
+            className="w-11/12 max-w-[545px] text-center px-7 pt-6 pb-8 rounded-xl shadow inline-block fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-9999 bg-white"
+            aria-labelledby="resubscribe-dialog-title"
+            aria-describedby="resubscribe-dialog-description"
             onEscapeKeyDown={() => setOpenResubscribeDialog(false)}
             onPointerDownOutside={() => setOpenResubscribeDialog(false)}
             onInteractOutside={() => setOpenResubscribeDialog(false)}
           >
-            <Dialog.Title className="font-bold leading-6 m-5 space-y-5">
+            <Dialog.Title
+              id="resubscribe-dialog-title"
+              className="font-bold leading-6 m-5 space-y-5"
+            >
               <Image
                 src={webIcon}
                 alt={productName}
                 height={64}
                 width={64}
-                className="h-16 w-16 mb-4 mx-auto"
+                className="h-16 w-16 mx-auto"
               />
               <Localized
                 id="resubscribe-dialog-title"
@@ -285,10 +301,14 @@ export const SubscriptionContent = ({
                   name: productName,
                 }}
               >
-                <span>Want to keep using {productName}?</span>
+                <p>Want to keep using {productName}?</p>
               </Localized>
             </Dialog.Title>
-            <Dialog.Description asChild className="leading-6 space-y-4">
+            <Dialog.Description
+              asChild
+              id="resubscribe-dialog-description"
+              className="leading-6 space-y-4"
+            >
               <div>
                 {nextInvoiceTax ? (
                   <Localized
@@ -359,13 +379,11 @@ export const SubscriptionContent = ({
               <button
                 className="absolute bg-transparent border-0 cursor-pointer flex items-center justify-center w-6 h-6 m-0 p-0 top-4 right-4 hover:bg-grey-200 hover:rounded focus:border-blue-400 focus:rounded focus:shadow-input-blue-focus after:absolute after:content-[''] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10"
                 onClick={() => setOpenResubscribeDialog(false)}
-                aria-label={l10n.getString(
-                  'dialog-close',
-                  null,
-                  'Close dialog'
-                )}
               >
-                <Image src={CloseIcon} alt="" aria-hidden="true" />
+                <Image
+                  src={CloseIcon}
+                  alt={l10n.getString('dialog-close', null, 'Close dialog')}
+                />
               </button>
             </Dialog.Close>
           </Dialog.Content>
@@ -471,137 +489,164 @@ export const SubscriptionContent = ({
           </div>
         </Form.Root>
       ) : (
-        <>
-          {isClient && (
-            <div className="bg-grey-10 leading-6 p-4 rounded-lg">
-              <div className="text-grey-500">
+        <section className="flex items-center justify-between gap-4 my-4">
+          {canResubscribe ? (
+            <>
+              {isClient && (
                 <Localized
-                  id="subscription-content-last-bill"
-                  vars={{ billedOnDate: currentInvoiceDateLongFallback }}
+                  id="subscription-content-resubscribe"
+                  vars={{
+                    name: productName,
+                    date: currentPeriodEndLongFallback,
+                  }}
+                  elems={{
+                    strong: <strong></strong>,
+                  }}
                 >
-                  <p>Last bill • {currentInvoiceDateLongFallback}</p>
+                  <p className="text-sm leading-4 text-grey-400">
+                    You will lose access to {productName} on{' '}
+                    <strong>{currentPeriodEndLongFallback}</strong>.
+                  </p>
                 </Localized>
-              </div>
-              <div className="flex items-center justify-between">
-                {currentInvoiceTax ? (
-                  <Localized
-                    id="subscription-content-last-bill-with-tax"
-                    vars={{
-                      invoiceTotal:
-                        getCurrencyFallbackText(currentInvoiceTotal),
-                      taxDue: getCurrencyFallbackText(currentInvoiceTax),
-                    }}
-                  >
-                    <p>
-                      {getCurrencyFallbackText(currentInvoiceTotal)} +{' '}
-                      {getCurrencyFallbackText(currentInvoiceTax)} tax
-                    </p>
-                  </Localized>
-                ) : (
-                  <Localized
-                    id="subscription-content-last-bill-no-tax"
-                    vars={{
-                      invoiceTotal:
-                        getCurrencyFallbackText(currentInvoiceTotal),
-                    }}
-                  >
-                    <p>{getCurrencyFallbackText(currentInvoiceTotal)}</p>
-                  </Localized>
-                )}
-                {currentInvoiceUrl && (
-                  <LinkExternal
-                    href={currentInvoiceUrl}
-                    className="text-blue-500 hover:text-blue-600 cursor-pointer flex items-center gap-1 flex-shrink-0 overflow-hidden text-ellipsis whitespace-nowrap"
-                    data-testid="link-external-view-invoice"
-                    aria-label={l10n.getString(
-                      'subscription-management-link-view-invoice-aria',
-                      {
-                        productName,
-                      },
-                      `View invoice for ${productName}`
-                    )}
-                  >
-                    <Localized id="subscription-content-view-invoice">
-                      <span className="underline">View invoice</span>
+              )}
+              <Localized
+                id="subscription-content-button-resubscribe"
+                vars={{ productName }}
+                attrs={{ 'aria-label': true }}
+              >
+                <SubmitButton
+                  className="h-10"
+                  variant={ButtonVariant.Secondary}
+                  onClick={() => setOpenResubscribeDialog(true)}
+                  aria-label={`Resubscribe to ${productName}`}
+                >
+                  Resubscribe
+                </SubmitButton>
+              </Localized>
+            </>
+          ) : (
+            <>
+              {isClient && (
+                <div className="leading-5">
+                  {currentInvoiceTax ? (
+                    <Localized
+                      id="subscription-content-current-billed-on-tax"
+                      vars={{
+                        billedOnDate: currentInvoiceDateLongFallback,
+                        invoiceTotal:
+                          getCurrencyFallbackText(currentInvoiceTotal),
+                        taxDue: getCurrencyFallbackText(currentInvoiceTax),
+                      }}
+                      elems={{
+                        strong: <strong></strong>,
+                        span: <span className="text-grey-600 text-sm"></span>,
+                      }}
+                    >
+                      <p>
+                        <strong>
+                          {getCurrencyFallbackText(currentInvoiceTotal)} +{' '}
+                          {getCurrencyFallbackText(currentInvoiceTax)} tax{' '}
+                        </strong>
+                        <span className="text-grey-600 text-sm">
+                          billed on {currentInvoiceDateLongFallback}
+                        </span>
+                      </p>
+                    </Localized>
+                  ) : (
+                    <Localized
+                      id="subscription-content-current-billed-on-no-tax"
+                      vars={{
+                        billedOnDate: currentInvoiceDateLongFallback,
+                        invoiceTotal:
+                          getCurrencyFallbackText(currentInvoiceTotal),
+                      }}
+                      elems={{
+                        strong: <strong></strong>,
+                        span: <span className="text-grey-600 text-sm"></span>,
+                      }}
+                    >
+                      <p>
+                        <strong>
+                          {getCurrencyFallbackText(currentInvoiceTotal)}
+                        </strong>
+                        <span className="text-grey-600 text-sm">
+                          billed on {currentInvoiceDateLongFallback}
+                        </span>
+                      </p>
+                    </Localized>
+                  )}
+                  {creditApplied && creditApplied > 0 ? (
+                    <Localized
+                      id="subscription-content-credit-issued-to-your-account"
+                      vars={{
+                        creditApplied: getCurrencyFallbackText(creditApplied),
+                      }}
+                      elems={{ strong: <strong></strong> }}
+                    >
+                      <p className="text-green-900 text-sm">
+                        <strong>
+                          {getCurrencyFallbackText(creditApplied)}
+                        </strong>{' '}
+                        credit issued to your account
+                      </p>
+                    </Localized>
+                  ) : null}
+                  {promotionName && (
+                    <Localized
+                      id="subscription-content-coupon-applied"
+                      vars={{
+                        promotionName,
+                      }}
+                    >
+                      <p className="font-bold text-sm text-violet-700">
+                        {promotionName} applied
+                      </p>
                     </Localized>
-                    <Image src={newWindowIcon} alt="" />
-                  </LinkExternal>
-                )}
-              </div>
-              {canResubscribe ? (
-                <>
-                  <div
-                    className="border-none h-px bg-grey-200 my-2"
-                    role="separator"
-                    aria-hidden="true"
-                  ></div>
-                  {isClient && (
-                    <div className="flex items-center gap-1">
-                      <Image
-                        src={alertIcon}
-                        alt=""
-                        width={20}
-                        height={20}
-                        aria-hidden="true"
-                      />
-                      <Localized
-                        id="subscription-content-expires-on-expiry-date"
-                        vars={{
-                          date: currentPeriodEndLongFallback,
-                        }}
-                      >
-                        <p className="text-sm text-yellow-800">
-                          Expires on {currentPeriodEndLongFallback}
-                        </p>
-                      </Localized>
-                    </div>
                   )}
-                </>
-              ) : (
-                <>
                   {nextInvoiceTotal !== undefined && nextInvoiceTotal >= 0 ? (
-                    <>
-                      <div
-                        className="border-none h-px bg-grey-200 my-2"
-                        role="separator"
-                        aria-hidden="true"
-                      ></div>
-                      <div className="text-grey-500">
-                        <Localized
-                          id="subscription-content-next-bill"
-                          vars={{
-                            billedOnDate: currentPeriodEndLongFallback,
-                          }}
-                        >
-                          <p>Next bill • {currentPeriodEndLongFallback}</p>
-                        </Localized>
-                      </div>
+                    <div className="mt-2 text-sm">
                       {nextInvoiceTax ? (
                         <Localized
-                          id="subscription-content-next-bill-with-tax-1"
+                          id="subscription-content-next-bill-excl-disc-with-tax"
                           vars={{
+                            nextBillDate: currentPeriodEndLongFallback,
                             nextInvoiceTotal:
                               getCurrencyFallbackText(nextInvoiceTotal),
                             taxDue: getCurrencyFallbackText(nextInvoiceTax),
                           }}
+                          elems={{ strong: <strong></strong> }}
                         >
                           <p>
-                            {getCurrencyFallbackText(nextInvoiceTotal)} +{' '}
-                            {getCurrencyFallbackText(nextInvoiceTax)} tax
+                            Next bill of{' '}
+                            <strong>
+                              {getCurrencyFallbackText(nextInvoiceTotal)} +{' '}
+                              {getCurrencyFallbackText(nextInvoiceTax)} tax
+                            </strong>
+                            , excluding discounts, is due{' '}
+                            <strong>{currentPeriodEndLongFallback}</strong>
                           </p>
                         </Localized>
                       ) : (
                         <Localized
-                          id="subscription-content-next-bill-no-tax-1"
+                          id="subscription-content-next-bill-excl-no-tax"
                           vars={{
+                            nextBillDate: currentPeriodEndLongFallback,
                             nextInvoiceTotal:
                               getCurrencyFallbackText(nextInvoiceTotal),
                           }}
+                          elems={{ strong: <strong></strong> }}
                         >
-                          <p>{getCurrencyFallbackText(nextInvoiceTotal)}</p>
+                          <p>
+                            Next bill of{' '}
+                            <strong>
+                              {getCurrencyFallbackText(nextInvoiceTotal)}
+                            </strong>
+                            , excluding discounts, is due{' '}
+                            <strong>{currentPeriodEndLongFallback}</strong>
+                          </p>
                         </Localized>
                       )}
-                    </>
+                    </div>
                   ) : null}
                   {nextPromotionName && (
                     <Localized
@@ -615,49 +660,28 @@ export const SubscriptionContent = ({
                       </p>
                     </Localized>
                   )}
-                </>
+                </div>
               )}
-            </div>
-          )}
-          {canResubscribe ? (
-            <div className="flex justify-end w-full tablet:w-auto">
-              <Localized
-                id="subscription-content-button-stay-subscribed"
-                vars={{ productName }}
-                attrs={{ 'aria-label': true }}
-              >
-                <SubmitButton
-                  className="font-bold h-10"
-                  variant={ButtonVariant.SubscriptionManagementPrimary}
-                  onClick={() => setOpenResubscribeDialog(true)}
-                  aria-label={`Stay subscribed to ${productName}`}
-                >
-                  Stay subscribed
-                </SubmitButton>
-              </Localized>
-            </div>
-          ) : (
-            <div className="flex justify-end w-full tablet:w-auto">
               <Localized
-                id="subscription-content-button-cancel-subscription-1"
+                id="subscription-content-button-cancel"
                 vars={{ productName }}
                 attrs={{ 'aria-label': true }}
               >
                 <SubmitButton
-                  className="font-bold h-10"
-                  variant={ButtonVariant.SubscriptionManagementSecondary}
+                  className="h-10"
+                  variant={ButtonVariant.Secondary}
                   onClick={() => {
                     setCheckedState(false);
                     setShowCancel(true);
                   }}
                   aria-label={`Cancel your subscription for ${productName}`}
                 >
-                  Cancel subscription
+                  Cancel
                 </SubmitButton>
               </Localized>
-            </div>
+            </>
           )}
-        </>
+        </section>
       )}
     </>
   );
diff --git a/libs/payments/ui/src/lib/constants.ts b/libs/payments/ui/src/lib/constants.ts
index 219beb61fee..090384b40a4 100644
--- a/libs/payments/ui/src/lib/constants.ts
+++ b/libs/payments/ui/src/lib/constants.ts
@@ -9,7 +9,6 @@ export enum BannerVariant {
   Info = 'info',
   SignedIn = 'signed_in',
   Success = 'success',
-  Warning = 'warning',
 }
 
 export const OFFERING_LINKS = {
diff --git a/libs/shared/assets/src/images/alert-black.svg b/libs/shared/assets/src/images/alert-black.svg
deleted file mode 100644
index 382e878247f..00000000000
--- a/libs/shared/assets/src/images/alert-black.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12.8753 15.6249H11.1253V17.3749H12.8753V15.6249Z" fill="black"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1253 13.9999V8.99992H12.8753V13.9999H11.1253Z" fill="black"/>
-  <path d="M11.9563 4.91992C12.1213 4.91992 12.4253 4.96992 12.6113 5.30492L19.6513 17.9649C19.8323 18.2909 19.7233 18.5719 19.6423 18.7099C19.5613 18.8479 19.3693 19.0799 18.9963 19.0799H5.0043C4.6323 19.0799 4.4403 18.8489 4.3593 18.7119C4.2783 18.5749 4.1683 18.2949 4.3473 17.9689L11.2993 5.30892C11.4853 4.97092 11.7903 4.91992 11.9563 4.91992ZM11.9563 3.16992C11.0973 3.16992 10.2393 3.60292 9.7653 4.46692L2.8133 17.1269C1.8983 18.7929 3.1033 20.8299 5.0043 20.8299H18.9973C20.9043 20.8299 22.1093 18.7809 21.1823 17.1149L14.1423 4.45492C13.6643 3.59792 12.8103 3.16992 11.9563 3.16992Z" fill="black"/>
-</svg>
diff --git a/libs/shared/assets/src/images/alert-yellow.svg b/libs/shared/assets/src/images/alert-yellow.svg
deleted file mode 100644
index 85dfe81e760..00000000000
--- a/libs/shared/assets/src/images/alert-yellow.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.7292 13.0208H9.27088V14.4791H10.7292V13.0208Z" fill="#A7341F"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.27088 11.6666V7.49994H10.7292V11.6666H9.27088Z" fill="#A7341F"/>
-  <path d="M9.96338 4.09993C10.1009 4.09993 10.3542 4.1416 10.5092 4.42077L16.3759 14.9708C16.5267 15.2424 16.4359 15.4766 16.3684 15.5916C16.3009 15.7066 16.1409 15.8999 15.83 15.8999H4.17005C3.86005 15.8999 3.70005 15.7074 3.63255 15.5933C3.56505 15.4791 3.47338 15.2458 3.62255 14.9741L9.41588 4.4241C9.57088 4.14243 9.82505 4.09993 9.96338 4.09993ZM9.96338 2.6416C9.24755 2.6416 8.53255 3.00243 8.13755 3.72243L2.34421 14.2724C1.58171 15.6608 2.58588 17.3583 4.17005 17.3583H15.8309C17.42 17.3583 18.4242 15.6508 17.6517 14.2624L11.785 3.71243C11.3867 2.99827 10.675 2.6416 9.96338 2.6416Z" fill="#A7341F"/>
-</svg>
diff --git a/libs/shared/assets/src/images/arrow-down.svg b/libs/shared/assets/src/images/arrow-down.svg
deleted file mode 100644
index f5f00dff62b..00000000000
--- a/libs/shared/assets/src/images/arrow-down.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <mask id="mask0_11265_18280" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
-    <path d="M0 0H12V12H0V0Z" fill="white"/>
-  </mask>
-  <g mask="url(#mask0_11265_18280)">
-    <path d="M5.43751 0V9.8475L1.02001 5.43L0.225006 6.225L6.00001 12L11.775 6.225L10.98 5.43L6.56251 9.8475V0H5.43751Z" fill="#0060DF"/>
-  </g>
-</svg>
diff --git a/libs/shared/assets/src/images/new-window.svg b/libs/shared/assets/src/images/new-window.svg
deleted file mode 100644
index c0830e99ab1..00000000000
--- a/libs/shared/assets/src/images/new-window.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3.66667 2.66663C2.7465 2.66663 2 3.41313 2 4.33329V12.3333C2 13.2535 2.7465 14 3.66667 14H11.6667C12.5868 14 13.3333 13.2535 13.3333 12.3333V7.99996H12.1667V12.3333C12.1667 12.6091 11.9425 12.8333 11.6667 12.8333H3.66667C3.39083 12.8333 3.16667 12.6091 3.16667 12.3333V4.33329C3.16667 4.05746 3.39083 3.83329 3.66667 3.83329H8V2.66663H3.66667Z" fill="#0060DF"/>
-  <path d="M9.85866 2.66663H12.8333C13.1093 2.66663 13.3333 2.89063 13.3333 3.16663V6.19396C13.3333 6.64129 12.7907 6.86396 12.4767 6.54463L11.3881 5.43679L8.15845 8.66643L7.3335 7.84147L10.5704 4.60459L9.50199 3.51729C9.19132 3.20063 9.41532 2.66663 9.85866 2.66663Z" fill="#0060DF"/>
-</svg>
diff --git a/libs/shared/cms/src/__generated__/gql.ts b/libs/shared/cms/src/__generated__/gql.ts
index 6323e11bf20..6e0d73a4634 100644
--- a/libs/shared/cms/src/__generated__/gql.ts
+++ b/libs/shared/cms/src/__generated__/gql.ts
@@ -17,7 +17,7 @@ type Documents = {
     "\n  query CapabilityServiceByPlanIds($stripePlanIds: [String]!) {\n    purchases(\n      filters: {\n        or: [\n          { stripePlanChoices: { stripePlanChoice: { in: $stripePlanIds } } }\n          {\n            offering: {\n              stripeLegacyPlans: { stripeLegacyPlan: { in: $stripePlanIds } }\n            }\n          }\n        ]\n      }\n      pagination: { limit: 200 }\n    ) {\n      stripePlanChoices {\n        stripePlanChoice\n      }\n      offering {\n        stripeLegacyPlans(pagination: { limit: 200 }) {\n          stripeLegacyPlan\n        }\n        capabilities {\n          slug\n          services {\n            oauthClientId\n          }\n        }\n      }\n    }\n  }\n": typeof types.CapabilityServiceByPlanIdsDocument,
     "\n  query EligibilityContentByOffering($apiIdentifier: String!) {\n    offerings(\n      filters: { apiIdentifier: { eq: $apiIdentifier } }\n      pagination: { limit: 200 }\n    ) {\n      apiIdentifier\n      stripeProductId\n      defaultPurchase {\n        stripePlanChoices {\n          stripePlanChoice\n        }\n      }\n      subGroups {\n        groupName\n        offerings {\n          apiIdentifier\n          stripeProductId\n          defaultPurchase {\n            stripePlanChoices {\n              stripePlanChoice\n            }\n          }\n        }\n      }\n    }\n  }\n": typeof types.EligibilityContentByOfferingDocument,
     "\n  query EligibilityContentByPlanIds($stripePlanIds: [String]!) {\n    purchases(\n      filters: {\n        or: [\n          { stripePlanChoices: { stripePlanChoice: { in: $stripePlanIds } } }\n          {\n            offering: {\n              stripeLegacyPlans: { stripeLegacyPlan: { in: $stripePlanIds } }\n            }\n          }\n        ]\n      }\n      pagination: { limit: 200 }\n    ) {\n      stripePlanChoices {\n        stripePlanChoice\n      }\n      offering {\n        apiIdentifier\n        stripeProductId\n        stripeLegacyPlans(pagination: { limit: 200 }) {\n          stripeLegacyPlan\n        }\n        countries\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n            stripeProductId\n            stripeLegacyPlans(pagination: { limit: 200 }) {\n              stripeLegacyPlan\n            }\n            countries\n          }\n        }\n      }\n    }\n  }\n": typeof types.EligibilityContentByPlanIdsDocument,
-    "\n  query IapOfferingsByStoreIDs($locale: String!, $storeIDs: [String!]!) {\n    iaps(filters: { storeID: { in: $storeIDs } }) {\n      storeID\n      interval\n      offering {\n        apiIdentifier\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n        defaultPurchase {\n          stripePlanChoices {\n            stripePlanChoice\n          }\n          purchaseDetails {\n            productName\n            webIcon\n            localizations(filters: { locale: { eq: $locale } }) {\n              productName\n              webIcon\n            }\n          }\n        }\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n          }\n        }\n      }\n    }\n  }\n": typeof types.IapOfferingsByStoreIDsDocument,
+    "\n  query IapOfferingsByStoreIDs($locale: String!, $storeIDs: [String!]!) {\n    iaps(filters: { storeID: { in: $storeIDs } }) {\n      storeID\n      interval\n      offering {\n        apiIdentifier\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n        defaultPurchase {\n          stripePlanChoices {\n            stripePlanChoice\n          }\n          purchaseDetails {\n            productName\n            localizations(filters: { locale: { eq: $locale } }) {\n              productName\n            }\n          }\n        }\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n          }\n        }\n      }\n    }\n  }\n": typeof types.IapOfferingsByStoreIDsDocument,
     "\n  query Locales {\n    i18NLocales(pagination: { limit: 100 }) {\n      code\n    }\n  }\n": typeof types.LocalesDocument,
     "\n  query Offering($id: ID!, $locale: String!) {\n    offering(documentId: $id) {\n      stripeProductId\n      countries\n      defaultPurchase {\n        purchaseDetails {\n          productName\n          details\n          subtitle\n          webIcon\n          localizations(filters: { locale: { eq: $locale } }) {\n            productName\n            details\n            subtitle\n            webIcon\n          }\n        }\n      }\n    }\n  }\n": typeof types.OfferingDocument,
     "\n  query pageContentByPriceIds($locale: String!, $stripePlanIds: [String]!) {\n    purchases(\n      filters: {\n        or: [\n          { stripePlanChoices: { stripePlanChoice: { in: $stripePlanIds } } }\n          {\n            offering: {\n              stripeLegacyPlans: { stripeLegacyPlan: { in: $stripePlanIds } }\n            }\n          }\n        ]\n      }\n      pagination: { limit: 50 }\n    ) {\n      offering {\n        stripeLegacyPlans(pagination: { limit: 100 }) {\n          stripeLegacyPlan\n        }\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n      }\n      purchaseDetails {\n        productName\n        webIcon\n        localizations(filters: { locale: { eq: $locale } }) {\n          productName\n          webIcon\n        }\n      }\n      stripePlanChoices {\n        stripePlanChoice\n      }\n    }\n  }\n": typeof types.PageContentByPriceIdsDocument,
@@ -30,7 +30,7 @@ const documents: Documents = {
     "\n  query CapabilityServiceByPlanIds($stripePlanIds: [String]!) {\n    purchases(\n      filters: {\n        or: [\n          { stripePlanChoices: { stripePlanChoice: { in: $stripePlanIds } } }\n          {\n            offering: {\n              stripeLegacyPlans: { stripeLegacyPlan: { in: $stripePlanIds } }\n            }\n          }\n        ]\n      }\n      pagination: { limit: 200 }\n    ) {\n      stripePlanChoices {\n        stripePlanChoice\n      }\n      offering {\n        stripeLegacyPlans(pagination: { limit: 200 }) {\n          stripeLegacyPlan\n        }\n        capabilities {\n          slug\n          services {\n            oauthClientId\n          }\n        }\n      }\n    }\n  }\n": types.CapabilityServiceByPlanIdsDocument,
     "\n  query EligibilityContentByOffering($apiIdentifier: String!) {\n    offerings(\n      filters: { apiIdentifier: { eq: $apiIdentifier } }\n      pagination: { limit: 200 }\n    ) {\n      apiIdentifier\n      stripeProductId\n      defaultPurchase {\n        stripePlanChoices {\n          stripePlanChoice\n        }\n      }\n      subGroups {\n        groupName\n        offerings {\n          apiIdentifier\n          stripeProductId\n          defaultPurchase {\n            stripePlanChoices {\n              stripePlanChoice\n            }\n          }\n        }\n      }\n    }\n  }\n": types.EligibilityContentByOfferingDocument,
     "\n  query EligibilityContentByPlanIds($stripePlanIds: [String]!) {\n    purchases(\n      filters: {\n        or: [\n          { stripePlanChoices: { stripePlanChoice: { in: $stripePlanIds } } }\n          {\n            offering: {\n              stripeLegacyPlans: { stripeLegacyPlan: { in: $stripePlanIds } }\n            }\n          }\n        ]\n      }\n      pagination: { limit: 200 }\n    ) {\n      stripePlanChoices {\n        stripePlanChoice\n      }\n      offering {\n        apiIdentifier\n        stripeProductId\n        stripeLegacyPlans(pagination: { limit: 200 }) {\n          stripeLegacyPlan\n        }\n        countries\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n            stripeProductId\n            stripeLegacyPlans(pagination: { limit: 200 }) {\n              stripeLegacyPlan\n            }\n            countries\n          }\n        }\n      }\n    }\n  }\n": types.EligibilityContentByPlanIdsDocument,
-    "\n  query IapOfferingsByStoreIDs($locale: String!, $storeIDs: [String!]!) {\n    iaps(filters: { storeID: { in: $storeIDs } }) {\n      storeID\n      interval\n      offering {\n        apiIdentifier\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n        defaultPurchase {\n          stripePlanChoices {\n            stripePlanChoice\n          }\n          purchaseDetails {\n            productName\n            webIcon\n            localizations(filters: { locale: { eq: $locale } }) {\n              productName\n              webIcon\n            }\n          }\n        }\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n          }\n        }\n      }\n    }\n  }\n": types.IapOfferingsByStoreIDsDocument,
+    "\n  query IapOfferingsByStoreIDs($locale: String!, $storeIDs: [String!]!) {\n    iaps(filters: { storeID: { in: $storeIDs } }) {\n      storeID\n      interval\n      offering {\n        apiIdentifier\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n        defaultPurchase {\n          stripePlanChoices {\n            stripePlanChoice\n          }\n          purchaseDetails {\n            productName\n            localizations(filters: { locale: { eq: $locale } }) {\n              productName\n            }\n          }\n        }\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n          }\n        }\n      }\n    }\n  }\n": types.IapOfferingsByStoreIDsDocument,
     "\n  query Locales {\n    i18NLocales(pagination: { limit: 100 }) {\n      code\n    }\n  }\n": types.LocalesDocument,
     "\n  query Offering($id: ID!, $locale: String!) {\n    offering(documentId: $id) {\n      stripeProductId\n      countries\n      defaultPurchase {\n        purchaseDetails {\n          productName\n          details\n          subtitle\n          webIcon\n          localizations(filters: { locale: { eq: $locale } }) {\n            productName\n            details\n            subtitle\n            webIcon\n          }\n        }\n      }\n    }\n  }\n": types.OfferingDocument,
     "\n  query pageContentByPriceIds($locale: String!, $stripePlanIds: [String]!) {\n    purchases(\n      filters: {\n        or: [\n          { stripePlanChoices: { stripePlanChoice: { in: $stripePlanIds } } }\n          {\n            offering: {\n              stripeLegacyPlans: { stripeLegacyPlan: { in: $stripePlanIds } }\n            }\n          }\n        ]\n      }\n      pagination: { limit: 50 }\n    ) {\n      offering {\n        stripeLegacyPlans(pagination: { limit: 100 }) {\n          stripeLegacyPlan\n        }\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n      }\n      purchaseDetails {\n        productName\n        webIcon\n        localizations(filters: { locale: { eq: $locale } }) {\n          productName\n          webIcon\n        }\n      }\n      stripePlanChoices {\n        stripePlanChoice\n      }\n    }\n  }\n": types.PageContentByPriceIdsDocument,
@@ -69,7 +69,7 @@ export function graphql(source: "\n  query EligibilityContentByPlanIds($stripePl
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query IapOfferingsByStoreIDs($locale: String!, $storeIDs: [String!]!) {\n    iaps(filters: { storeID: { in: $storeIDs } }) {\n      storeID\n      interval\n      offering {\n        apiIdentifier\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n        defaultPurchase {\n          stripePlanChoices {\n            stripePlanChoice\n          }\n          purchaseDetails {\n            productName\n            webIcon\n            localizations(filters: { locale: { eq: $locale } }) {\n              productName\n              webIcon\n            }\n          }\n        }\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query IapOfferingsByStoreIDs($locale: String!, $storeIDs: [String!]!) {\n    iaps(filters: { storeID: { in: $storeIDs } }) {\n      storeID\n      interval\n      offering {\n        apiIdentifier\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n        defaultPurchase {\n          stripePlanChoices {\n            stripePlanChoice\n          }\n          purchaseDetails {\n            productName\n            webIcon\n            localizations(filters: { locale: { eq: $locale } }) {\n              productName\n              webIcon\n            }\n          }\n        }\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n          }\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query IapOfferingsByStoreIDs($locale: String!, $storeIDs: [String!]!) {\n    iaps(filters: { storeID: { in: $storeIDs } }) {\n      storeID\n      interval\n      offering {\n        apiIdentifier\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n        defaultPurchase {\n          stripePlanChoices {\n            stripePlanChoice\n          }\n          purchaseDetails {\n            productName\n            localizations(filters: { locale: { eq: $locale } }) {\n              productName\n            }\n          }\n        }\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query IapOfferingsByStoreIDs($locale: String!, $storeIDs: [String!]!) {\n    iaps(filters: { storeID: { in: $storeIDs } }) {\n      storeID\n      interval\n      offering {\n        apiIdentifier\n        commonContent {\n          supportUrl\n          localizations(filters: { locale: { eq: $locale } }) {\n            supportUrl\n          }\n        }\n        defaultPurchase {\n          stripePlanChoices {\n            stripePlanChoice\n          }\n          purchaseDetails {\n            productName\n            localizations(filters: { locale: { eq: $locale } }) {\n              productName\n            }\n          }\n        }\n        subGroups {\n          groupName\n          offerings {\n            apiIdentifier\n          }\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/libs/shared/cms/src/__generated__/graphql.ts b/libs/shared/cms/src/__generated__/graphql.ts
index cf69bf27ea3..8bd3c2e8cd5 100644
--- a/libs/shared/cms/src/__generated__/graphql.ts
+++ b/libs/shared/cms/src/__generated__/graphql.ts
@@ -1792,7 +1792,7 @@ export type RelyingParty = {
   createdAt: Maybe<Scalars['DateTime']['output']>;
   documentId: Scalars['ID']['output'];
   entrypoint: Maybe<Scalars['String']['output']>;
-  l10nId: Maybe<Scalars['String']['output']>;
+  l10nId: Scalars['String']['output'];
   name: Maybe<Scalars['String']['output']>;
   publishedAt: Maybe<Scalars['DateTime']['output']>;
   shared: ComponentAccountsShared;
@@ -2382,7 +2382,7 @@ export type IapOfferingsByStoreIDsQueryVariables = Exact<{
 }>;
 
 
-export type IapOfferingsByStoreIDsQuery = { __typename?: 'Query', iaps: Array<{ __typename?: 'Iap', storeID: string, interval: Enum_Iap_Interval, offering: { __typename?: 'Offering', apiIdentifier: string, commonContent: { __typename?: 'CommonContent', supportUrl: string, localizations: Array<{ __typename?: 'CommonContent', supportUrl: string } | null> } | null, defaultPurchase: { __typename?: 'Purchase', stripePlanChoices: Array<{ __typename?: 'ComponentStripeStripePlanChoices', stripePlanChoice: string } | null> | null, purchaseDetails: { __typename?: 'PurchaseDetail', productName: string, webIcon: string, localizations: Array<{ __typename?: 'PurchaseDetail', productName: string, webIcon: string } | null> } | null } | null, subGroups: Array<{ __typename?: 'Subgroup', groupName: string | null, offerings: Array<{ __typename?: 'Offering', apiIdentifier: string } | null> } | null> } | null } | null> };
+export type IapOfferingsByStoreIDsQuery = { __typename?: 'Query', iaps: Array<{ __typename?: 'Iap', storeID: string, interval: Enum_Iap_Interval, offering: { __typename?: 'Offering', apiIdentifier: string, commonContent: { __typename?: 'CommonContent', supportUrl: string, localizations: Array<{ __typename?: 'CommonContent', supportUrl: string } | null> } | null, defaultPurchase: { __typename?: 'Purchase', stripePlanChoices: Array<{ __typename?: 'ComponentStripeStripePlanChoices', stripePlanChoice: string } | null> | null, purchaseDetails: { __typename?: 'PurchaseDetail', productName: string, localizations: Array<{ __typename?: 'PurchaseDetail', productName: string } | null> } | null } | null, subGroups: Array<{ __typename?: 'Subgroup', groupName: string | null, offerings: Array<{ __typename?: 'Offering', apiIdentifier: string } | null> } | null> } | null } | null> };
 
 export type LocalesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2427,7 +2427,7 @@ export type RelyingPartiesQueryVariables = Exact<{
 }>;
 
 
-export type RelyingPartiesQuery = { __typename?: 'Query', relyingParties: Array<{ __typename?: 'RelyingParty', clientId: string | null, entrypoint: string | null, name: string | null, l10nId: string | null, shared: { __typename?: 'ComponentAccountsShared', buttonColor: string | null, logoUrl: string | null, logoAltText: string | null, emailFromName: string | null, emailLogoUrl: string | null, emailLogoAltText: string | null, emailLogoWidth: string | null, pageTitle: string | null, headerLogoUrl: string | null, headerLogoAltText: string | null, favicon: string | null, featureFlags: { __typename?: 'ComponentAccountsFeatureFlags', syncConfirmedPageHideCTA: boolean | null, syncHidePromoAfterLogin: boolean | null } | null, backgrounds: { __typename?: 'ComponentAccountsSharedBackgrounds', defaultLayout: string | null, header: string | null, splitLayout: string | null, splitLayoutAltText: string | null } | null }, EmailFirstPage: { __typename?: 'ComponentAccountsPageConfig', logoUrl: string | null, logoAltText: string | null, headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null }, SignupSetPasswordPage: { __typename?: 'ComponentAccountsPageConfig', logoUrl: string | null, logoAltText: string | null, headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null }, SignupConfirmCodePage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null }, SignupConfirmedSyncPage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null, primaryImage: { __typename?: 'ComponentAccountsImage', url: string, altText: string } | null } | null, SigninPage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null }, SigninTokenCodePage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null } | null, SigninUnblockCodePage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null } | null, NewDeviceLoginEmail: { __typename?: 'ComponentAccountsEmailConfig', subject: string, headline: string, description: string } | null, VerifyLoginCodeEmail: { __typename?: 'ComponentAccountsEmailConfig', subject: string, headline: string, description: string } | null, VerifyShortCodeEmail: { __typename?: 'ComponentAccountsEmailConfig', subject: string, headline: string, description: string } | null } | null> };
+export type RelyingPartiesQuery = { __typename?: 'Query', relyingParties: Array<{ __typename?: 'RelyingParty', clientId: string | null, entrypoint: string | null, name: string | null, l10nId: string, shared: { __typename?: 'ComponentAccountsShared', buttonColor: string | null, logoUrl: string | null, logoAltText: string | null, emailFromName: string | null, emailLogoUrl: string | null, emailLogoAltText: string | null, emailLogoWidth: string | null, pageTitle: string | null, headerLogoUrl: string | null, headerLogoAltText: string | null, favicon: string | null, featureFlags: { __typename?: 'ComponentAccountsFeatureFlags', syncConfirmedPageHideCTA: boolean | null, syncHidePromoAfterLogin: boolean | null } | null, backgrounds: { __typename?: 'ComponentAccountsSharedBackgrounds', defaultLayout: string | null, header: string | null, splitLayout: string | null, splitLayoutAltText: string | null } | null }, EmailFirstPage: { __typename?: 'ComponentAccountsPageConfig', logoUrl: string | null, logoAltText: string | null, headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null }, SignupSetPasswordPage: { __typename?: 'ComponentAccountsPageConfig', logoUrl: string | null, logoAltText: string | null, headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null }, SignupConfirmCodePage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null }, SignupConfirmedSyncPage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null, primaryImage: { __typename?: 'ComponentAccountsImage', url: string, altText: string } | null } | null, SigninPage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null }, SigninTokenCodePage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null } | null, SigninUnblockCodePage: { __typename?: 'ComponentAccountsPageConfig', headline: string, description: string | null, primaryButtonText: string, pageTitle: string | null, splitLayout: boolean | null } | null, NewDeviceLoginEmail: { __typename?: 'ComponentAccountsEmailConfig', subject: string, headline: string, description: string } | null, VerifyLoginCodeEmail: { __typename?: 'ComponentAccountsEmailConfig', subject: string, headline: string, description: string } | null, VerifyShortCodeEmail: { __typename?: 'ComponentAccountsEmailConfig', subject: string, headline: string, description: string } | null } | null> };
 
 export type ServicesWithCapabilitiesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2438,7 +2438,7 @@ export type ServicesWithCapabilitiesQuery = { __typename?: 'Query', services: Ar
 export const CapabilityServiceByPlanIdsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CapabilityServiceByPlanIds"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"purchases"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"or"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripePlanChoices"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripePlanChoice"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}}}]}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"offering"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripeLegacyPlans"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripeLegacyPlan"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}}}]}}]}}]}}]}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"200"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoice"}}]}},{"kind":"Field","name":{"kind":"Name","value":"offering"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripeLegacyPlans"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"200"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripeLegacyPlan"}}]}},{"kind":"Field","name":{"kind":"Name","value":"capabilities"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"services"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"oauthClientId"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<CapabilityServiceByPlanIdsQuery, CapabilityServiceByPlanIdsQueryVariables>;
 export const EligibilityContentByOfferingDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"EligibilityContentByOffering"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"apiIdentifier"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"offerings"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"apiIdentifier"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"apiIdentifier"}}}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"200"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiIdentifier"}},{"kind":"Field","name":{"kind":"Name","value":"stripeProductId"}},{"kind":"Field","name":{"kind":"Name","value":"defaultPurchase"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoice"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"subGroups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"groupName"}},{"kind":"Field","name":{"kind":"Name","value":"offerings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiIdentifier"}},{"kind":"Field","name":{"kind":"Name","value":"stripeProductId"}},{"kind":"Field","name":{"kind":"Name","value":"defaultPurchase"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoice"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<EligibilityContentByOfferingQuery, EligibilityContentByOfferingQueryVariables>;
 export const EligibilityContentByPlanIdsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"EligibilityContentByPlanIds"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"purchases"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"or"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripePlanChoices"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripePlanChoice"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}}}]}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"offering"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripeLegacyPlans"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripeLegacyPlan"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}}}]}}]}}]}}]}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"200"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoice"}}]}},{"kind":"Field","name":{"kind":"Name","value":"offering"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiIdentifier"}},{"kind":"Field","name":{"kind":"Name","value":"stripeProductId"}},{"kind":"Field","name":{"kind":"Name","value":"stripeLegacyPlans"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"200"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripeLegacyPlan"}}]}},{"kind":"Field","name":{"kind":"Name","value":"countries"}},{"kind":"Field","name":{"kind":"Name","value":"subGroups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"groupName"}},{"kind":"Field","name":{"kind":"Name","value":"offerings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiIdentifier"}},{"kind":"Field","name":{"kind":"Name","value":"stripeProductId"}},{"kind":"Field","name":{"kind":"Name","value":"stripeLegacyPlans"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"200"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripeLegacyPlan"}}]}},{"kind":"Field","name":{"kind":"Name","value":"countries"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<EligibilityContentByPlanIdsQuery, EligibilityContentByPlanIdsQueryVariables>;
-export const IapOfferingsByStoreIDsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"IapOfferingsByStoreIDs"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"locale"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"storeIDs"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"iaps"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"storeID"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storeIDs"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storeID"}},{"kind":"Field","name":{"kind":"Name","value":"interval"}},{"kind":"Field","name":{"kind":"Name","value":"offering"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiIdentifier"}},{"kind":"Field","name":{"kind":"Name","value":"commonContent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"supportUrl"}},{"kind":"Field","name":{"kind":"Name","value":"localizations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"locale"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"locale"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"supportUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"defaultPurchase"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoice"}}]}},{"kind":"Field","name":{"kind":"Name","value":"purchaseDetails"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productName"}},{"kind":"Field","name":{"kind":"Name","value":"webIcon"}},{"kind":"Field","name":{"kind":"Name","value":"localizations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"locale"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"locale"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productName"}},{"kind":"Field","name":{"kind":"Name","value":"webIcon"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"subGroups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"groupName"}},{"kind":"Field","name":{"kind":"Name","value":"offerings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiIdentifier"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<IapOfferingsByStoreIDsQuery, IapOfferingsByStoreIDsQueryVariables>;
+export const IapOfferingsByStoreIDsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"IapOfferingsByStoreIDs"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"locale"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"storeIDs"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"iaps"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"storeID"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storeIDs"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storeID"}},{"kind":"Field","name":{"kind":"Name","value":"interval"}},{"kind":"Field","name":{"kind":"Name","value":"offering"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiIdentifier"}},{"kind":"Field","name":{"kind":"Name","value":"commonContent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"supportUrl"}},{"kind":"Field","name":{"kind":"Name","value":"localizations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"locale"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"locale"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"supportUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"defaultPurchase"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoice"}}]}},{"kind":"Field","name":{"kind":"Name","value":"purchaseDetails"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productName"}},{"kind":"Field","name":{"kind":"Name","value":"localizations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"locale"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"locale"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productName"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"subGroups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"groupName"}},{"kind":"Field","name":{"kind":"Name","value":"offerings"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiIdentifier"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<IapOfferingsByStoreIDsQuery, IapOfferingsByStoreIDsQueryVariables>;
 export const LocalesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Locales"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"i18NLocales"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"100"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}}]}}]}}]} as unknown as DocumentNode<LocalesQuery, LocalesQueryVariables>;
 export const OfferingDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Offering"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"locale"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"offering"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"documentId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripeProductId"}},{"kind":"Field","name":{"kind":"Name","value":"countries"}},{"kind":"Field","name":{"kind":"Name","value":"defaultPurchase"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"purchaseDetails"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productName"}},{"kind":"Field","name":{"kind":"Name","value":"details"}},{"kind":"Field","name":{"kind":"Name","value":"subtitle"}},{"kind":"Field","name":{"kind":"Name","value":"webIcon"}},{"kind":"Field","name":{"kind":"Name","value":"localizations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"locale"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"locale"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productName"}},{"kind":"Field","name":{"kind":"Name","value":"details"}},{"kind":"Field","name":{"kind":"Name","value":"subtitle"}},{"kind":"Field","name":{"kind":"Name","value":"webIcon"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<OfferingQuery, OfferingQueryVariables>;
 export const PageContentByPriceIdsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"pageContentByPriceIds"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"locale"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"purchases"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"or"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripePlanChoices"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripePlanChoice"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}}}]}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"offering"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripeLegacyPlans"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stripeLegacyPlan"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"stripePlanIds"}}}]}}]}}]}}]}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"50"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"offering"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripeLegacyPlans"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"100"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripeLegacyPlan"}}]}},{"kind":"Field","name":{"kind":"Name","value":"commonContent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"supportUrl"}},{"kind":"Field","name":{"kind":"Name","value":"localizations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"locale"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"locale"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"supportUrl"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"purchaseDetails"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productName"}},{"kind":"Field","name":{"kind":"Name","value":"webIcon"}},{"kind":"Field","name":{"kind":"Name","value":"localizations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"locale"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"locale"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productName"}},{"kind":"Field","name":{"kind":"Name","value":"webIcon"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stripePlanChoice"}}]}}]}}]}}]} as unknown as DocumentNode<PageContentByPriceIdsQuery, PageContentByPriceIdsQueryVariables>;
diff --git a/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/factories.ts b/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/factories.ts
index 3436c7fe225..11c4366d8bd 100644
--- a/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/factories.ts
+++ b/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/factories.ts
@@ -63,10 +63,7 @@ export const IapOfferingDefaultPurchaseFactory = (
   stripePlanChoices: [IapOfferingPurchaseStripePlanChoiceResultFactory()],
   purchaseDetails: {
     productName: faker.string.sample(),
-    webIcon: faker.internet.url(),
-    localizations: [
-      { productName: faker.string.sample(), webIcon: faker.internet.url() },
-    ],
+    localizations: [{ productName: faker.string.sample() }],
   },
   ...override,
 });
diff --git a/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/query.ts b/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/query.ts
index d49cd3032a2..dedc66cf80b 100644
--- a/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/query.ts
+++ b/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/query.ts
@@ -23,10 +23,8 @@ export const iapOfferingsByStoreIDsQuery = graphql(`
           }
           purchaseDetails {
             productName
-            webIcon
             localizations(filters: { locale: { eq: $locale } }) {
               productName
-              webIcon
             }
           }
         }
diff --git a/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/types.ts b/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/types.ts
index bb683a67873..e266b4e1a3c 100644
--- a/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/types.ts
+++ b/libs/shared/cms/src/lib/queries/iap-offerings-by-storeids/types.ts
@@ -15,7 +15,6 @@ export interface IapOfferingSubGroupResult {
 
 export interface IapOfferingDefaultPurchaseDetails {
   productName: string;
-  webIcon: string;
 }
 
 export interface IapOfferingPurchaseStripePlanChoiceResult {