diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs
index 0b370e719c..1551debf1c 100644
--- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs
+++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs
@@ -1,50 +1,35 @@
-<section {{did-insert this.onInsert}}>
+<section class="gh-dashboard5-layout" {{did-insert this.onInsert}}>
     {{#if this.isLoading }}
         <GhLoadingSpinner />
     {{else}}
         {{#if this.areMembersEnabled}}
-            <Dashboard::V5::Charts::Anchor
-                @days={{this.days}}
-                @onDaysChange={{this.onDaysChange}}
-                @daysOptions={{this.daysOptions}}
-                @selected={{this.selectedDaysOption}}
-            />
+            <Dashboard::V5::Charts::Anchor />
+
+            {{!-- Could these if else statements be cleaned up more? --}}
             {{#if this.areNewslettersEnabled}}
-                <section class="gh-dashboard5-split">
-                    <section class="gh-dashboard5-split">
-                            <Dashboard::V5::Charts::Engagement />
-                            <Dashboard::V5::Charts::Email />
-                        </section>
-                    </section>
-                    <Dashboard::V5::Charts:EmailOpenRate />
-                </section> 
+                <Dashboard::V5::Charts::Engagement />
+                <Dashboard::V5::Charts::Email />
+                <Dashboard::V5::Charts::EmailOpenRate />
             {{else}}
                 <Dashboard::V5::Charts::Engagement />
             {{/if}}
+    
         {{else}}
             {{#if this.areNewslettersEnabled}}
-                <section class="gh-dashboard5-split">
-                    <section class="gh-dashboard5-split">
-                            <Dashboard::V5::Charts::Engagement />
-                            <Dashboard::V5::Charts::Email />
-                        </section>
-                    </section>
-                    <Dashboard::V5::Charts:EmailOpenRate />
-                </section> 
+                <Dashboard::V5::Charts::Engagement />
+                <Dashboard::V5::Charts::Email />
+                <Dashboard::V5::Charts::EmailOpenRate />
             {{/if}}
         {{/if}}
 
-        <section class="gh-dashboard5-split">
-            <Dashboard::V5::Charts::RecentPosts />
-            <Dashboard::V5::Charts::RecentActivity />
-        </section>
-
+        <Dashboard::V5::Charts::RecentPosts />
+        <Dashboard::V5::Charts::RecentActivity />
         <Dashboard::V5::Resources::Help />
-        
+
         {{!-- <Dashboard::V5::Resources::WhatsNew /> --}}
         {{!-- <Dashboard::V5::Resources::LatestNewsletters /> --}}
         {{!-- <Dashboard::V5::Resources::StaffPicks /> --}}
     {{/if}}
-
-    <Dashboard::V5::Prototype::ControlPanel />
 </section>
+
+<Dashboard::V5::Prototype::ControlPanel />
\ No newline at end of file
diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.js b/ghost/admin/app/components/dashboard/dashboard-v5.js
index bcb0155cbe..434122678b 100644
--- a/ghost/admin/app/components/dashboard/dashboard-v5.js
+++ b/ghost/admin/app/components/dashboard/dashboard-v5.js
@@ -2,42 +2,14 @@ import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 
-const DAYS_OPTIONS = [{
-    name: '7 Days',
-    value: 7
-}, {
-    name: '30 Days',
-    value: 30
-}, {
-    name: '90 Days',
-    value: 90
-}, {
-    name: 'All Time',
-    value: 'all'
-}];
-
 export default class DashboardDashboardV5Component extends Component {
     @service dashboardStats;
 
-    daysOptions = DAYS_OPTIONS;
-
-    get days() {
-        return this.dashboardStats.chartDays;
-    }
-
-    set days(days) {
-        this.dashboardStats.chartDays = days;
-    }
-
     @action
     onInsert() {
         this.dashboardStats.loadSiteStatus();
     }
 
-    get selectedDaysOption() {
-        return this.daysOptions.find(d => d.value === this.days);
-    }
-
     get isLoading() {
         return this.dashboardStats.siteStatus === null;
     }
@@ -53,9 +25,4 @@ export default class DashboardDashboardV5Component extends Component {
     get areMembersEnabled() {
         return this.dashboardStats.siteStatus?.membersEnabled;
     }
-
-    @action 
-    onDaysChange(selected) {
-        this.days = selected.value;
-    }
 }
diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
index 7075abcd20..422f49c8b2 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
@@ -1,56 +1,67 @@
 <section class="gh-dashboard5-section gh-dashboard5-anchor">
     <article class="gh-dashboard5-box">
-        <div class="gh-dashboard5-chart">
-            {{#if this.loading}}
-                <div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
-            {{else}}
-                <div class="gh-dashboard5-chart-container">
-                    <EmberChart
-                        @type={{this.chartType}}
-                        @data={{this.chartData}}
-                        @options={{this.chartOptions}}
-                        @height={{this.chartHeight}} />
-                </div>
-            {{/if}}
-        </div>
-
-        <div class="gh-dashboard5-stats{{unless this.hasPaidTiers ' is-solo'}}" {{did-insert this.loadCharts}}>
-            <button class="gh-dashboard5-stats-button {{if this.chartShowingTotal 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "total")}}>
+        <div class="gh-dashboard5-hero {{unless this.hasPaidTiers 'is-solo'}}">
+            {{#unless this.hasPaidTiers}}
                 <Dashboard::v5::Parts::Metric
                     @label={{gh-pluralize this.totalMembers "Total member" without-count=true}}
                     @value={{format-number this.totalMembers}}
                     @trends={{this.hasTrends}}
                     @percentage={{this.totalMembersTrend}}
                     @large={{true}} /> 
-            </button>
+            {{/unless}}
+
+            <div class="gh-dashboard5-chart">
+                {{#if this.loading}}
+                    <div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+                {{else}}
+                    <div class="gh-dashboard5-chart-container">
+                        <EmberChart
+                            @type={{this.chartType}}
+                            @data={{this.chartData}}
+                            @options={{this.chartOptions}}
+                            @height={{if this.hasPaidTiers this.chartHeight this.chartHeightSmall}} />
+                    </div>
+                {{/if}}
+            </div>
+
             {{#if this.hasPaidTiers}}
-                <button class="gh-dashboard5-stats-button {{if this.chartShowingPaid 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "paid")}}>
-                    <Dashboard::v5::Parts::Metric
-                        @label={{gh-pluralize this.paidMembers "Paid member" without-count=true}}
-                        @value={{format-number this.paidMembers}}
-                        @trends={{this.hasTrends}}
-                        @percentage={{this.paidMembersTrend}}
-                        @large={{true}} />
-                </button>
-                <button class="gh-dashboard5-stats-button {{if this.chartShowingMonthly 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "monthly")}}>
-                    <Dashboard::v5::Parts::Metric
-                        @label="MRR"
-                        @value="${{gh-price-amount this.currentMRR}}"
-                        @trends={{this.hasTrends}}
-                        @percentage={{this.mrrTrend}}
-                        @large={{true}} />
-                </button>
+                <div class="gh-dashboard5-stats{{unless this.hasPaidTiers ' is-solo'}}" {{did-insert this.loadCharts}}>
+                    <button class="gh-dashboard5-stats-button {{if this.chartShowingTotal 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "total")}}>
+                        <Dashboard::v5::Parts::Metric
+                            @label={{gh-pluralize this.totalMembers "Total member" without-count=true}}
+                            @value={{format-number this.totalMembers}}
+                            @trends={{this.hasTrends}}
+                            @percentage={{this.totalMembersTrend}}
+                            @large={{true}} /> 
+                    </button> 
+                    <button class="gh-dashboard5-stats-button {{if this.chartShowingPaid 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "paid")}}>
+                        <Dashboard::v5::Parts::Metric
+                            @label={{gh-pluralize this.paidMembers "Total paid member" without-count=true}}
+                            @value={{format-number this.paidMembers}}
+                            @trends={{this.hasTrends}}
+                            @percentage={{this.paidMembersTrend}}
+                            @large={{true}} />
+                    </button>
+                    <button class="gh-dashboard5-stats-button {{if this.chartShowingMonthly 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "monthly")}}>
+                        <Dashboard::v5::Parts::Metric
+                            @label="MRR"
+                            @value="${{gh-price-amount this.currentMRR}}"
+                            @trends={{this.hasTrends}}
+                            @percentage={{this.mrrTrend}}
+                            @large={{true}} />
+                    </button>
+                </div>
             {{/if}}
         </div>
 
-        <div class="gh-dashboard5-selections">
+        <div class="gh-dashboard5-selects">
             {{#if this.chartShowingPaid}}
-                <div class="prototype-selection">
+                <div class="gh-dashboard5-select">
                     <PowerSelect
                         @selected={{this.selectedPaidOption}}
                         @options={{this.paidOptions}}
                         @searchEnabled={{false}}
-                        @onChange={{this.paidOptionsChange}}
+                        @onChange={{this.onPaidChange}}
                         @triggerComponent="gh-power-select/trigger"
                         @triggerClass="gh-contentfilter-menu-trigger"
                         @dropdownClass="gh-contentfilter-menu-dropdown"
@@ -61,12 +72,12 @@
                     </PowerSelect>
                 </div>
             {{/if}}
-            <div class="prototype-selection">
+            <div class="gh-dashboard5-select">
                 <PowerSelect
-                    @selected={{@selected}}
-                    @options={{@daysOptions}}
+                    @selected={{this.selectedDaysOption}}
+                    @options={{this.daysOptions}}
                     @searchEnabled={{false}}
-                    @onChange={{@onDaysChange}}
+                    @onChange={{this.onDaysChange}}
                     @triggerComponent="gh-power-select/trigger"
                     @triggerClass="gh-contentfilter-menu-trigger"
                     @dropdownClass="gh-contentfilter-menu-dropdown"
diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.js b/ghost/admin/app/components/dashboard/v5/charts/anchor.js
index 9881e07698..1c1a74efad 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js
+++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.js
@@ -6,11 +6,25 @@ import {tracked} from '@glimmer/tracking';
 
 const DATE_FORMAT = 'D MMM YYYY';
 
+const DAYS_OPTIONS = [{
+    name: '7 Days',
+    value: 7
+}, {
+    name: '30 Days',
+    value: 30
+}, {
+    name: '90 Days',
+    value: 90
+}, {
+    name: 'All Time',
+    value: 'all'
+}];
+
 const PAID_OPTIONS = [{
-    name: 'Paid total',
+    name: 'Total Paid Members',
     value: 'paid'
 }, {
-    name: 'Paid breakdown',
+    name: 'Paid Members By Day',
     value: 'breakdown'
 }];
 
@@ -19,8 +33,22 @@ export default class Anchor extends Component {
     @tracked chartDisplay = 'total';
     @tracked paidOptionSelected = 'paid';
 
+    daysOptions = DAYS_OPTIONS;
     paidOptions = PAID_OPTIONS;
 
+    get days() {
+        return this.dashboardStats.chartDays;
+    }
+
+    set days(days) {
+        this.dashboardStats.chartDays = days;
+    }
+
+    @action
+    onInsert() {
+        this.dashboardStats.loadSiteStatus();
+    }
+
     @action
     loadCharts() {
         this.dashboardStats.loadMemberCountStats();
@@ -34,11 +62,20 @@ export default class Anchor extends Component {
     }
 
     @action 
-    paidOptionsChange(selected) {
+    onPaidChange(selected) {
         this.paidOptionSelected = selected.value;
         this.changeChartDisplay(selected.value);
     }
 
+    @action 
+    onDaysChange(selected) {
+        this.days = selected.value;
+    }
+
+    get selectedDaysOption() {
+        return this.daysOptions.find(d => d.value === this.days);
+    }
+
     get selectedPaidOption() {
         return this.paidOptions.find(d => d.value === this.paidOptionSelected);
     }
@@ -413,7 +450,11 @@ export default class Anchor extends Component {
     }
 
     get chartHeight() {
-        return 325;
+        return 300;
+    }
+
+    get chartHeightSmall() {
+        return 250;
     }
 
     calculatePercentage(from, to) {
diff --git a/ghost/admin/app/components/dashboard/v5/charts/email-open-rate.hbs b/ghost/admin/app/components/dashboard/v5/charts/email-open-rate.hbs
index 0d21a93df9..a8e20ec998 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/email-open-rate.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/email-open-rate.hbs
@@ -1,29 +1,27 @@
-<section class="gh-dashboard5-section gh-dashboard5-rate">
+<section class="gh-dashboard5-section gh-dashboard5-email-open-rate">
     <article class="gh-dashboard5-box">
-        <div class="gh-dashboard5-insert">
-            <Dashboard::v5::Parts::Metric
-                @label="Open rate"
-                @value="{{this.currentOpenRate}}%" />
+        <Dashboard::v5::Parts::Metric
+            @label="Email open rate"
+            @value="{{this.currentOpenRate}}%" />
 
-            <div class="gh-dashboard5-chart">
-                {{#if this.loading}}
-                    <div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
-                {{else}}
-                    <div class="gh-dashboard5-chart-ticks">
-                        <span>100%</span>
-                        <span>75%</span>
-                        <span>50%</span>
-                        <span>25%</span>
-                    </div>
-                    <div class="gh-dashboard5-chart-container">
-                        <EmberChart
-                            @type={{this.chartType}}
-                            @data={{this.chartData}}
-                            @options={{this.chartOptions}}
-                            @height={{this.chartHeight}} />
-                    </div>
-                {{/if}}
-            </div>
+        <div class="gh-dashboard5-chart">
+            {{#if this.loading}}
+                <div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+            {{else}}
+                <div class="gh-dashboard5-chart-ticks">
+                    <span>100%</span>
+                    <span>75%</span>
+                    <span>50%</span>
+                    <span>25%</span>
+                </div>
+                <div class="gh-dashboard5-chart-container">
+                    <EmberChart
+                        @type={{this.chartType}}
+                        @data={{this.chartData}}
+                        @options={{this.chartOptions}}
+                        @height={{this.chartHeight}} />
+                </div>
+            {{/if}}
         </div>
     </article>
 </section>
\ No newline at end of file
diff --git a/ghost/admin/app/components/dashboard/v5/charts/email.hbs b/ghost/admin/app/components/dashboard/v5/charts/email.hbs
index d36ec67a0c..3e7f338db0 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/email.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/email.hbs
@@ -1,13 +1,13 @@
 <section class="gh-dashboard5-section gh-dashboard5-email">
     <article class="gh-dashboard5-box">
-        <div {{did-insert this.loadCharts}} class="gh-dashboard5-insert">
-            <div class="gh-dashboard5-insert-item">
+        <div {{did-insert this.loadCharts}} class="gh-dashboard5-rows">
+            <div class="gh-dashboard5-row">
                 <Dashboard::v5::Parts::Metric
                     @label="Newsletter subscribers"
                     @value={{format-number this.dataSubscribers.total}} />
             </div>
 
-            <div class="gh-dashboard5-insert-item">
+            <div class="gh-dashboard5-row">
                 <Dashboard::v5::Parts::Metric
                     @label="Emails sent over last 30 days"
                     @value={{format-number this.dataEmailsSent}} />
diff --git a/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs b/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs
index f3f21ac6ba..9354389a68 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs
@@ -1,13 +1,13 @@
 <section class="gh-dashboard5-section gh-dashboard5-engagement">
     <article {{did-insert this.loadCharts}} class="gh-dashboard5-box">
-        <div class="gh-dashboard5-insert">
-            <div class="gh-dashboard5-insert-item">
+        <div class="gh-dashboard5-rows">
+            <div class="gh-dashboard5-row">
                 <Dashboard::v5::Parts::Metric
                     @label="Engaged over 30 days"
                     @value={{this.data30Days}}
                     />
             </div>
-            <div class="gh-dashboard5-insert-item">
+            <div class="gh-dashboard5-row">
                 <Dashboard::v5::Parts::Metric
                     @label="Engaged over 7 days"
                     @value={{this.data7Days}}
@@ -16,7 +16,7 @@
         </div>
     </article>
 
-    <div class="prototype-selection">
+    <div class="gh-dashboard5-select">
         <PowerSelect
             @selected={{this.selectedStatusOption}}
             @options={{this.statusOptions}}
diff --git a/ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs b/ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs
index 08c7c35253..a5f4639378 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs
@@ -1,4 +1,4 @@
-<section class="gh-dashboard5-section gh-dashboard5-activity">
+<section class="gh-dashboard5-section gh-dashboard5-recent-activity">
     <article class="gh-dashboard5-box">
         <div class="gh-dashboard5-list" data-test-dashboard-member-activity>
             <div class="gh-dashboard5-list-header">
diff --git a/ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs b/ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs
index 6183b77833..d26c1c98b3 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs
@@ -1,4 +1,4 @@
-<section class="gh-dashboard5-section gh-dashboard5-posts">
+<section class="gh-dashboard5-section gh-dashboard5-recent-posts">
     <article class="gh-dashboard5-box">
         <div class="gh-dashboard5-list" {{did-insert this.loadPosts}}>
             <div class="gh-dashboard5-list-header">
diff --git a/ghost/admin/app/components/dashboard/v5/prototype/control-panel.hbs b/ghost/admin/app/components/dashboard/v5/prototype/control-panel.hbs
index 0ec4025676..12dcdf18a5 100644
--- a/ghost/admin/app/components/dashboard/v5/prototype/control-panel.hbs
+++ b/ghost/admin/app/components/dashboard/v5/prototype/control-panel.hbs
@@ -1,4 +1,4 @@
-<div class="gh-main-section prototype-panel" {{did-insert this.onInsert}}>
+<div class="gh-main-section prototype-control-panel" {{did-insert this.onInsert}}>
     <h4 class="gh-main-section-header small bn">Prototype control panel</h4>
 
     <div class="gh-expandable">
diff --git a/ghost/admin/app/components/dashboard/v5/resources/help.hbs b/ghost/admin/app/components/dashboard/v5/resources/help.hbs
index dd3ebc792e..cbdd6a710d 100644
--- a/ghost/admin/app/components/dashboard/v5/resources/help.hbs
+++ b/ghost/admin/app/components/dashboard/v5/resources/help.hbs
@@ -1,4 +1,4 @@
-<div class="gh-main-section gh-members-help">
+<div class="gh-main-section gh-members-help gh-dashboard5-help">
     <div class="gh-main-section-block">
         <div class="gh-main-section-content grey">
             <a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
diff --git a/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs b/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs
index 039132b879..0f3403726d 100644
--- a/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs
+++ b/ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs
@@ -1,5 +1,5 @@
 <div 
-    class="dashboard-prototype-newsletters"
+    class="dashboard-prototype-newsletters gh-dashboard5-latest-newsletters"
     {{did-insert this.load}}
 >
     {{#if (not (or this.loading this.error))}}
diff --git a/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs b/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs
index e12b778b14..0b6c0c5143 100644
--- a/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs
+++ b/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs
@@ -1,4 +1,4 @@
-<div class="gh-dashboard5-list" {{did-insert this.load}}>
+<div class="gh-dashboard5-list gh-dashboard5-staff-picks" {{did-insert this.load}}>
     {{#if (not (or this.loading this.error))}}
      <div class="gh-dashboard5-title">
         <h4>Staff picks</h4>
diff --git a/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs b/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs
index e816eb30e5..ea3ac12d7e 100644
--- a/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs
+++ b/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs
@@ -1,4 +1,4 @@
-<div {{did-insert this.load}}>
+<div class="gh-dashboard5-whats-new" {{did-insert this.load}}>
     {{#if (not (or this.loading this.error))}}
         <div class="gh-dashboard-box whats-new {{if this.whatsNew.hasNew "has-new"}}">
             <div class="gh-dashboard-header-container">
diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index 618195d5bc..fe599d996e 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -69,6 +69,7 @@
 @import "layouts/fullscreen-wizard.css";
 @import "layouts/post-preview.css";
 @import "layouts/dashboard.css";
+@import "layouts/dashboard-v5.css";
 @import "layouts/products.css";
 @import "layouts/offers.css";
 
diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css
index d6f638d47b..d5358a8baa 100644
--- a/ghost/admin/app/styles/app.css
+++ b/ghost/admin/app/styles/app.css
@@ -69,6 +69,7 @@
 @import "layouts/fullscreen-wizard.css";
 @import "layouts/post-preview.css";
 @import "layouts/dashboard.css";
+@import "layouts/dashboard-v5.css";
 @import "layouts/products.css";
 @import "layouts/offers.css"
 
diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css
new file mode 100644
index 0000000000..d8b1374ac0
--- /dev/null
+++ b/ghost/admin/app/styles/layouts/dashboard-v5.css
@@ -0,0 +1,680 @@
+/* --------------------------------- 
+Dashboard v5 Prototype */
+
+.prototype-control-panel {
+    margin-top: 50vh; /* Keep it out of view */
+}
+
+.prototype-states-buttons {
+    margin-top: 15px;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.prototype-paid-mix-dropdown {
+    position: absolute;
+    right: 0px;
+    top: 8px;
+}
+
+.prototype-counts {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 28px;
+}
+
+.prototype-section {
+    margin-bottom: 40px;
+}
+
+.prototype-section > h2 {
+    font-size: 1.65rem;
+    font-weight: 600;
+    line-height: 1.4em;
+    margin-bottom: 8px;
+    color: var(--black);
+}
+
+.prototype-counts.col {
+    flex-direction: column;
+}
+
+.prototype-counts > * {
+    flex-grow: 1;
+    min-width: 0;
+    flex-basis: 0;
+}
+
+.prototype-box {
+    border: 1px solid var(--whitegrey);
+    padding: 28px;
+    position: relative;
+}
+
+.prototype-box .number {
+    font-size: 24px;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Layout */
+
+.gh-dashboard5 {
+    max-width: 1230px;
+    margin: 0 auto;
+}
+
+.gh-dashboard5-layout {
+    display: grid;
+    grid-gap: 32px;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: auto auto auto auto;
+    grid-template-areas: 
+        "anchor             anchor             anchor             anchor"  
+        "engagement         email              email-open-rate    email-open-rate" 
+        "recent-posts       recent-posts       recent-activity    recent-activity"
+        "help               help               help               help";
+}
+
+.gh-dashboard5-rows {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.gh-dashboard5-row {
+    flex: 1;
+    padding: 4px 0 16px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.gh-dashboard5-row:last-child {
+    padding-top: 16px;
+}
+
+.gh-dashboard5-section {
+    display: flex;
+}
+
+.gh-dashboard5-title {
+    display: flex;
+    flex-direction: row;
+    margin: 0 0 16px;
+}
+
+.gh-dashboard5-title h4 {
+    margin: 0 16px 0 0;
+    font-size: 1.65rem;
+    font-weight: 600;
+    line-height: 1.4em;
+    color: #15171a;
+}
+
+.gh-dashboard5-box {
+    flex: 1;
+    border: 1px solid var(--whitegrey);
+    padding: 24px;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: stretch;
+}
+
+.gh-dashboard5-hero {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: stretch;
+}
+
+.gh-dashboard5-hero.is-solo .gh-dashboard5-metric {
+    margin-top: 4px;
+    margin-bottom: 12px;
+}
+
+.gh-dashboard5 .gh-members-help {
+    margin-top: 0;
+}
+
+.gh-dashboard5-selects {
+    position: absolute;
+    top: 17px;
+    right: 4px;
+    display: flex;
+    flex-direction: row;
+}
+
+.gh-dashboard5-select {
+    position: absolute;
+    top: 17px;
+    right: 4px;
+}
+
+.gh-dashboard5-selects .gh-dashboard5-select {
+    position: relative;
+    top: auto;
+    left: auto;
+}
+
+.gh-dashboard5-select .ember-power-select-selected-item {
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: .3px;
+    line-height: 1em;
+    padding: 0;
+    color: var(--midlightgrey);
+    white-space: nowrap;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Chart */
+
+.gh-dashboard5-chart {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+}
+
+.gh-dashboard5-chart-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.gh-dashboard5-chart-ticks {
+    flex: none;
+    padding: 8px 24px 16px 0;
+    font-size: 1.2rem;
+    text-transform: none;
+    font-weight: 500;
+    letter-spacing: .2px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 1.1rem;
+    letter-spacing: .2px;
+    color: var(--midgrey);
+    line-height: 1em;
+}
+
+.gh-dashboard5-chart-container {
+    flex: 1;
+    position: relative;
+    width: 100%; /* hack for ChartJS responsive resizing */
+    height: 100%;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Percentage */
+
+.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 3px 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%));
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Metric */
+
+.gh-dashboard5-metric {
+    display: flex;
+    flex-direction: column;
+}
+
+.gh-dashboard5-metric.is-center {
+    align-items: center;
+}
+
+.gh-dashboard5-metric.is-stretch {
+    flex: 1;
+    justify-content: space-between;
+}
+
+.gh-dashboard5-metric-data {
+    display: flex;
+    flex-direction: column;
+}
+
+.gh-dashboard5-metric-label {
+    align-items: center;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: .3px;
+    line-height: 1em;
+    margin: 0 0 14px;
+    padding: 0;
+    color: var(--midgrey);
+    white-space: nowrap;
+}
+
+.gh-dashboard5-metric.is-large .gh-dashboard5-metric-label {
+    margin-bottom: 10px;
+}
+
+.gh-dashboard5-metric.is-reverse .gh-dashboard5-metric-label {
+    margin: 2px 0 0;
+}
+
+.gh-dashboard5-metric.is-center .gh-dashboard5-metric-label {
+    text-align: center;
+    margin-top: 4px;
+}
+
+.gh-dashboard5-metric-value {
+    display: flex;
+    align-items: flex-end;
+    font-size: 2.8rem;
+    font-weight: 600;
+    letter-spacing: -.1px;
+    line-height: 1em;
+    white-space: nowrap;
+    margin: 0 0 8px;
+    gap: 10px;
+}
+
+.gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
+    font-size: 3.6rem;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+
+.gh-dashboard5-metric.is-center .gh-dashboard5-metric-value {
+    justify-content: center;
+}
+
+.gh-dashboard5-metric.is-reverse.is-large .gh-dashboard5-metric-value {
+    margin-bottom: 6px;
+}
+
+.gh-dashboard5-metric-extra {
+    text-transform: none;
+    font-weight: 500;
+    letter-spacing: .2px;
+    font-size: 1.1rem;
+    letter-spacing: .2px;
+    color: var(--midlightgrey);
+    line-height: 1em;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 List */
+
+.gh-dashboard5-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.gh-dashboard5-list-header {
+    display: grid;
+    grid-template-columns: 65% 20% 15%;
+    padding: 0 0 24px;
+    border-bottom: 1px solid var(--whitegrey);
+}
+
+.gh-dashboard5-list-title {
+    align-items: center;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: .3px;
+    line-height: 1em;
+    padding: 0;
+    color: #7c8b9a;
+    white-space: nowrap;
+    padding: 0 24px 0 0;
+}
+
+.gh-dashboard5-list-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    padding: 8px 0;
+}
+
+.gh-dashboard5-list-item {
+    padding: 14px 0;
+    display: grid;
+    grid-template-columns: 65% 20% 15%;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--whitegrey);
+}
+
+.gh-dashboard5-recent-activity .gh-dashboard5-list-item {
+    grid-template-columns: 80% 20%;
+}
+
+.gh-dashboard5-list-item:nth-child(3) {
+    border-bottom: 0 none;
+}
+
+.gh-dashboard5-list-item > span {
+    padding: 0 24px 4px 0;
+}
+
+.gh-dashboard5-list-item:last-child {
+    border-bottom: 0;
+}
+
+.gh-dashboard5-list-item a {
+    font-weight: 500;
+    font-size: 1.5rem;
+    color: var(--darkgrey);
+    padding: 0 64px 0 0;
+    display: flex;
+    align-items: center;
+}
+
+.gh-dashboard5-list-item > span {
+    font-size: 2rem;
+    font-weight: 600;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.gh-dashboard5-list-item svg {
+    width: 26px;
+    height: 26px;
+    margin: 0 0.75rem 0 0;
+}
+
+.gh-dashboard5-list-item > a > span {
+    color: var(--midgrey);
+    padding: 0 0 0 0.5rem;
+    white-space: nowrap;
+}
+
+.gh-dashboard5-list-footer {
+    border-top: 1px solid var(--whitegrey);
+    padding: 20px 0 0;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Anchor */
+
+.gh-dashboard5-anchor {
+    grid-area: anchor;
+    position: relative;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-box {
+    padding: 24px 24px 8px;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-stats {
+    display: flex;
+    flex-direction: row;
+    width: calc(100% + 48px);
+    padding: 0 8px;
+    margin: 12px -24px 0;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-title {
+    margin-bottom: 24px;
+}
+
+.gh-dashboard5-anchor.is-top .gh-dashboard5-stats {
+    margin-top: 0;
+    margin-bottom: 20px;
+    border-width: 0 0 1px;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-stats-button {
+    cursor: pointer;
+    position: relative;
+    flex: 1;
+    padding: 20px 16px 24px 12px;
+    margin: 2px 4px 2px 2px;
+    text-align: left;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 5px;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected { 
+    color: var(--black);
+    background: var(--white) !important;
+    box-shadow: 0 0 12px rgb(0 0 0 / 3%);
+    border: 1px solid var(--whitegrey);
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-stats.is-solo .gh-dashboard5-stats-button.is-selected {
+    background: transparent;
+    box-shadow: 0 none;
+    border: 0 none;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-stats-highlight {
+    width: 1px;
+    height: 3px;
+    border-radius: 5px;
+    background: var(--whitegrey);
+    margin: 8px 0 0;
+    background: #5B98F2;
+    opacity: 0;
+    transition: width 175ms ease-out, opacity 125ms linear;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected .gh-dashboard5-stats-highlight {
+    width: 25px;
+    opacity: 1;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-chart {
+    flex-direction: column;
+    margin-left: -16px;
+    margin-right: -16px;
+    margin-top: 12px;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-chart-ticks {
+    flex-direction: row;
+    padding: 12px 0 4px;
+    font-size: 1.2rem;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span {
+    opacity: 0.5;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span:first-child,
+.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span:last-child {
+    opacity: 1;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Email */
+
+.gh-dashboard5-email {
+    grid-area: email;
+    
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Engagement */
+
+.gh-dashboard5-engagement {
+    grid-area: engagement;
+    position: relative;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Recent Posts */
+
+.gh-dashboard5-recent-posts {
+    grid-area: recent-posts;
+}
+
+.gh-dashboard5-recent-posts .gh-dashboard5-box {
+    padding: 28px 24px 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+.gh-dashboard5-recent-posts .gh-dashboard5-title {
+    margin-bottom: 24px;
+}
+
+.gh-dashboard5-recent-posts .gh-dashboard5-list-item {
+    height: 100%;
+}
+
+.gh-dashboard5-recent-posts .gh-dashboard5-list-item:nth-child(4),
+.gh-dashboard5-recent-posts .gh-dashboard5-list-item:nth-child(5) {
+    display: none;
+}
+
+.gh-dashboard5-recent-posts .gh-dashboard5-list-item a > span{
+    width: 80%;
+    overflow: hidden;
+    color: var(--darkgrey);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.gh-dashboard5-recent-posts .gh-dashboard5-list-item a > span {
+    display: inline-block;
+    height: 57px;
+}
+
+.gh-dashboard5-recent-posts .gh-content-entry-title {
+    font-weight: 600;
+    font-size: 14px !important;
+    color: rgb(21, 23, 26);
+}
+
+.gh-dashboard5-recent-posts .footer {
+    padding-top: 12px;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Recent Activity */
+
+.gh-dashboard5-recent-activity {
+    grid-area: recent-activity;
+}
+
+.gh-dashboard5-recent-activity .gh-dashboard5-box {
+    padding: 28px 24px 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+.gh-dashboard5-recent-activity .gh-dashboard5-title {
+    margin-bottom: 20px;
+}
+
+.gh-dashboard5-recent-activity .gh-dashboard5-list-item {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 0;
+    border-bottom: 0 none;
+}
+
+.gh-dashboard5-recent-activity .gh-dashboard5-list-item .member-details {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0;
+}
+
+.gh-dashboard5-recent-activity .gh-dashboard5-list-item .member-avatar {
+    width: 28px;
+    height: 28px;
+    background: #70DEB1;
+    border-radius: 24px;
+    margin: 0 12px 0 0;
+}
+
+.gh-dashboard5-recent-activity .gh-dashboard5-list-item > span.gh-dashboard-activity-time {
+    font-size: 1.2rem;
+    color: var(--midlightgrey);
+    text-align: right;
+    padding-right: 0;
+    padding-top: 6px;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Email Open Rate */
+
+.gh-dashboard5-email-open-rate {
+    grid-area: email-open-rate;
+}
+
+.gh-dashboard5-email-open-rate .gh-dashboard5-chart {
+    margin: 24px 0 0;
+}
+
+.gh-dashboard5-email-open-rate .gh-dashboard5-chart-ticks {
+    padding: 0 16px 0 0;
+}
+
+.gh-dashboard5-email-open-rate .gh-dashboard5-metric-label {
+    padding-top: 4px;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Help */
+
+.gh-dashboard5-help {
+    grid-area: help;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Misc */
+
+.gh-dashboard5 .gh-offers-help {
+    margin: 0;
+}
+
+.gh-dashboard5 .gh-list-header {
+    border-bottom: 0;
+}
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index ff71b13cd6..e59e95a6da 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -972,1125 +972,3 @@ a.gh-dashboard-container {
     opacity: 0;
     max-height: 0;
 }
-
-
-
-/* --------------------------------- 
-Dashboard v5 Prototype */
-
-.prototype-panel {
-    margin-top: 50vh; /* Keep it out of view */
-}
-
-.prototype-states-buttons {
-    margin-top: 15px;
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-}
-
-.prototype-paid-mix-dropdown {
-    position: absolute;
-    right: 0px;
-    top: 8px;
-}
-
-.prototype-counts {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    gap: 28px;
-}
-
-.prototype-section {
-    margin-bottom: 40px;
-}
-
-.prototype-section > h2 {
-    font-size: 1.65rem;
-    font-weight: 600;
-    line-height: 1.4em;
-    margin-bottom: 8px;
-    color: var(--black);
-}
-
-.prototype-counts.col {
-    flex-direction: column;
-}
-
-.prototype-counts > * {
-    flex-grow: 1;
-    min-width: 0;
-    flex-basis: 0;
-}
-
-.prototype-box {
-    border: 1px solid var(--whitegrey);
-    padding: 28px;
-    position: relative;
-}
-
-.prototype-box .number {
-    font-size: 24px;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Misc */
-
-.gh-dashboard5-number {
-    display: flex;
-    align-items: flex-end;
-    font-size: 2.4rem;
-    line-height: 4rem;
-    font-weight: 700;
-    color: var(--black);
-    letter-spacing: -.1px;
-    line-height: 1;
-    white-space: nowrap;
-    margin: 4px 0 2px;
-    gap: 10px;
-}
-
-.gh-dashboard5-number.is-small {
-    font-size: 2.2rem;
-}
-
-.gh-dashboard5-number.is-solo {
-    margin-top: 28px;
-}
-
-.gh-dashboard5-number small {
-    font-size: 1.4rem;
-    padding: 0 0 0.25rem;
-    color: var(--midgrey);
-}
-
-.gh-dashboard5-slash {
-    margin: 0 0.5em 0 0;
-}
-
-.gh-dashboard5-info {
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    font-weight: 700;
-    letter-spacing: .2px;
-    margin: 0 0 6px;
-    padding: 0;
-    color: var(--midgrey);
-}
-
-.gh-dashboard5-info.is-solo {
-    margin: 0 0 20px;
-}
-
-.gh-dashboard5-date {
-    font-size: 1.1rem;
-    text-transform: none;
-    font-weight: 600;
-    letter-spacing: .2px;
-    margin: 2px 0 0;
-    padding: 0;
-    color: var(--midlightgrey); 
-}
-
-.gh-dashboard5-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 0 8px;
-    min-height: 34px;
-}
-
-.gh-dashboard5-header h3 {
-    font-size: 1.6rem;
-    margin: 0;
-    padding: 0;
-}
-
-.gh-dashboard5-selection {
-    margin: 0 -8px 6px 0;
-}
-
-.gh-dashboard5 .gh-dashboard-box {
-    margin-bottom: 0;
-}
-
-.gh-dashboard5 .gh-dashboard-header-container {
-    display: none;
-}
-
-.gh-dashboard5 .gh-offers-help {
-    margin: 0;
-}
-
-.gh-dashboard5-overview {
-    position: relative;
-}
-
-.gh-dashboard5-overview > .gh-dashboard5-box {
-    padding: 0;
-}
-
-.gh-dashboard5-overview .gh-dashboard5-insert {
-    width: 75%;
-    display: flex;
-    flex-direction: row;
-    margin: 20px 28px 0px;
-}
-
-.gh-dashboard5-overview .gh-dashboard5-insert .gh-dashboard5-box {
-    border-radius: 0;
-    border-width: 0 1px 0 0;
-    padding-top: 8px;
-    padding-bottom: 8px;
-}
-
-.gh-dashboard5-overview .gh-dashboard5-insert .gh-dashboard5-box:first-child {
-    border-radius: 0;
-    border-width: 0 1px 0 0;
-    padding-left: 0;
-}
-
-.gh-dashboard5-overview .gh-dashboard5-insert .gh-dashboard5-box:last-child {
-    border-radius: 0;
-    border-width: 0;
-}
-
-.gh-dashboard5-overview .prototype-selection {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-}
-
-.gh-dashboard5-section .ember-power-select-selected-item {
-    font-size: 1.2rem;
-    text-transform: uppercase;
-    font-weight: 500;
-    letter-spacing: .3px;
-    line-height: 1em;
-    padding: 0;
-    color: var(--midlightgrey);
-    white-space: nowrap;
-}
-
-.gh-dashboard5 .gh-list-header {
-    border-bottom: 0;
-}
-
-.gh-dashboard5-posts .gh-content-entry-title {
-    font-weight: 600;
-    font-size: 14px !important;
-    color: rgb(21, 23, 26);
-}
-
-.gh-dashboard5-posts .footer {
-    padding-top: 12px;
-}
-
-.gh-dashboard5-tooltip  {
-    position: absolute;
-    bottom: 16px;
-    right: 16px;
-    display: none;
-}
-
-.gh-dashboard5-tooltip.is-show {
-    display: block;
-}
-
-.gh-dashboard5-stats button {
-    position: relative;
-}
-
-.gh-dashboard5-normal {
-    visibility: visible;
-    opacity: 1;
-}
-
-.gh-dashboard5-normal.is-fade {
-    opacity: 0.2;
-}
-
-.gh-dashboard5-normal.is-hide {
-    visibility: hidden;
-}
-
-#gh-dashboard5-anchor-globaldate.is-show {
-    display: block;
-}
-
-#gh-dashboard5-bar {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 100px;
-    width: 1px;
-    height: 100%;
-    background: var(--lightgrey);
-    transition: left 125ms linear;
-}
-
-#gh-dashboard5-bar.is-show {
-    display: block;
-}
-
-#gh-dashboard5 canvas {
-    z-index: 99;
-}
-
-#gh-dashboard5-anchor-tooltip {
-    position: absolute;
-    bottom: 14px;
-    right: 16px;
-    opacity: 0;
-    transition: transform 125ms ease-out;
-    transform: translateY(8px);
-}
-
-#gh-dashboard5-anchor-tooltip.is-show {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-#gh-dashboard5-anchor-tooltip-value {
-    text-align: right;
-    font-size: 2rem;
-    line-height: 4rem;
-    font-weight: 700;
-    color: var(--black);
-    letter-spacing: -.1px;
-    line-height: 1;
-    white-space: nowrap;
-}
-
-#gh-dashboard5-anchor-tooltip-label {
-    text-align: right;
-    font-size: 1.2rem;
-    text-transform: none;
-    font-weight: 500;
-    letter-spacing: .2px;
-    margin: 2px 0 0;
-    padding: 0;
-    color: var(--midgrey);
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Layout */
-
-.gh-dashboard5 {
-    max-width: 1230px;
-    margin: 0 auto;
-}
-
-.gh-dashboard5-split {
-    display: grid;
-    gap: 32px;
-    grid-template-columns: 1fr 1fr;
-    position: relative;
-}
-
-.gh-dashboard5-split.is-four {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-}
-
-.gh-dashboard5-split.is-solo {
-    grid-template-columns: 1fr;
-}
-
-.gh-dashboard5-split.is-third {
-    grid-template-columns: 1fr 3fr;
-}
-
-.gh-dashboard5-split.is-three {
-    grid-template-columns: 1fr 1fr 2fr;
-}
-
-.gh-dashboard5-split.is-fourth {
-    grid-template-columns: 3fr 1fr;
-}
-
-.gh-dashboard5-split.is-fifth {
-    grid-template-columns: 2fr 1fr;
-}
-
-.gh-dashboard5-split.is-triple {
-    grid-template-columns: 2fr 1fr 1fr;
-}
-
-.gh-dashboard5-split .prototype-selection {
-    position: absolute;
-    top: -20px;
-    right: 0;
-}
-
-.gh-dashboard5-section {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 32px;
-}
-
-.gh-dashboard5-container {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    gap: 0;
-}
-
-.gh-dashboard5-title {
-    display: flex;
-    flex-direction: row;
-    margin: 0 0 16px;
-}
-
-.gh-dashboard5-title h4 {
-    margin: 0 16px 0 0;
-    font-size: 1.65rem;
-    font-weight: 600;
-    line-height: 1.4em;
-    color: #15171a;
-}
-
-.gh-dashboard5-title h4:nth-child(2) {
-    opacity: 0.25;
-}
-
-.gh-dashboard5-box {
-    flex: 1;
-    border: 1px solid var(--whitegrey);
-    padding: 24px;
-    border-radius: 3px;
-    display: flex;
-    flex-direction: column;
-    position: relative; /* Temporarily added for absolute positioned prototype-paid-mix-dropdown */
-    align-items: stretch;
-}
-
-.gh-dashboard5-area {
-    background: rgb(252,252,252);
-    background: linear-gradient(180deg, rgba(252,252,252,1) 0%, rgba(249,250,254,1) 100%);
-    background: #fafbfc;
-    border: 1px solid rgb(235, 238, 240);
-    padding: 24px;
-    border-radius: 3px;
-}
-
-.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-main-selection {
-    margin-top: -24px;
-}
-
-.gh-dashboard5 .gh-members-help {
-    margin-top: 0;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Chart */
-
-.gh-dashboard5-chart {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-}
-
-.gh-dashboard5-chart-loading {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.gh-dashboard5-chart-ticks {
-    flex: none;
-    padding: 8px 24px 16px 0;
-    font-size: 1.2rem;
-    text-transform: none;
-    font-weight: 500;
-    letter-spacing: .2px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    font-size: 1.1rem;
-    letter-spacing: .2px;
-    color: var(--midgrey);
-    line-height: 1em;
-}
-
-.gh-dashboard5-chart-container {
-    flex: 1;
-    position: relative;
-    width: 100%; /* hack for ChartJS responsive resizing */
-    height: 100%;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Percentage */
-
-.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 3px 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%));
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Metric */
-
-.gh-dashboard5-metric {
-    display: flex;
-    flex-direction: column;
-}
-
-.gh-dashboard5-metric.is-center {
-    align-items: center;
-}
-
-.gh-dashboard5-metric.is-stretch {
-    flex: 1;
-    justify-content: space-between;
-}
-
-.gh-dashboard5-metric-data {
-    display: flex;
-    flex-direction: column;
-}
-
-.gh-dashboard5-metric-label {
-    align-items: center;
-    font-size: 1.2rem;
-    text-transform: uppercase;
-    font-weight: 600;
-    letter-spacing: .3px;
-    line-height: 1em;
-    margin: 0 0 14px;
-    padding: 0;
-    color: var(--midgrey);
-    white-space: nowrap;
-}
-
-.gh-dashboard5-metric.is-large .gh-dashboard5-metric-label {
-    margin-bottom: 10px;
-}
-
-.gh-dashboard5-metric.is-reverse .gh-dashboard5-metric-label {
-    margin: 2px 0 0;
-}
-
-.gh-dashboard5-metric.is-center .gh-dashboard5-metric-label {
-    text-align: center;
-    margin-top: 4px;
-}
-
-.gh-dashboard5-metric-value {
-    display: flex;
-    align-items: flex-end;
-    font-size: 2.8rem;
-    font-weight: 600;
-    letter-spacing: -.1px;
-    line-height: 1em;
-    white-space: nowrap;
-    margin: 0 0 8px;
-    gap: 10px;
-}
-
-.gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
-    font-size: 3.6rem;
-    font-weight: 600;
-    margin-bottom: 0;
-}
-
-.gh-dashboard5-metric.is-center .gh-dashboard5-metric-value {
-    justify-content: center;
-}
-
-.gh-dashboard5-metric.is-reverse.is-large .gh-dashboard5-metric-value {
-    margin-bottom: 6px;
-}
-
-.gh-dashboard5-metric-extra {
-    text-transform: none;
-    font-weight: 500;
-    letter-spacing: .2px;
-    font-size: 1.1rem;
-    letter-spacing: .2px;
-    color: var(--midlightgrey);
-    line-height: 1em;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 List */
-
-.gh-dashboard5-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.gh-dashboard5-list-header {
-    display: grid;
-    grid-template-columns: 65% 20% 15%;
-    padding: 0 0 20px;
-    border-bottom: 1px solid var(--whitegrey);
-}
-
-.gh-dashboard5-list-title {
-    align-items: center;
-    font-size: 1.2rem;
-    text-transform: uppercase;
-    font-weight: 500;
-    letter-spacing: .3px;
-    line-height: 1em;
-    padding: 0;
-    color: #7c8b9a;
-    white-space: nowrap;
-    padding: 0 24px 0 0;
-}
-
-.gh-dashboard5-list-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 8px 0;
-}
-
-.gh-dashboard5-list-item {
-    padding: 14px 0;
-    display: grid;
-    grid-template-columns: 65% 20% 15%;
-    padding: 8px 0;
-    border-bottom: 1px solid var(--whitegrey);
-}
-
-.gh-dashboard5-activity .gh-dashboard5-list-item {
-    grid-template-columns: 80% 20%;
-}
-
-.gh-dashboard5-list-item:nth-child(3) {
-    border-bottom: 0 none;
-}
-
-.gh-dashboard5-list-item > span {
-    padding: 0 24px 4px 0;
-}
-
-.gh-dashboard5-list-item:last-child {
-    border-bottom: 0;
-}
-
-.gh-dashboard5-list-item a {
-    font-weight: 500;
-    font-size: 1.5rem;
-    color: var(--darkgrey);
-    display: inline-block;
-    padding: 3px 64px 0 0;
-}
-
-.gh-dashboard5-list-item > span {
-    font-size: 2rem;
-    font-weight: 600;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.gh-dashboard5-list-item svg {
-    width: 26px;
-    height: 26px;
-    margin: 0 0.75rem 0 0;
-}
-
-.gh-dashboard5-list-item > a > span {
-    color: var(--midgrey);
-    padding: 0 0 0 0.5rem;
-    white-space: nowrap;
-}
-
-.gh-dashboard5-list-footer {
-    border-top: 1px solid var(--whitegrey);
-    padding: 20px 0 0;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Anchor */
-
-.gh-dashboard5-anchor {
-    position: relative;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-box {
-    padding: 24px 24px 8px;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-stats {
-    display: flex;
-    flex-direction: row;
-    width: calc(100% + 48px);
-    padding: 0 8px;
-    margin: 12px -24px 0;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-title {
-    margin-bottom: 24px;
-}
-
-.gh-dashboard5-anchor.is-top .gh-dashboard5-stats {
-    margin-top: 0;
-    margin-bottom: 20px;
-    border-width: 0 0 1px;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-stats-button {
-    cursor: pointer;
-    position: relative;
-    flex: 1;
-    padding: 20px 16px 24px 12px;
-    margin: 2px 4px 2px 2px;
-    text-align: left;
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 5px;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected { 
-    color: var(--black);
-    background: var(--white) !important;
-    box-shadow: 0 0 12px rgb(0 0 0 / 3%);
-    border: 1px solid var(--whitegrey);
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-stats.is-solo .gh-dashboard5-stats-button.is-selected {
-    background: transparent;
-    box-shadow: 0 none;
-    border: 0 none;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-stats-highlight {
-    width: 1px;
-    height: 3px;
-    border-radius: 5px;
-    background: var(--whitegrey);
-    margin: 8px 0 0;
-    background: #5B98F2;
-    opacity: 0;
-    transition: width 175ms ease-out, opacity 125ms linear;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected .gh-dashboard5-stats-highlight {
-    width: 25px;
-    opacity: 1;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-chart {
-    flex-direction: column;
-    margin-left: -16px;
-    margin-right: -16px;
-    margin-top: 12px;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-chart-ticks {
-    flex-direction: row;
-    padding: 12px 0 4px;
-    font-size: 1.2rem;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span {
-    opacity: 0.5;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span:first-child,
-.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span:last-child {
-    opacity: 1;
-}
-
-.gh-dashboard5-anchor .gh-dashboard5-selections {
-    position: absolute;
-    top: 16px;
-    right: 8px;
-    display: flex;
-    flex-direction: row;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Growth */
-
-/* Delete me */
-.dashboard-prototype-newsletters .gh-dashboard-container {
-    margin: 20px 0;
-}
-/* Delete me */
-.dashboard-prototype-staff-picks-author {
-    color: #7c8b9a;
-    font-weight: 400;
-}
-
-.gh-dashboard5-growth {
-    display: flex;
-    margin-top: -25px;
-}
-
-.gh-dashboard5-growth .gh-dashboard5-box:nth-child(1) {
-    flex: 2;
-    border-radius: 3px 0 0 0;
-    border-width: 1px;
-    padding-top: 16px;
-}
-
-.gh-dashboard5-growth .gh-dashboard5-box:nth-child(2) {
-    flex: 1;
-    border-radius: 0 3px 0 0;
-    border-width: 1px 1px 1px 0;
-    padding-top: 16px;
-}
-
-.gh-dashboard5-growth .gh-dashboard5-chart-ticks {
-    padding: 8px 24px 16px 0;
-    width: 55px;
-}
-
-.gh-dashboard5-growth .gh-dashboard5-metric {
-    margin: 0 0 20px;
-}
-
-.gh-dashboard5-growth canvas {
-    border-left: 1px solid var(--whitegrey);
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Email */
-
-.gh-dashboard5-email canvas {
-    border-bottom: 1px solid var(--whitegrey);
-}
-
-.gh-dashboard5-email .gh-dashboard5-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 0;
-}
-
-.gh-dashboard5-email .gh-dashboard5-insert {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-}
-
-.gh-dashboard5-email .gh-dashboard5-insert-item {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    min-height: 80px;
-}
-
-.gh-dashboard5-email .gh-dashboard5-insert-item:nth-child(1) {
-    /* --- Engaged Over 30 Days */
-    padding: 4px 16px 0 0;
-}
-
-.gh-dashboard5-email .gh-dashboard5-insert-item:nth-child(2) {
-    /* --- Engaged Over 7 Days */
-    padding: 4px 16px 0 16px;
-}
-
-.gh-dashboard5-split .gh-dashboard5-email .gh-dashboard5-insert {
-    flex-direction: column;
-}
-
-.gh-dashboard5-split .gh-dashboard5-email .gh-dashboard5-insert-item {
-    border-radius: 0;
-    border-width: 0 0 1px;
-    padding: 8px 16px 16px 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.gh-dashboard5-split .gh-dashboard5-email .gh-dashboard5-insert-item:nth-child(1) {
-    /* --- Engaged Over 30 Days */
-    padding: 4px 16px 16px 0;
-}
-
-.gh-dashboard5-split .gh-dashboard5-email .gh-dashboard5-insert-item:nth-child(2) {
-    /* --- Engaged Over 7 Days */
-    flex: 1;
-    padding: 16px 16px 0 0;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Engagement */
-
-.gh-dashboard5-engagement {
-    position: relative;
-}
-
-.gh-dashboard5-engagement .prototype-selection {
-    position: absolute;
-    top: 16px;
-    right: 8px;
-}
-
-.gh-dashboard5-engagement .gh-dashboard5-insert {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-}
-
-.gh-dashboard5-engagement .gh-dashboard5-insert-item {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    min-height: 80px;
-}
-
-.gh-dashboard5-engagement .gh-dashboard5-insert-item:nth-child(1) {
-    /* --- Engaged Over 30 Days */
-    padding: 4px 16px 0 0;
-}
-
-.gh-dashboard5-engagement .gh-dashboard5-insert-item:nth-child(2) {
-    /* --- Engaged Over 7 Days */
-    padding: 4px 16px 0 16px;
-}
-
-.gh-dashboard5-split .gh-dashboard5-engagement .gh-dashboard5-insert {
-    flex-direction: column;
-}
-
-.gh-dashboard5-split .gh-dashboard5-engagement .gh-dashboard5-insert-item {
-    border-radius: 0;
-    border-width: 0 0 1px;
-    padding: 8px 16px 16px 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.gh-dashboard5-split .gh-dashboard5-engagement .gh-dashboard5-insert-item:nth-child(1) {
-    /* --- Engaged Over 30 Days */
-    padding: 4px 16px 16px 0;
-}
-
-.gh-dashboard5-split .gh-dashboard5-engagement .gh-dashboard5-insert-item:nth-child(2) {
-    /* --- Engaged Over 7 Days */
-    flex: 1;
-    padding: 16px 16px 0 0;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Posts */
-
-.gh-dashboard5-posts .gh-dashboard5-box {
-    padding: 28px 24px 24px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: stretch;
-}
-
-.gh-dashboard5-posts .gh-dashboard5-title {
-    margin-bottom: 24px;
-}
-
-.gh-dashboard5-posts .gh-dashboard5-list-item {
-    padding-top: 16px;
-    padding-bottom: 16px;
-}
-
-.gh-dashboard5-posts .gh-dashboard5-list-item:nth-child(1) {
-    padding-top: 8px;
-}
-
-.gh-dashboard5-posts .gh-dashboard5-list-item:nth-child(4),
-.gh-dashboard5-posts .gh-dashboard5-list-item:nth-child(5) {
-    display: none;
-}
-
-.gh-dashboard5-posts .gh-dashboard5-list-item a > span{
-    width: 80%;
-    overflow: hidden;
-    color: var(--darkgrey);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.gh-dashboard5-posts .gh-dashboard5-list-item a > span {
-    display: inline-block;
-    height: 57px;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Activity */
-
-.gh-dashboard5-activity .gh-dashboard5-box {
-    padding: 28px 24px 24px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: stretch;
-}
-
-.gh-dashboard5-activity .gh-dashboard5-title {
-    margin-bottom: 20px;
-}
-
-.gh-dashboard5-activity .gh-dashboard5-list-item {
-    display: flex;
-    flex-direction: row;
-    padding: 10px 0;
-    border-bottom: 0 none;
-}
-
-.gh-dashboard5-activity .gh-dashboard5-list-item .member-details {
-    flex: 1;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0;
-}
-
-.gh-dashboard5-activity .gh-dashboard5-list-item .member-avatar {
-    width: 28px;
-    height: 28px;
-    background: #70DEB1;
-    border-radius: 24px;
-    margin: 0 12px 0 0;
-}
-
-.gh-dashboard5-activity .gh-dashboard5-list-item > span.gh-dashboard-activity-time {
-    font-size: 1.2rem;
-    color: var(--midlightgrey);
-    text-align: right;
-    padding-right: 0;
-    padding-top: 6px;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Email Open Rate */
-
-.gh-dashboard5-rate .gh-dashboard5-chart {
-    margin: 24px 0 0;
-}
-
-.gh-dashboard5-rate .gh-dashboard5-chart-ticks {
-    padding: 0 16px 0 0;
-}
-
-.gh-dashboard5-rate .gh-dashboard5-metric-label {
-    padding-top: 4px;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Resource */
-
-.gh-dashboard5-resource {
-    flex: 1;
-}
-
-.gh-dashboard5-resource .gh-dashboard5-area {
-    flex: 1;
-    padding: 72px 0 32px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    background: rgb(252,253,255);
-    background: linear-gradient(180deg, rgba(252,253,255,1) 0%, rgba(249,251,252,1) 100%);
-}
-
-.gh-dashboard5-area h4 {
-    font-size: 2.4rem;
-    font-weight: 700;
-    margin: 0 0 10px;
-}
-
-.gh-dashboard5-area p {
-    padding: 0 24px;
-}
-
-.gh-dashboard5-area-resource {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0 48px;
-    display: none;
-}
-
-.gh-dashboard5-area-resource:first-child {
-    display: flex;
-}
-
-.gh-dashboard5-area-resource-content {
-    flex-direction: column;
-    align-items: center;
-    justify-content: center; 
-    display: flex;
-}
-
-.gh-dashboard5-area-more {
-    flex: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-
-.gh-dashboard5-area-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    background: var(--lightgrey);
-    margin: 0 4px;
-}
-
-.gh-dashboard5-area-dot.is-selected {
-    background: var(--midgrey);
-}