diff --git a/apps/learn-card-app/src/assets/sass/login.scss b/apps/learn-card-app/src/assets/sass/login.scss
index 234ad5b819..d404b41924 100644
--- a/apps/learn-card-app/src/assets/sass/login.scss
+++ b/apps/learn-card-app/src/assets/sass/login.scss
@@ -38,6 +38,27 @@
     }
 }
 
+.PhoneInput.login-phone-input.gameflow {
+    .PhoneInputInput {
+        background-color: var(--ion-color-grayscale-100);
+        border: 1px solid var(--ion-color-grayscale-200);
+        color: var(--ion-color-grayscale-900);
+
+        &::placeholder {
+            color: var(--ion-color-grayscale-500);
+        }
+    }
+
+    .PhoneInputCountry {
+        background-color: var(--ion-color-grayscale-100);
+        border: 1px solid var(--ion-color-grayscale-200);
+
+        .PhoneInputCountryIcon {
+            border: solid 1px var(--ion-color-grayscale-400);
+        }
+    }
+}
+
 .react-code-input:not(.small) > input:not([value='']) {
     background-color: white;
     transition: background-color 0.3s ease-in;
@@ -45,12 +66,15 @@
 
 .react-code-input.small {
     display: flex !important;
-    justify-content: space-between;
-    padding-left: 2px;
-    padding-right: 2px;
+    width: 100%;
+    justify-content: center;
+    flex-wrap: nowrap;
+    gap: 8px;
 
     & > input {
-        width: 14%;
+        flex: 0 0 auto;
+        width: clamp(34px, 9vw, 46px);
+        min-width: 0;
         border-radius: 12px;
         font-size: 24px;
         height: 60px;
@@ -68,11 +92,56 @@
         }
 
         @media (max-width: 479px) {
-            width: 14%;
+            width: clamp(30px, 10vw, 44px);
         }
 
         @media (max-width: 380px) {
-            width: 12.25%;
+            width: clamp(28px, 10vw, 40px);
+        }
+    }
+}
+
+.react-code-input.gameflow:not(.small) {
+    & > input {
+        background-color: var(--ion-color-grayscale-100);
+        border: 1px solid var(--ion-color-grayscale-200);
+        color: var(--ion-color-grayscale-900);
+
+        &:focus {
+            border: 1px solid var(--ion-color-grayscale-300);
+            background-color: white;
+        }
+    }
+}
+
+.react-code-input.small.gameflow {
+    display: grid !important;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    width: 100%;
+    max-width: 100%;
+    gap: 8px;
+
+    @media (max-width: 420px) {
+        gap: 6px;
+    }
+
+    @media (max-width: 360px) {
+        gap: 5px;
+    }
+
+    & > input {
+        flex: initial;
+        width: 100% !important;
+        min-width: 0;
+        background-color: var(--ion-color-grayscale-100);
+        border: 1px solid var(--ion-color-grayscale-200);
+        color: var(--ion-color-grayscale-900);
+        font-size: 20px;
+        height: 56px;
+
+        &:focus {
+            border: 1px solid var(--ion-color-grayscale-300);
+            background-color: white;
         }
     }
 }
