diff --git a/libs/payments/ui/src/lib/client/components/CheckoutForm.tsx b/libs/payments/ui/src/lib/client/components/CheckoutForm.tsx
index 9e3400d0512..dddc52d06a8 100644
--- a/libs/payments/ui/src/lib/client/components/CheckoutForm.tsx
+++ b/libs/payments/ui/src/lib/client/components/CheckoutForm.tsx
@@ -159,8 +159,8 @@ export function CheckoutForm({
       <div
         className={
           formEnabled
-            ? ''
-            : 'cursor-not-allowed relative focus:border-blue-400 focus:outline-none 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'
+            ? 'mt-10'
+            : 'mt-10 cursor-not-allowed relative focus:border-blue-400 focus:outline-none 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={() => setShowConsentError(true)}
       >
@@ -229,11 +229,6 @@ export function CheckoutForm({
               aria-disabled={
                 !stripeFieldsComplete || !nonStripeFieldsComplete || loading
               }
-              className={
-                formEnabled
-                  ? ''
-                  : 'cursor-not-allowed relative focus:border-blue-400 focus:outline-none 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'
-              }
             >
               <Image src={LockImage} className="h-4 w-4 mx-3" alt="" />
               <Localized id="next-new-user-submit">Subscribe Now</Localized>
diff --git a/libs/payments/ui/src/lib/client/components/PrimaryButton.tsx b/libs/payments/ui/src/lib/client/components/PrimaryButton.tsx
index 5f25bd68924..6835a9279d5 100644
--- a/libs/payments/ui/src/lib/client/components/PrimaryButton.tsx
+++ b/libs/payments/ui/src/lib/client/components/PrimaryButton.tsx
@@ -10,7 +10,7 @@ export function PrimaryButton({ children, ...props }: PrimaryButtonProps) {
   return (
     <button
       {...props}
-      className={`flex items-center justify-center bg-blue-500 font-semibold h-12 rounded-md text-white w-full p-4 mt-6 hover:bg-blue-700 aria-disabled:relative aria-disabled:after:absolute aria-disabled:after:content-[''] aria-disabled:after:top-0 aria-disabled:after:left-0 aria-disabled:after:w-full aria-disabled:after:h-full aria-disabled:after:bg-white aria-disabled:after:opacity-50 aria-disabled:after:z-30 aria-disabled:border-none ${props.className}`}
+      className={`flex items-center justify-center bg-blue-500 font-semibold h-12 rounded-md text-white w-full p-4 mt-6 hover:bg-blue-700 z-10 aria-disabled:relative aria-disabled:after:absolute aria-disabled:after:content-[''] aria-disabled:after:top-0 aria-disabled:after:left-0 aria-disabled:after:w-full aria-disabled:after:h-full aria-disabled:after:bg-white aria-disabled:after:opacity-50 aria-disabled:after:z-30 aria-disabled:border-none ${props.className}`}
     >
       {children}
     </button>