diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
index 01b60dea29..094f621f9f 100644
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@@ -146,16 +146,16 @@ export const PlanSectionStyles = `
         transform: rotate(45deg);
     }
 
-    .gh-portal-signup-singleplan .gh-portal-plan-section {
+    .gh-portal-content.signup .gh-portal-section.singleplan .gh-portal-plan-section {
         cursor: auto;
     }
 
-    .gh-portal-signup-singleplan .gh-portal-plan-checkbox,
-    .gh-portal-signup-singleplan .gh-portal-plan-section.checked::before {
+    .gh-portal-content.signup .gh-portal-section.singleplan .gh-portal-plan-checkbox,
+    .gh-portal-content.signup .gh-portal-section.singleplan .gh-portal-plan-section.checked::before {
         display: none;
     }
 
-    .gh-portal-signup-singleplan .gh-portal-plan-name {
+    .gh-portal-content.signup .gh-portal-section.singleplan .gh-portal-plan-name {
         margin-top: 0;
     }
 `;
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index 76b3f7df83..5893930a7e 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -57,6 +57,18 @@ export const SignupPageStyles = `
         font-weight: 400;
         margin-left: 4px;
     }
+
+    .gh-portal-content.signup .gh-portal-section {
+        margin-bottom: 24px;
+    }
+
+    .gh-portal-content.signup .gh-portal-section.noplan {
+        margin-bottom: 32px;
+    }
+
+    .gh-portal-content.signup .gh-portal-section.single-field {
+        margin-bottom: 20px;
+    }
 `;
 
 class SignupPage extends React.Component {
@@ -282,10 +294,9 @@ class SignupPage extends React.Component {
 
     renderPlans() {
         const plansData = this.getPlans();
-        const plansContainerClass = plansData.length <= 1 ? 'gh-portal-signup-singleplan' : 'gh-portal-signup-multiplan';
 
         return (
-            <div className={plansContainerClass}>
+            <div>
                 <PlansSection
                     plans={plansData}
                     selectedPlan={this.state.plan}
@@ -312,11 +323,26 @@ class SignupPage extends React.Component {
     }
 
     renderForm() {
+        const plansData = this.getPlans();
+        const fields = this.getInputFields({state: this.state});
+        let sectionClass = '';
+        
+        if (plansData.length <= 1) {
+            if ((plansData.length === 1 && plansData[0].type === 'free') || plansData.length === 0) {
+                sectionClass = 'noplan';
+                if (fields.length === 1) {
+                    sectionClass = 'single-field';
+                }
+            } else {
+                sectionClass = 'singleplan';
+            }
+        }
+
         return (
             <section>
-                <div className='gh-portal-section'>
+                <div className={'gh-portal-section ' + sectionClass}>
                     <InputForm
-                        fields={this.getInputFields({state: this.state})}
+                        fields={fields}
                         onChange={(e, field) => this.handleInputChange(e, field)}
                         onBlur={(e, field) => this.handleInputBlur(e, field)}
                     />
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index dbcc9faef6..0d0148bc3a 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -15,7 +15,7 @@ export const site = {
     is_stripe_configured: true,
     portal_button: true,
     portal_name: true,
-    portal_plans: ['free'],
+    portal_plans: ['free', 'yearly'],
     portal_button_icon: 'icon-1',
     portal_button_signup_text: 'Subscribe now',
     portal_button_style: 'icon-and-text',