diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs
index 96cc0c55a8..80df21eb67 100644
--- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs
+++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs
@@ -4,11 +4,11 @@
         <GhLoadingSpinner />
     {{else}}
         {{#if this.areMembersEnabled}}
-            <section class="prototype-section">
+            <section class="gh-dashboard5-section">
                 <Dashboard::V5::ChartMembersCounts />
             </section>
 
-            <section class="prototype-section">
+            <section class="gh-dashboard5-section">
                 <div class="prototype-selection">
                     <PowerSelect
                         @selected={{this.selectedDaysOption}}
@@ -25,62 +25,56 @@
                     </PowerSelect>
                 </div>
 
-                <article class="gh-dashboard-box">
-                    <Dashboard::V5::ChartTotalMembers @days={{this.days}} />
-                </article>
+                <div class="gh-dashboard5-growth">
+                    <article class="gh-dashboard5-box">
+                        <Dashboard::V5::ChartTotalMembers @days={{this.days}} />
+                    </article>
 
-                {{#if this.hasPaidTiers}}
-                    <div class="prototype-section">
-                        <div class="prototype-counts">
-                            <article class="prototype-box">
-                                <Dashboard::V5::ChartMonthlyRevenue @days={{this.days}} />
-                            </article>
+                    {{#if this.hasPaidTiers}}
+                        <article class="gh-dashboard5-box">
+                            <Dashboard::V5::ChartMonthlyRevenue @days={{this.days}} />
+                        </article>
 
-                            <article class="prototype-box">
-                                <Dashboard::V5::ChartTotalPaid @days={{this.days}} />
-                            </article>
-                        </div>
-                    </div>
+                        <article class="gh-dashboard5-box">
+                            <Dashboard::V5::ChartTotalPaid @days={{this.days}} />
+                        </article>
 
-                    <div class="prototype-section">
-                        <div class="prototype-counts">
-                            <article class="prototype-box">
-                                <Dashboard::V5::ChartPaidMembers @days={{this.days}}/>
-                            </article>
+                        <article class="gh-dashboard5-box">
+                            <Dashboard::V5::ChartPaidMembers @days={{this.days}}/>
+                        </article>
 
-                            <article class="prototype-box">
-                                <Dashboard::V5::ChartPaidMix />
-                            </article>
-                        </div>
-                    </div>
-                {{/if}}
+                        <article class="gh-dashboard5-box">
+                            <Dashboard::V5::ChartPaidMix />
+                        </article>
+                    {{/if}}
+                </div>
             </section>
-            <section class="prototype-section">
+            <section class="gh-dashboard5-section">
                 <Dashboard::V5::ChartEngagement />
             </section>
         {{/if}}
 
         {{#if this.areNewslettersEnabled}}
-            <section class="prototype-section">
-                <Dashboard::V5::ChartEmailOpenRate />
+            <section class="gh-dashboard5-section">
+                <Dashboard::V5::ChartEmail />
             </section>
         {{/if}}
 
-        <section class="prototype-section">
+        <section class="gh-dashboard5-section">
             <h2>Recent posts</h2>
-            <article class="gh-dashboard-box">
+            <article class="gh-dashboard5-box">
                 Recent posts
             </article>
         </section>
 
-        <section class="prototype-section">
+        <section class="gh-dashboard5-section">
             <h2>Activity</h2>
             <Dashboard::LatestMemberActivity />
         </section>
 
-        <section class="prototype-section">
+        <section class="gh-dashboard5-section">
             <h2>Resources</h2>
-            <article class="gh-dashboard-box">
+            <article class="gh-dashboard5-box">
                 <Dashboard::V5::ResourceGeneral />
             </article>
         </section>
diff --git a/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs b/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs
deleted file mode 100644
index 404f6453a0..0000000000
--- a/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs
+++ /dev/null
@@ -1,29 +0,0 @@
-<h2>Email</h2>
-
-<div class="prototype-counts">
-    <div class="prototype-counts col">
-        <div class="prototype-box">
-            <div class="number">{{this.dataSubscribers}}</div>
-            <div>Newsletter subscribers</div>
-        </div>
-
-        <div class="prototype-box">
-            <div class="number">{{this.dataEmailsSent}}</div>
-            <div>Emails sent in the past 30 days</div>
-        </div>
-    </div>
-
-    <div class="prototype-box">
-        <h4>Email open rate</h4>
-        {{#if this.loading}}
-            <div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
-        {{else}}
-            <EmberChart
-                @type={{this.chartType}}
-                @data={{this.chartData}}
-                @options={{this.chartOptions}}
-                @height={{this.chartHeight}} />
-        {{/if}}
-    </div>
-</div>
-
diff --git a/ghost/admin/app/components/dashboard/v5/chart-email.hbs b/ghost/admin/app/components/dashboard/v5/chart-email.hbs
new file mode 100644
index 0000000000..3d2b46969e
--- /dev/null
+++ b/ghost/admin/app/components/dashboard/v5/chart-email.hbs
@@ -0,0 +1,28 @@
+<h3>Email</h3>
+<div class="gh-dashboard5-container gh-dashboard5-email">
+    <div class="gh-dashboard5-box">
+        <h4 class="gh-dashboard5-metric">Newsletter subscribers</h4>
+        <div class="gh-dashboard5-number is-small">{{this.dataSubscribers}}</div>
+        <div class="gh-dashboard5-percentage is-positive">+2.2%</div>
+    </div>
+
+    <div class="gh-dashboard5-box">
+        <h4 class="gh-dashboard5-metric">Emails sent in the past 30 days</h4>
+        <div class="gh-dashboard5-number is-small">{{this.dataEmailsSent}}</div>
+        <div class="gh-dashboard5-percentage is-positive">+2.2%</div>
+    </div>
+
+    <div class="gh-dashboard5-box">
+        <h4 class="gh-dashboard5-metric is-main">Email open rate</h4>
+        {{#if this.loading}}
+            <div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+        {{else}}
+            <EmberChart
+                @type={{this.chartType}}
+                @data={{this.chartData}}
+                @options={{this.chartOptions}}
+                @height={{this.chartHeight}} />
+        {{/if}}
+    </div>
+</div>
+
diff --git a/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js b/ghost/admin/app/components/dashboard/v5/chart-email.js
similarity index 98%
rename from ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js
rename to ghost/admin/app/components/dashboard/v5/chart-email.js
index bf74a5c56c..c75a8feeed 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js
+++ b/ghost/admin/app/components/dashboard/v5/chart-email.js
@@ -64,6 +64,6 @@ export default class ChartEmailOpenRate extends Component {
     }
 
     get chartHeight() {
-        return 150;
+        return 100;
     }
 }
diff --git a/ghost/admin/app/components/dashboard/v5/chart-engagement.hbs b/ghost/admin/app/components/dashboard/v5/chart-engagement.hbs
index a4992b02d4..a1a2991a72 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-engagement.hbs
+++ b/ghost/admin/app/components/dashboard/v5/chart-engagement.hbs
@@ -16,14 +16,16 @@
     </PowerSelect>
 </div>
 
-<div class="prototype-counts">
-    <div class="prototype-box">
-        <div class="number">{{this.data30Days}}</div>
-        <div>Engaged in past 30 days</div>
+<div class="gh-dashboard5-container">
+    <div class="gh-dashboard5-box">
+        <h4 class="gh-dashboard5-metric">Engaged in past 30 days</h4>
+        <div class="gh-dashboard5-number is-small">{{this.data30Days}}</div>
+        <div class="gh-dashboard5-percentage is-positive">+2.2%</div>
     </div>
 
-    <div class="prototype-box">
-        <div class="number">{{this.data7Days}}</div>
-        <div>Engaged in past 7 days</div>
+    <div class="gh-dashboard5-box">
+        <h4 class="gh-dashboard5-metric">Engaged in past 7 days</h4>
+        <div class="gh-dashboard5-number is-small">{{this.data7Days}}</div>
+        <div class="gh-dashboard5-percentage is-negative">-1.1%</div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs b/ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs
index aa26b845d2..3bbc18cf52 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs
+++ b/ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs
@@ -1,16 +1,18 @@
-<div class="prototype-counts">
-    <div class="prototype-box">
-        <div class="number">{{format-number this.totalMembers}}</div>
-        <div>{{gh-pluralize this.totalMembers "Total member" without-count=true}}</div>
+<h3>Overview</h3>
+<div class="gh-dashboard5-container">
+    <div class="gh-dashboard5-box">
+        <h4 class="gh-dashboard5-metric">{{gh-pluralize this.totalMembers "Total member" without-count=true}}</h4>
+        <div class="gh-dashboard5-number">{{format-number this.totalMembers}}</div>
+        <div class="gh-dashboard5-percentage is-positive">+2.2%</div>
     </div>
-
-    <div class="prototype-box">
-        <div class="number">{{format-number this.paidMembers}}</div>
-        <div>{{gh-pluralize this.paidMembers "Paid member" without-count=true}}</div>
+    <div class="gh-dashboard5-box">
+        <h4 class="gh-dashboard5-metric">{{gh-pluralize this.paidMembers "Paid member" without-count=true}}</h4>
+        <div class="gh-dashboard5-number">{{format-number this.paidMembers}}</div>
+        <div class="gh-dashboard5-percentage is-positive">+3.3%</div>
     </div>
-
-    <div class="prototype-box">
-        <div class="number">{{format-number this.freeMembers}}</div>
-        <div>{{gh-pluralize this.freeMembers "Free member" without-count=true}}</div>
+    <div class="gh-dashboard5-box">
+        <h4 class="gh-dashboard5-metric">{{gh-pluralize this.freeMembers "Free member" without-count=true}}</h4>
+        <div class="gh-dashboard5-number">{{format-number this.freeMembers}}</div>
+        <div class="gh-dashboard5-percentage is-negative">-1.1%</div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs b/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs
index f0b48a4c9a..9fbdd0217a 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs
+++ b/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs
@@ -1,6 +1,6 @@
-<h4>MRR</h4>
+<h4 class="gh-dashboard5-metric is-main">Monthly revenue (MMR)</h4>
 {{#if this.loading}}
-    <div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+    <div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
 {{else}}
     <EmberChart {{did-update this.loadCharts @days}}
         @type={{this.chartType}}
diff --git a/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js b/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js
index 4a0a402672..009df33a02 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js
+++ b/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js
@@ -53,6 +53,6 @@ export default class ChartMonthlyRevenue extends Component {
     }
 
     get chartHeight() {
-        return 150;
+        return 100;
     }
 }
diff --git a/ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs b/ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs
index bfcac8e5ae..e0b2839fea 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs
+++ b/ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs
@@ -1,6 +1,6 @@
-<h4>Paid members</h4>
+<h4 class="gh-dashboard5-metric is-main">Paid members</h4>
 {{#if this.loading}}
-    <div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+    <div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
 {{else}}
     <EmberChart {{did-update this.loadCharts @days}}
         @type={{this.chartType}}
diff --git a/ghost/admin/app/components/dashboard/v5/chart-paid-members.js b/ghost/admin/app/components/dashboard/v5/chart-paid-members.js
index d5abfe8094..187af757f0 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-paid-members.js
+++ b/ghost/admin/app/components/dashboard/v5/chart-paid-members.js
@@ -60,6 +60,6 @@ export default class ChartPaidMembers extends Component {
     }
 
     get chartHeight() {
-        return 150;
+        return 100;
     }
 }
diff --git a/ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs b/ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs
index 0f2bd515b8..4c3d9f450f 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs
+++ b/ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs
@@ -15,10 +15,10 @@
     </PowerSelect>
 </div>
 
-<h4>Paid mix</h4>
+<h4 class="gh-dashboard5-metric is-main">Paid mix</h4>
 
 {{#if this.loading}}
-    <div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+    <div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
 {{else}}
     <EmberChart
         @type={{this.chartType}}
diff --git a/ghost/admin/app/components/dashboard/v5/chart-paid-mix.js b/ghost/admin/app/components/dashboard/v5/chart-paid-mix.js
index a303b82721..03c12255e8 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-paid-mix.js
+++ b/ghost/admin/app/components/dashboard/v5/chart-paid-mix.js
@@ -97,6 +97,6 @@ export default class ChartPaidMix extends Component {
     }
 
     get chartHeight() {
-        return 150;
+        return 100;
     }
 }
diff --git a/ghost/admin/app/components/dashboard/v5/chart-total-members.hbs b/ghost/admin/app/components/dashboard/v5/chart-total-members.hbs
index eeb67b3d88..5f62dd1ea3 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-total-members.hbs
+++ b/ghost/admin/app/components/dashboard/v5/chart-total-members.hbs
@@ -1,6 +1,6 @@
-<h4>Total members</h4>
+<h4 class="gh-dashboard5-metric is-main">Total members</h4>
 {{#if this.loading}}
-    <div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+    <div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
 {{else}}
     <EmberChart {{did-update this.loadCharts @days}}
         @type={{this.chartType}}
diff --git a/ghost/admin/app/components/dashboard/v5/chart-total-members.js b/ghost/admin/app/components/dashboard/v5/chart-total-members.js
index b73b42b150..8653c3460f 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-total-members.js
+++ b/ghost/admin/app/components/dashboard/v5/chart-total-members.js
@@ -53,6 +53,6 @@ export default class ChartTotalMembers extends Component {
     }
 
     get chartHeight() {
-        return 300;
+        return 75;
     }
 }
diff --git a/ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs b/ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs
index a459ffdb4d..8378f8b492 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs
+++ b/ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs
@@ -1,6 +1,6 @@
-<h4>Total paid</h4>
+<h4 class="gh-dashboard5-metric is-main">Total paid</h4>
 {{#if this.loading}}
-    <div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+    <div class="gh-dashboard5-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
 {{else}}
     <EmberChart {{did-update this.loadCharts @days}}
         @type={{this.chartType}}
diff --git a/ghost/admin/app/components/dashboard/v5/chart-total-paid.js b/ghost/admin/app/components/dashboard/v5/chart-total-paid.js
index e3a5747610..70291b5bc4 100644
--- a/ghost/admin/app/components/dashboard/v5/chart-total-paid.js
+++ b/ghost/admin/app/components/dashboard/v5/chart-total-paid.js
@@ -53,6 +53,6 @@ export default class ChartTotalPaid extends Component {
     }
 
     get chartHeight() {
-        return 150;
+        return 100;
     }
 }
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 0ede493298..9f1eb3f42d 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -1138,3 +1138,179 @@ a.gh-dashboard-container {
     font-size: 24px;
 }
 
+
+.gh-dashboard5 h3 {
+    margin: 0 0 12px;
+}
+
+.gh-dashboard5-section {
+    margin-bottom: 40px;
+}
+
+.gh-dashboard5-container {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0;
+}
+
+.gh-dashboard5-box {
+    flex: 1;
+    border: 1px solid #ebeef0;
+    padding: 28px;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.gh-dashboard5-container .gh-dashboard5-box {
+    border-radius: 0;
+    border-width: 1px 0 1px 1px;
+}
+
+.gh-dashboard5-container .gh-dashboard5-box:first-child {
+    border-radius: 3px 0 0 3px;
+}
+
+.gh-dashboard5-container .gh-dashboard5-box:last-child {
+    border-radius: 0 3px 3px 0;
+    border-width: 1px;
+}
+
+.gh-dashboard5-number {
+    display: flex;
+    align-items: flex-start;
+    font-size: 3.9rem;
+    line-height: 4rem;
+    font-weight: 600;
+    color: #15171a;
+    letter-spacing: -.1px;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.gh-dashboard5-number.is-small {
+    font-size: 2.8rem;
+}
+
+.gh-dashboard5-metric {
+    display: flex;
+    align-items: center;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: .2px;
+    margin: 0 0 4px;
+    padding: 0;
+    color: var(--black);
+}
+
+.gh-dashboard5-metric.is-main {
+    margin-bottom: 24px;
+}
+
+.gh-dashboard5-percentage {
+    flex: 0;
+    background: var(--whitegrey-d1);
+    border-radius: 3px;
+    font-size: 1.2rem;
+    line-height: 1;
+    font-weight: 500;
+    letter-spacing: 0;
+    color: var(--midgrey);
+    padding: 2px 4px;
+    margin: 5px 0 1px 0;
+}
+
+.gh-dashboard5-percentage.is-positive {
+    background: color-mod(var(--green) a(13%));
+    color: color-mod(var(--green) l(-5%));
+}
+
+.gh-dashboard5-percentage.is-negative {
+    background: color-mod(var(--yellow) a(20%));
+    color: color-mod(var(--yellow) l(-8%));
+}
+
+.gh-dashboard5-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.gh-dashboard5-selection {
+    margin: 0 -8px 6px 0;
+}
+
+.gh-dashboard5-email {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 0;
+}
+
+.gh-dashboard5-email .gh-dashboard5-box {
+    border-width: 1px 0 1px 1px;
+    border-radius: 0;
+}
+
+.gh-dashboard5-email .gh-dashboard5-box:nth-child(1) {
+    grid-column: 1;
+    grid-row: 1;
+    border-radius: 3px 0 0 0;
+}
+
+.gh-dashboard5-email .gh-dashboard5-box:nth-child(2) {
+    grid-column: 1;
+    grid-row: 2;
+    border-width: 0 0 1px 1px;
+    border-radius: 0 0 0 3px;
+}
+
+.gh-dashboard5-email .gh-dashboard5-box:nth-child(3) {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+}
+
+.gh-dashboard5-growth {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto auto;
+    gap: 0;
+}
+
+.gh-dashboard5-growth .gh-dashboard5-box:nth-child(1) {
+    grid-column: 1 / span 2;
+    grid-row: 1;
+    border-radius: 3px 3px 0 0;
+    border-width: 1px;
+}
+
+.gh-dashboard5-growth .gh-dashboard5-box:nth-child(2) {
+    grid-column: 1;
+    grid-row: 2;
+    border-radius: 0;
+    border-width: 0 1px 1px 1px;
+}
+
+.gh-dashboard5-growth .gh-dashboard5-box:nth-child(3) {
+    grid-column: 2;
+    grid-row: 2;
+    border-radius: 0;
+    border-width: 0 1px 1px 0;
+}
+
+.gh-dashboard5-growth .gh-dashboard5-box:nth-child(4) {
+    grid-column: 1;
+    grid-row: 3;
+    border-radius: 0 0 0 3px;
+    border-width: 0 1px 1px 1px;
+}
+
+.gh-dashboard5-growth .gh-dashboard5-box:nth-child(5) {
+    grid-column: 2;
+    grid-row: 3;
+    border-radius: 0 0 3px 0;
+    border-width: 0 1px 1px 0;
+}
\ No newline at end of file