diff --git a/apps/learn-card-app/src/components/learncard/AccountSwitcherModal.tsx b/apps/learn-card-app/src/components/learncard/AccountSwitcherModal.tsx
index a4fd6ef304..ba39b28621 100644
--- a/apps/learn-card-app/src/components/learncard/AccountSwitcherModal.tsx
+++ b/apps/learn-card-app/src/components/learncard/AccountSwitcherModal.tsx
@@ -254,7 +254,7 @@ const AccountSwitcherModal: React.FC<AccountSwitcherModalProps> = ({
                             className="shrink-0 w-full max-w-[400px] py-[10px] px-[15px] text-[20px] bg-grayscale-900 rounded-full font-notoSans text-white shadow-button-bottom disabled:opacity-60"
                             disabled={!familyCredential?.boostId || isSwitching}
                         >
-                            Add Player
+                            Add New Player
                         </button>
                         <button
                             onClick={isFromGame ? handleBackToGame : closeAllModals}
diff --git a/apps/learn-card-app/src/pages/consentFlow/GameFlow/FullScreenGameFlow.tsx b/apps/learn-card-app/src/pages/consentFlow/GameFlow/FullScreenGameFlow.tsx
index bb09741faa..d9dd87c335 100644
--- a/apps/learn-card-app/src/pages/consentFlow/GameFlow/FullScreenGameFlow.tsx
+++ b/apps/learn-card-app/src/pages/consentFlow/GameFlow/FullScreenGameFlow.tsx
@@ -147,7 +147,7 @@ const FullScreenGameFlow: React.FC<FullScreenGameFlowProps> = ({ contractDetails
                 isFromGame={isFromGame}
             />
         ),
-        [GameFlowStep.confirmation]: (
+        [GameFlowStep.confirmation]: selectedUser ? (
             <AddGameConfirmationPrompt
                 user={selectedUser}
                 contractDetails={contractDetails}
@@ -158,14 +158,14 @@ const FullScreenGameFlow: React.FC<FullScreenGameFlowProps> = ({ contractDetails
                 handleBackToGame={handleBackToGame}
                 handleSelectADifferentPlayer={() => setStep(GameFlowStep.whosPlaying)}
             />
-        ),
-        [GameFlowStep.success]: (
+        ) : null,
+        [GameFlowStep.success]: selectedUser ? (
             <GameAccessSuccessPrompt
                 user={selectedUser}
                 contractDetails={contractDetails}
                 isFromGame={isFromGame}
             />
-        ),
+        ) : null,
         [GameFlowStep.backToGame]: (
             <ReturnToGamePrompt
                 contractDetails={contractDetails}
@@ -176,13 +176,15 @@ const FullScreenGameFlow: React.FC<FullScreenGameFlowProps> = ({ contractDetails
 
     return (
         <div
-            className="h-full w-full bg-cover bg-emerald-700"
+            className="min-h-screen h-full w-full bg-cover bg-emerald-700"
             style={{
                 backgroundImage: `url(${contractDetails?.image})`,
             }}
         >
-            <div className="h-full w-full bg-black bg-opacity-20 backdrop-blur-[5px] flex items-center justify-center">
-                <div className="p-[30px] max-w-[400px]">{stepToComponent[step]}</div>
+            <div className="min-h-screen w-full h-full bg-black bg-opacity-20 backdrop-blur-[5px] flex flex-col items-center overflow-y-auto py-[20px] md:py-[40px]">
+                <div className="p-[30px] max-w-[400px] w-full md:my-auto">
+                    {stepToComponent[step]}
+                </div>
             </div>
         </div>
     );
diff --git a/apps/learn-card-app/src/pages/consentFlow/GameFlow/GameLogin.tsx b/apps/learn-card-app/src/pages/consentFlow/GameFlow/GameLogin.tsx
index b9d14872cd..155f0cd7b9 100644
--- a/apps/learn-card-app/src/pages/consentFlow/GameFlow/GameLogin.tsx
+++ b/apps/learn-card-app/src/pages/consentFlow/GameFlow/GameLogin.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 
+import { ArrowLeft, Mail, Phone } from 'lucide-react';
+
 import useFirebase from '../../../hooks/useFirebase';
 import { LoginTypesEnum } from 'learn-card-base';
 
 import EmailForm from '../../../pages/login/forms/EmailForm';
 import PhoneForm from '../../../pages/login/forms/PhoneForm';
-import PhoneIcon from 'learn-card-base/assets/images/Phone.white.svg';
 import AppleIcon from 'learn-card-base/assets/images/apple-logo.svg';
 import GoogleIcon from 'learn-card-base/assets/images/google-G-logo.svg';
-import EmailIcon from 'learn-card-base/assets/images/email-circle-icon.svg';
 import LearnCardAppIcon from '../../../assets/images/lca-icon-v2.png';
 
 type GameLoginProps = {
@@ -19,6 +19,8 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
     const [activeLoginType, setActiveLoginType] = useState<LoginTypesEnum>(LoginTypesEnum.email);
     const { appleLogin, googleLogin } = useFirebase();
 
+    const [showSocialLogins, setShowSocialLogins] = useState(true);
+
     // toggle between whether this is "login" or "sign up"
     //   no functional difference, we just change some text
     const [isLogin, setIsLogin] = useState(true);
@@ -42,10 +44,20 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
             <EmailForm
                 formTitleOverride="Email"
                 buttonTitleOverride="Continue"
-                formTitleClassNameOverride="font-montserrat text-[14px] font-[500] leading-[24px] text-grayscale-600 uppercase"
-                buttonClassName="font-poppins !text-[16px] leading-[28px] tracking-[0.75px] !mt-0"
+                formTitleClassNameOverride="text-grayscale-800 text-base text-center font-medium"
+                buttonClassName="font-poppins !text-[16px] leading-[28px] tracking-[0.75px] !mt-0 !bg-emerald-700 hover:opacity-90 active:opacity-85 transition-opacity"
+                emailInputClassName="bg-grayscale-100 text-grayscale-900 placeholder:text-grayscale-500 tracking-normal"
+                emailInputVariant="appStore"
+                emailErrorPlacement="below"
+                verificationCodeInputClassName="gameflow"
+                startOverClassNameOverride="text-grayscale-800 underline font-bold"
+                resendCodeButtonClassNameOverride="text-grayscale-600 font-bold mt-4 border-b-grayscale-600 border-solid border-b-[1px]"
                 suppressRedirect
                 customRedirectUrl={window.location.href}
+                resetRedirectPath={null}
+                smallVerificationInput
+                setShowSocialLogins={setShowSocialLogins}
+                showSocialLogins={showSocialLogins}
             />
         );
     } else if (activeLoginType === LoginTypesEnum.phone) {
@@ -53,8 +65,14 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
             <PhoneForm
                 formTitleOverride="Phone"
                 formTitleClassNameOverride="font-montserrat text-[14px] font-[500] leading-[24px] text-grayscale-600 uppercase"
-                buttonClassName="font-poppins !text-[16px] leading-[28px] tracking-[0.75px]"
+                buttonClassName="font-poppins !text-[16px] leading-[28px] tracking-[0.75px] !bg-emerald-700 hover:opacity-90 active:opacity-85 transition-opacity"
                 smallVerificationInput
+                phoneInputClassNameOverride="gameflow"
+                verificationCodeInputClassName="gameflow"
+                startOverClassNameOverride="text-grayscale-800 underline font-bold"
+                resendCodeButtonClassNameOverride="text-grayscale-600 font-bold mt-4 border-b-grayscale-600 border-solid border-b-[1px]"
+                setShowSocialLogins={setShowSocialLogins}
+                showSocialLogins={showSocialLogins}
             />
         );
     }
@@ -75,7 +93,6 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
     ];
 
     const isPhone = activeLoginType === LoginTypesEnum.phone;
-    const notActiveLoginTypeIcon = isPhone ? EmailIcon : PhoneIcon;
 
     return (
         <div className="flex flex-col gap-[10px]">
@@ -90,57 +107,52 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
                     LEARNCARD
                 </h6>
 
-                <p className="text-grayscale-800 uppercase font-montserrat text-[14px] font-[500] leading-[24px] mr-auto">
-                    {isLogin ? 'Login' : 'Sign Up'}
+                <p className="text-grayscale-500 font-montserrat text-[14px] font-[500] mr-auto">
+                    Login to Learncard
                 </p>
 
                 <div className="w-full max-w-[500px]">
-                    <div className="w-full flex gap-[20px] border-grayscale-500 border-solid border-b-[1px] border-opacity-30 pb-[30px]">
-                        <button
-                            className={`flex items-center justify-center bg-primary-default border-solid border-grayscale-100 rounded-full w-[45px] h-[45px] ${isPhone ? 'border-0' : 'border-[1px] '
-                                }`}
-                            onClick={handleActiveLoginType}
-                        >
-                            <img
-                                src={notActiveLoginTypeIcon}
-                                alt={`${isPhone ? 'email' : 'phone'} icon`}
-                                className={isPhone ? 'w-full h-full' : 'w-[25px] h-[25px]'}
-                            />
-                        </button>
-                        {socialLogins.map(socialLogin => {
-                            const { id, src, onClick, alt } = socialLogin;
-                            return (
-                                <button
-                                    key={id}
-                                    className="flex items-center justify-center border-solid border-[1px] border-grayscale-100 rounded-full w-[45px] h-[45px]"
-                                    onClick={onClick}
-                                >
-                                    <img src={src} alt={alt} className="w-[28px] h-[28px]" />
-                                </button>
-                            );
-                        })}
-                    </div>
+                    {showSocialLogins && (
+                        <div className="w-full flex gap-[20px] border-grayscale-500  border-opacity-30 pb-[30px]">
+                            <button
+                                className="flex items-center justify-center bg-grayscale-900 border-solid border-grayscale-100 rounded-full w-[45px] h-[45px]"
+                                onClick={handleActiveLoginType}
+                                type="button"
+                            >
+                                {isPhone ? (
+                                    <Mail className="w-[22px] h-[22px] text-white" />
+                                ) : (
+                                    <Phone className="w-[22px] h-[22px] text-white" />
+                                )}
+                            </button>
+                            {socialLogins.map(socialLogin => {
+                                const { id, src, onClick, alt } = socialLogin;
+                                return (
+                                    <button
+                                        key={id}
+                                        className="flex items-center justify-center border-solid border-[1px] border-grayscale-100 rounded-full w-[45px] h-[45px]"
+                                        onClick={onClick}
+                                        type="button"
+                                    >
+                                        <img src={src} alt={alt} className="w-[28px] h-[28px]" />
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    )}
 
                     {LoginTypeForm}
                 </div>
 
-                <div className="py-[10px] w-full">
-                    <div className="h-[2px] w-full bg-grayscale-500 opacity-30" />
-                </div>
-
-                <button
-                    onClick={() => setIsLogin(!isLogin)}
-                    className="uppercase w-full font-montserrat text-grayscale-800 font-[500] text-[14px] leading-[24px]"
-                >
-                    {isLogin ? 'Signup' : 'Login'}
-                </button>
+                <div className="py-[10px] w-full"></div>
             </div>
 
             <button
                 type="button"
                 onClick={handleBackToGame}
-                className="w-full py-[10px] px-[20px] text-[20px] bg-white rounded-[30px] text-grayscale-800 shadow-box-bottom"
+                className="w-full py-[12px] px-[20px] text-[16px] bg-white rounded-[30px] text-grayscale-800 shadow-box-bottom flex items-center justify-center gap-[10px]"
             >
+                <ArrowLeft className="w-[18px] h-[18px]" />
                 Back to Game
             </button>
         </div>
diff --git a/apps/learn-card-app/src/pages/launchPad/PostConsentFlowDataFeed.tsx b/apps/learn-card-app/src/pages/launchPad/PostConsentFlowDataFeed.tsx
index 773f4a6b9a..074d9f62dc 100644
--- a/apps/learn-card-app/src/pages/launchPad/PostConsentFlowDataFeed.tsx
+++ b/apps/learn-card-app/src/pages/launchPad/PostConsentFlowDataFeed.tsx
@@ -57,7 +57,7 @@ const PostConsentFlowDataFeed = () => {
     );
 
     return (
-        <section className="bg-white min-h-screen w-full pt-[15px]">
+        <section className="bg-white h-full min-h-screen w-full pt-[15px]">
             <IonHeader className="ion-no-border">
                 <IonToolbar className="ion-no-border" color="white">
                     <IonGrid>
diff --git a/apps/learn-card-app/src/pages/login/forms/EmailForm.tsx b/apps/learn-card-app/src/pages/login/forms/EmailForm.tsx
index 7e4a8f0c6e..a352846aba 100644
--- a/apps/learn-card-app/src/pages/login/forms/EmailForm.tsx
+++ b/apps/learn-card-app/src/pages/login/forms/EmailForm.tsx
@@ -45,6 +45,14 @@ type EmailFormProps = {
     buttonClassName?: string;
     suppressRedirect?: boolean;
     customRedirectUrl?: string;
+    resetRedirectPath?: string | null;
+    smallVerificationInput?: boolean;
+    emailInputClassName?: string;
+    emailInputVariant?: 'default' | 'appStore';
+    emailErrorPlacement?: 'inline' | 'below';
+    startOverClassNameOverride?: string;
+    resendCodeButtonClassNameOverride?: string;
+    verificationCodeInputClassName?: string;
     setShowSocialLogins: React.Dispatch<React.SetStateAction<boolean>>;
     showSocialLogins: boolean;
 };
@@ -56,6 +64,14 @@ const EmailForm: React.FC<EmailFormProps> = ({
     buttonClassName = '',
     suppressRedirect = false,
     customRedirectUrl = '',
+    resetRedirectPath = '/login',
+    smallVerificationInput = false,
+    emailInputClassName,
+    emailInputVariant = 'default',
+    emailErrorPlacement = 'inline',
+    startOverClassNameOverride,
+    resendCodeButtonClassNameOverride,
+    verificationCodeInputClassName,
     setShowSocialLogins,
     showSocialLogins,
 }) => {
@@ -71,9 +87,9 @@ const EmailForm: React.FC<EmailFormProps> = ({
     const verificationEmail = redirectStore.get.email();
     const shouldVerifyCode = Boolean(query.get('verifyCode') || verificationEmail);
 
-    const [email, setEmail] = useState<string | null | undefined>('');
+    const [email, setEmail] = useState<string>('');
     const [code, setCode] = useState<string>('');
-    const [password, setPassword] = useState<string | null | undefined>('');
+    const [password, setPassword] = useState<string>('');
     const [currentStep, setCurrentStep] = useState<EmailFormStepsEnum>(EmailFormStepsEnum.email);
 
     const [errors, setErrors] = useState<Record<string, string[]>>({});
@@ -209,7 +225,7 @@ const EmailForm: React.FC<EmailFormProps> = ({
                     if (enableMagicLinkLogin) {
                         try {
                             setIsLoading(true);
-                            await sendSignInLink(email as string, customRedirectUrl);
+                            await sendSignInLink(email, customRedirectUrl);
                             setIsLoading(false);
                         } catch (e) {
                             setIsLoading(false);
@@ -218,8 +234,8 @@ const EmailForm: React.FC<EmailFormProps> = ({
                     } else {
                         try {
                             setIsLoading(true);
-                            await sendLoginVerificationCode({ email: email as string });
-                            redirectStore.set.email(email as string);
+                            await sendLoginVerificationCode({ email });
+                            redirectStore.set.email(email);
                             setCurrentStep(EmailFormStepsEnum.verification);
                             setIsLoading(false);
                         } catch (e) {
@@ -271,7 +287,9 @@ const EmailForm: React.FC<EmailFormProps> = ({
 
     const resetForm = () => {
         setCurrentStep(EmailFormStepsEnum.email);
-        history.replace('/login');
+        if (resetRedirectPath !== null) {
+            history.replace(resetRedirectPath);
+        }
         redirectStore.set.email(null);
         setEmail('');
         setPassword('');
@@ -282,19 +300,47 @@ const EmailForm: React.FC<EmailFormProps> = ({
     let disabled = isLoading;
     if (currentStep === EmailFormStepsEnum.email) {
         formTitle = null;
+
+        const defaultEmailInputClassName =
+            'bg-emerald-600 text-white placeholder:text-white white-placeholder';
+        const resolvedEmailInputClassName = emailInputClassName ?? defaultEmailInputClassName;
+
+        const emailError = errors.email?.[0];
+
+        const emailInputBaseClassName =
+            emailInputVariant === 'appStore'
+                ? 'w-full px-4 py-3 bg-grayscale-100 border rounded-[15px] font-medium text-base text-grayscale-900 placeholder:text-grayscale-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500'
+                : 'rounded-[15px] w-full ion-padding font-medium tracking-widest text-base focus:outline-none focus:ring-0 focus:border-transparent';
+
+        const emailInputErrorClassName =
+            emailInputVariant === 'appStore'
+                ? emailError
+                    ? 'border-red-300'
+                    : 'border-grayscale-200'
+                : emailError
+                ? 'login-input-email-error'
+                : '';
+
         activeStep = (
-            <div className="w-full flex items-center justify-center mb-[20px]">
+            <div
+                className={`w-full mb-[20px] ${
+                    emailErrorPlacement === 'below' ? 'flex flex-col' : 'flex items-center'
+                } justify-center`}
+            >
                 <input
                     aria-label="Email"
-                    className={`bg-emerald-600 text-white placeholder:text-white rounded-[15px] w-full ion-padding font-medium tracking-widest text-base focus:outline-none focus:ring-0 focus:border-transparent ${
-                        errors.email ? 'login-input-email-error' : ''
-                    } white-placeholder`}
+                    className={`${emailInputBaseClassName} ${resolvedEmailInputClassName} ${emailInputErrorClassName}`}
                     placeholder="Email address"
                     onChange={e => setEmail(e.target.value)}
                     value={email}
                     type="text"
                 />
-                {errors.email && <p className="login-input-error-msg">{errors.email}</p>}
+                {emailError &&
+                    (emailErrorPlacement === 'below' ? (
+                        <p className="w-full mt-2 text-red-500 font-medium">{emailError}</p>
+                    ) : (
+                        <p className="login-input-error-msg">{emailError}</p>
+                    ))}
             </div>
         );
         // buttonTitle = 'Continue';
@@ -309,7 +355,10 @@ const EmailForm: React.FC<EmailFormProps> = ({
                 } text-center`}
             >
                 Enter verification code or{' '}
-                <span className="text-white underline font-bold" onClick={resetForm}>
+                <span
+                    className={startOverClassNameOverride ?? 'text-white underline font-bold'}
+                    onClick={resetForm}
+                >
                     start over
                 </span>
             </p>
@@ -325,13 +374,13 @@ const EmailForm: React.FC<EmailFormProps> = ({
                     fields={6}
                     type="text"
                     onChange={e => setCode(e)}
-                    className={`react-code-input ${
-                        errors.code || codeError ? 'react-code-input-error' : ''
-                    }`}
+                    className={`react-code-input ${smallVerificationInput ? 'small' : ''} ${
+                        verificationCodeInputClassName ?? ''
+                    } ${errors.code || codeError ? 'react-code-input-error' : ''}`}
                 />
-                {errors?.code && (
+                {errors?.code?.[0] && (
                     <p className="w-full text-center mt-2 text-red-500 font-medium">
-                        {errors?.code}
+                        {errors?.code?.[0]}
                     </p>
                 )}
                 {codeError && (
@@ -350,7 +399,7 @@ const EmailForm: React.FC<EmailFormProps> = ({
                     className="bg-grayscale-100 text-grayscale-800 rounded-[15px] ion-padding font-medium tracking-widest text-base"
                     placeholder="Password"
                     // todo: add view password toggle
-                    onIonInput={e => setPassword(e.detail.value)}
+                    onIonInput={e => setPassword(e.detail.value ?? '')}
                     value={password}
                     type="password"
                 />
@@ -370,7 +419,7 @@ const EmailForm: React.FC<EmailFormProps> = ({
                     className="bg-grayscale-100 text-grayscale-800 rounded-[15px] ion-padding font-medium tracking-widest text-base"
                     placeholder="Password"
                     // todo: add view password toggle
-                    onIonInput={e => setPassword(e.detail.value)}
+                    onIonInput={e => setPassword(e.detail.value ?? '')}
                     value={password}
                     type="password"
                 />
@@ -425,14 +474,20 @@ const EmailForm: React.FC<EmailFormProps> = ({
                                         e.stopPropagation();
                                         handleResendCode();
                                     }}
-                                    className="text-white font-bold mt-4 border-b-white border-solid border-b-[1px]"
+                                    className={
+                                        resendCodeButtonClassNameOverride ??
+                                        'text-white font-bold mt-4 border-b-white border-solid border-b-[1px]'
+                                    }
                                 >
                                     {resendCodeButtonText}
                                 </button>
                             ) : (
                                 <button
                                     disabled
-                                    className="text-white font-bold mt-4 border-b-white border-solid border-b-[1px]"
+                                    className={
+                                        resendCodeButtonClassNameOverride ??
+                                        'text-white font-bold mt-4 border-b-white border-solid border-b-[1px]'
+                                    }
                                 >
                                     Resend in {seconds}s
                                 </button>
diff --git a/apps/learn-card-app/src/pages/login/forms/PhoneForm.tsx b/apps/learn-card-app/src/pages/login/forms/PhoneForm.tsx
index 90830aec5a..bd26f5b3ec 100644
--- a/apps/learn-card-app/src/pages/login/forms/PhoneForm.tsx
+++ b/apps/learn-card-app/src/pages/login/forms/PhoneForm.tsx
@@ -35,6 +35,10 @@ type PhoneFormProps = {
     formTitleClassNameOverride?: string;
     buttonClassName?: string;
     smallVerificationInput?: boolean;
+    phoneInputClassNameOverride?: string;
+    verificationCodeInputClassName?: string;
+    startOverClassNameOverride?: string;
+    resendCodeButtonClassNameOverride?: string;
     setShowSocialLogins: React.Dispatch<React.SetStateAction<boolean>>;
     showSocialLogins: boolean;
 };
@@ -44,6 +48,10 @@ const PhoneForm: React.FC<PhoneFormProps> = ({
     formTitleClassNameOverride,
     buttonClassName,
     smallVerificationInput,
+    phoneInputClassNameOverride,
+    verificationCodeInputClassName,
+    startOverClassNameOverride,
+    resendCodeButtonClassNameOverride,
     setShowSocialLogins,
     showSocialLogins,
 }) => {
@@ -266,13 +274,13 @@ const PhoneForm: React.FC<PhoneFormProps> = ({
                     defaultCountry="US"
                     value={phone}
                     onChange={setPhone}
-                    className={`login-phone-input ${
+                    className={`login-phone-input ${phoneInputClassNameOverride ?? ''} ${
                         errors?.phone || error ? 'login-phone-input-error' : ''
                     }`}
                 />
-                {errors?.phone && (
+                {errors?.phone?.[0] && (
                     <p className="w-full text-center mt-2 text-red-500 font-medium">
-                        {errors?.phone}
+                        {errors?.phone?.[0]}
                     </p>
                 )}
                 {error && (
@@ -290,7 +298,10 @@ const PhoneForm: React.FC<PhoneFormProps> = ({
                 } text-center`}
             >
                 Enter verification code or{' '}
-                <span className="text-white underline font-bold" onClick={resetForm}>
+                <span
+                    className={startOverClassNameOverride ?? 'text-white underline font-bold'}
+                    onClick={resetForm}
+                >
                     start over
                 </span>
             </p>
@@ -307,12 +318,12 @@ const PhoneForm: React.FC<PhoneFormProps> = ({
                     type="text"
                     onChange={e => setCode(e)}
                     className={`react-code-input ${smallVerificationInput ? 'small' : ''} ${
-                        errors.code || codeError ? 'react-code-input-error' : ''
-                    }`}
+                        verificationCodeInputClassName ?? ''
+                    } ${errors.code || codeError ? 'react-code-input-error' : ''}`}
                 />
-                {errors?.code && (
+                {errors?.code?.[0] && (
                     <p className="w-full text-center mt-2 text-red-500 font-medium">
-                        {errors?.code}
+                        {errors?.code?.[0]}
                     </p>
                 )}
                 {codeError && (
@@ -320,7 +331,7 @@ const PhoneForm: React.FC<PhoneFormProps> = ({
                 )}
             </IonCol>
         );
-        buttonTitle = buttonTitle = isLoading ? 'Verifying...' : 'Verify';
+        buttonTitle = isLoading ? 'Verifying...' : 'Verify';
     } else if (currentStep === PhoneFormStepsEnum.passwordExistingUser) {
         formTitle = <p className="font-medium text-grayscale-600 normal">Password</p>;
         activeStep = (
@@ -398,14 +409,20 @@ const PhoneForm: React.FC<PhoneFormProps> = ({
                                         e.stopPropagation();
                                         handleOnClick(e, true);
                                     }}
-                                    className="text-white font-bold mt-4 border-b-white border-solid border-b-[1px]"
+                                    className={
+                                        resendCodeButtonClassNameOverride ??
+                                        'text-white font-bold mt-4 border-b-white border-solid border-b-[1px]'
+                                    }
                                 >
                                     {resendCodeButtonText}
                                 </button>
                             ) : (
                                 <button
                                     disabled
-                                    className="text-white font-bold mt-4 border-b-white border-solid border-b-[1px]"
+                                    className={
+                                        resendCodeButtonClassNameOverride ??
+                                        'text-white font-bold mt-4 border-b-white border-solid border-b-[1px]'
+                                    }
                                 >
                                     Resend in {seconds}s
                                 </button>
diff --git a/apps/learn-card-app/tests/game-flow.page.ts b/apps/learn-card-app/tests/game-flow.page.ts
index d6c1809d17..3f0a8fd95a 100644
--- a/apps/learn-card-app/tests/game-flow.page.ts
+++ b/apps/learn-card-app/tests/game-flow.page.ts
@@ -143,7 +143,7 @@ export class GameFlowPage {
 
         await expect(this.page.getByText("Who's Playing?")).toBeVisible();
         await expect(
-            this.page.locator('footer').getByRole('button', { name: 'Add Player' })
+            this.page.locator('footer').getByRole('button', { name: 'Add New Player' })
         ).toBeVisible();
         await expect(
             this.page
@@ -168,7 +168,7 @@ export class GameFlowPage {
     }
 
     async clickAddPlayer() {
-        await this.page.getByRole('button', { name: 'Add Player' }).click();
+        await this.page.getByRole('button', { name: 'Add New Player' }).click();
     }
 
     async validateConfirmationPage() {