diff --git a/ghost/admin/app/components/gh-tier-card.hbs b/ghost/admin/app/components/gh-tier-card.hbs
index 7c949f3bd6..4fb7e34d3d 100644
--- a/ghost/admin/app/components/gh-tier-card.hbs
+++ b/ghost/admin/app/components/gh-tier-card.hbs
@@ -36,22 +36,29 @@
         </div>
     {{/if}}
     {{#if (eq @tier.type "paid" )}}
-        <div class="gh-tier-card-block">
+        <div class="gh-tier-card-block price-block">
             <div class="gh-tier-price-container">
-                <div class="gh-tier-card-price" data-test-monthly-price>
-                    <div class="flex items-start">
-                        <span class="currency">{{currency-symbol this.tierCurrency}}</span>
-                        <span class="amount">{{gh-price-amount @tier.monthlyPrice}}</span>
+                <div class="gh-tier-price-cards">
+                    <div class="gh-tier-card-price" data-test-monthly-price>
+                        <div class="flex items-start">
+                            <span class="currency">{{currency-symbol this.tierCurrency}}</span>
+                            <span class="amount">{{gh-price-amount @tier.monthlyPrice}}</span>
+                        </div>
+                        <div class="period">Monthly</div>
                     </div>
-                    <div class="period">Monthly</div>
-                </div>
-                <div class="gh-tier-card-price" data-test-yearly-price>
-                    <div class="flex items-start">
-                        <span class="currency">{{currency-symbol this.tierCurrency}}</span>
-                        <span class="amount">{{gh-price-amount @tier.yearlyPrice}}</span>
+                    <div class="gh-tier-card-price" data-test-yearly-price>
+                        <div class="flex items-start">
+                            <span class="currency">{{currency-symbol this.tierCurrency}}</span>
+                            <span class="amount">{{gh-price-amount @tier.yearlyPrice}}</span>
+                        </div>
+                        <div class="period">Yearly</div>
                     </div>
-                    <div class="period">Yearly</div>
                 </div>
+                {{#if (and (feature 'freeTrial') this.isFreeTrialEnabled)}}
+                <div class="gh-tier-free-trial-label">
+                    <span class="gh-tier-free-trial-days">{{this.tierTrialDays}} day</span> free trial
+                </div>
+                {{/if}}
             </div>
         </div>
     {{/if}}
diff --git a/ghost/admin/app/components/gh-tier-card.js b/ghost/admin/app/components/gh-tier-card.js
index 057ce20c4c..4d6c1fbe16 100644
--- a/ghost/admin/app/components/gh-tier-card.js
+++ b/ghost/admin/app/components/gh-tier-card.js
@@ -45,6 +45,14 @@ export default class extends Component {
         return this.tier.type === 'free';
     }
 
+    get isFreeTrialEnabled() {
+        return this.tier.trialDays > 0;
+    }
+
+    get tierTrialDays() {
+        return this.tier.trialDays;
+    }
+
     @action
     async openEditTier(tier) {
         this.args.openEditTier(tier);
diff --git a/ghost/admin/app/styles/layouts/tiers.css b/ghost/admin/app/styles/layouts/tiers.css
index 0447dd3c8a..a3e0f93399 100644
--- a/ghost/admin/app/styles/layouts/tiers.css
+++ b/ghost/admin/app/styles/layouts/tiers.css
@@ -139,9 +139,21 @@
     flex-grow: 1;
 }
 
+.gh-tier-card-block.price-block {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    margin: 0 70px 0 20px;
+}
+
 .gh-tier-price-container {
     display: flex;
-    margin: 0 60px 0 20px;
+    flex-direction: column;
+    border: 1px solid var(--whitegrey);
+}
+
+.gh-tier-price-cards {
+    display: inline-flex;
     justify-content: flex-end;
 }
 
@@ -150,16 +162,31 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin: 0 12px 2px 0;
     font-size: 1.3rem;
     color: var(--midgrey);
-    padding: 12px 8px;
-    border: 1px solid var(--whitegrey);
+    padding: 12px 8px 14px;
     border-radius: 3px;
     min-width: 90px;
     min-height: 66px;
 }
 
+.gh-tier-free-trial-label {
+    text-align: center;
+    font-size: 1.25rem;
+    color: var(--midgrey);
+    padding: 4px;
+    border-top: 1px solid var(--whitegrey);
+}
+
+.gh-tier-free-trial-days {
+    font-weight: 600;
+    color: var(--darkgrey);
+}
+
+.gh-tier-card-price:first-of-type {
+    border-right: 1px solid var(--whitegrey);
+}
+
 .gh-tier-card-price .currency-symbol,
 .gh-tier-card-price .amount,
 .gh-tier-card-price .currency,
diff --git a/ghost/core/content/themes/casper b/ghost/core/content/themes/casper
index 2aaf7441af..e2096ee731 160000
--- a/ghost/core/content/themes/casper
+++ b/ghost/core/content/themes/casper
@@ -1 +1 @@
-Subproject commit 2aaf7441af62c6814685a4876c4ba0fbfaa35dab
+Subproject commit e2096ee731d071d9a32b4e0fab84272b14ba7203