diff --git a/jam-ui/cypress/e2e/account/account-subscription-page.cy.js b/jam-ui/cypress/e2e/account/account-subscription-page.cy.js
new file mode 100644
index 000000000..f9490f6a0
--- /dev/null
+++ b/jam-ui/cypress/e2e/account/account-subscription-page.cy.js
@@ -0,0 +1,129 @@
+/// <reference types="cypress" />
+
+import makeFakeUser from '../../factories/user';
+
+describe('User subscribe to a plan', () => { 
+  beforeEach(() => {
+    // Log in to the application or navigate to the account page
+    // where the change email feature is available
+    const currentUser = makeFakeUser({
+      email: 'sam@example.com'
+    });
+    cy.stubAuthenticate({ ...currentUser });
+
+    Cypress.on('window:before:load', win => {
+      win.gon = { 
+        //session variables
+        global: {
+          subscription_codes: [
+            {
+              id: null,
+              name: 'Free',
+              price: 0,
+              cycle: 'month'
+            },
+            {
+              id: 'jamsubsilver',
+              name: 'Silver',
+              price: 4.99,
+              cycle: 'month'
+            },
+            {
+              id: 'jamsubgold',
+              name: 'Gold',
+              price: 9.99,
+              cycle: 'month'
+            },
+            {
+              id: 'jamsubplatinum',
+              name: 'Platinum',
+              price: 19.99,
+              cycle: 'month'
+            },
+            {
+              id: 'jamsubsilveryearly',
+              name: 'Silver',
+              price: 49.99,
+              cycle: 'year'
+            },
+            {
+              id: 'jamsubgoldyearly',
+              name: 'Gold',
+              price: 99.99,
+              cycle: 'year'
+            },
+            {
+              id: 'jamsubplatinumyearly',
+              name: 'Platinum',
+              price: 199.99,
+              cycle: 'year'
+            },
+          ]
+        }
+      }
+    });
+    
+    
+    cy.intercept('GET', /\S+\/get_subscription/, {
+      statusCode: 200,
+      body:  {
+        past_due: false,
+        has_billing_info: true,
+        plan_code: 'jamsubsilver',
+        desired_plan_code: 'jamsubgold',
+        admin_overide_plan_code: null,
+        admin_overide_ends_at: null,
+        in_trial: false,
+        trial_ends_at: null,
+        subscription: {
+
+        },
+        subscription_rules: {
+          remaining_monthly_play_time: null
+        }
+      }
+    });
+   
+  });
+
+  it('should display the current plan', () => {
+    cy.visit('/account/subscription');
+    
+    // Assert that the current plan is displayed
+    cy.get('[data-testid=changeSubscriptionForm]').within($form => {
+      cy.get('label').contains('Subscription Plan');
+      cy.get('.select-plan__single-value').should('contain', 'Gold ($9.99/month)');
+      cy.get('input[type=submit]').should('have.value', 'Save Plan').should('be.disabled');
+    });
+
+    cy.get('[data-testid=playtime]').within($playtime => {
+      cy.get('label').contains('You have unlimited play time');
+    });
+
+    cy.get('[data-testid=subscription-explanation]').within($expl => {
+      cy.get('.alert').contains('You are currently on the Silver (monthly) level, thank you!');
+    });
+  });
+
+  it('change plan', () => {
+    cy.visit('/account/subscription');
+
+    cy.get('[data-testid=changeSubscriptionForm]').within($form => {
+      cy.get('.select-plan__control').click();
+      cy.get('.select-plan__option').contains('Platinum ($19.99/month)').click();
+      cy.get('input[type=submit]').should('be.enabled').click();
+    });
+    
+    const text = 'You have selected the PLATINUM MONTHLY PLAN and will be charged US$19.99'
+    cy.contains('.modal-body', text).should('be.visible');
+    cy.get('.modal-content').find('.modal-footer').contains('OK').click();
+    
+    cy.get('.modal-body').should('not.be.visible');
+    // cy.get('[data-testid=subscription-explanation]').within($expl => {
+    //   cy.get('.alert').contains('You are currently on the Silver (monthly) level, thank you! And your plan and billing will switch to the Platinum (monthly) level on the next billing cycle.');
+    // });
+    cy.get('input[type=submit]').should('be.disabled')
+  });
+
+
+ });
\ No newline at end of file
diff --git a/jam-ui/src/components/profile/JKSubscriptionPlan.js b/jam-ui/src/components/profile/JKSubscriptionPlan.js
index f4eca88a4..c06fd9b69 100644
--- a/jam-ui/src/components/profile/JKSubscriptionPlan.js
+++ b/jam-ui/src/components/profile/JKSubscriptionPlan.js
@@ -45,10 +45,10 @@ function JKSubscriptionPlan({ userPlan, setUserPlan, getDisplayName }) {
       const yearly = [{ value: 'yearly', isDisabled: true, label: '-------- YEARLY PLANS --------' }];
       window.gon.global.subscription_codes.forEach(plan => {
         if (plan.cycle === 'month') {
-          monthly.push({ value: plan.id || '', label: `${plan.name} (${plan.price.toFixed(2)}/${plan.cycle})` });
+          monthly.push({ value: plan.id || '', label: `${plan.name} ($${plan.price.toFixed(2)}/${plan.cycle})` });
         }
         if (plan.cycle === 'year') {
-          yearly.push({ value: plan.id || '', label: `${plan.name} (${plan.price.toFixed(2)}/${plan.cycle})` });
+          yearly.push({ value: plan.id || '', label: `${plan.name} ($${plan.price.toFixed(2)}/${plan.cycle})` });
         }
       });
       const all = [...monthly, ...yearly];
@@ -159,7 +159,7 @@ function JKSubscriptionPlan({ userPlan, setUserPlan, getDisplayName }) {
           <Form
             className="mt-2"
             onSubmit={handleSubmit(onSubmit)}
-            data-testid="edit_email_form"
+            data-testid="changeSubscriptionForm"
           >
             {plans && userPlan && userPlan.plan_code && (
               <>
@@ -171,10 +171,10 @@ function JKSubscriptionPlan({ userPlan, setUserPlan, getDisplayName }) {
                     render={({ field: { onChange, value } }) => {
                       const plan = plans.find(plan => plan.value === value);
                       if (!plan) {
-                        return <Select data-testid="countrySelect" onChange={handleChange} options={plans} />;
+                        return <Select classNamePrefix="select-plan" data-testid="countrySelect" onChange={handleChange} options={plans} />;
                       }
                       return (
-                        <Select data-testid="countrySelect" value={plan} onChange={handleChange} options={plans} />
+                        <Select classNamePrefix="select-plan" data-testid="countrySelect" value={plan} onChange={handleChange} options={plans} />
                       );
                     }}
                   />
@@ -186,7 +186,6 @@ function JKSubscriptionPlan({ userPlan, setUserPlan, getDisplayName }) {
                     className="btn btn-primary"
                     value={t('subscription.current_plan.submit')}
                     disabled={submitting || [userPlan.desired_plan_code].includes(getValues('plan_code'))}
-                    data-testid="email_submit"
                   />
                   <span className="ml-2">{submitting && <FontAwesomeIcon icon="spinner" />}</span>
                 </div>
diff --git a/jam-ui/src/components/profile/JKSubscriptionPlaytime.js b/jam-ui/src/components/profile/JKSubscriptionPlaytime.js
index b9096423d..dcd7eb149 100644
--- a/jam-ui/src/components/profile/JKSubscriptionPlaytime.js
+++ b/jam-ui/src/components/profile/JKSubscriptionPlaytime.js
@@ -144,7 +144,8 @@ function JKSubscriptionPlaytime({ userPlan, getDisplayName }) {
         if (userPlan.subscription.plan.plan_code !== userPlan.plan_code) {
           billingAddendumTxt = ` You have paid only for the <strong>${planNameWithCycle(
             userPlan.subscription.plan.plan_code
-          )}</strong> level for the current billing cycle, so there will be a change to the <strong>${this.planNameWithCycle(userPlan.subscription.pending_subscription.plan.plan_code
+          )}</strong> level for the current billing cycle, so there will be a change to the <strong>${planNameWithCycle(
+            userPlan.subscription.pending_subscription.plan.plan_code
           )}</strong> level on the next billing cycle.`;
         } else {
           billingAddendumTxt = ` And your plan and billing will switch to the <strong>${planNameWithCycle(
@@ -168,22 +169,23 @@ function JKSubscriptionPlaytime({ userPlan, getDisplayName }) {
         <h5>{t('subscription.play_time.title')}</h5>
       </CardHeader>
       <CardBody className="bg-light" style={{ minHeight: 300, minWidth: 280 }}>
-        <div>
+        <div data-testid="playtime">
           {userPlan && userPlan.subscription_rules.remaining_month_play_time ? (
             <div className="play-time">
-              <p>
-                You have <strong>{planNameWithCycle(userPlan.subscription_rules.remaining_month_play_time)}</strong> remaining
-                this month. Only the time you spend in a session with 2 or more people uses your session play time.
-              </p>
+              <label>
+                You have <strong>{planNameWithCycle(userPlan.subscription_rules.remaining_month_play_time)}</strong>{' '}
+                remaining this month. Only the time you spend in a session with 2 or more people uses your session play
+                time.
+              </label>
             </div>
           ) : (
             <div className="play-time">
-              <p>You have unlimited play time.</p>
+              <label>You have unlimited play time.</label>
             </div>
           )}
         </div>
 
-        <div className="mt-3">
+        <div className="mt-3" data-testid="subscription-explanation">
           <small>
             {explanation && (
               <div className="alert alert-info">