diff --git a/ghost/admin/app/components/settings/members-email-labs.hbs b/ghost/admin/app/components/settings/members-email-labs.hbs
index e8b7a7ad02..f7875f9680 100644
--- a/ghost/admin/app/components/settings/members-email-labs.hbs
+++ b/ghost/admin/app/components/settings/members-email-labs.hbs
@@ -25,95 +25,7 @@
 </section>
 
 {{#if this.emailNewsletterEnabled}}
-    <div class="gh-main-section gh-newsletters">
-        <div class="flex justify-between items-center">
-            <h4 class="gh-main-section-header small bn">Newsletters</h4>
-            {{#if (not-eq this.archivedNewsletterCount 0)}}
-            <div>
-                <div class="gh-contentfilter-menu gh-contentfilter-type {{if (not (eq this.selectedType.value "active")) "gh-contentfilter-selected"}}" data-test-type-select="true">
-                    {{!-- <PowerSelect
-                        @selected={{this.selectedType}}
-                        @options={{this.availableTypes}}
-                        @searchEnabled={{false}}
-                        @onChange={{this.onTypeChange}}
-                        @triggerComponent="gh-power-select/trigger"
-                        @triggerClass="gh-contentfilter-menu-trigger gh-contentfilter-menu-trigger-tiers"
-                        @dropdownClass="gh-contentfilter-menu-dropdown"
-                        @matchTriggerWidth={{false}}
-                        as |type|
-                    >
-                        {{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
-                    </PowerSelect> --}}
-                    <span>Active</span>
-                    <span>{{svg-jar "arrow-down-small" class="w2"}}</span>
-                </div>
-            </div>
-            {{/if}}
-        </div>
-        <section class="gh-expandable">
-            <div class="gh-expandable-block">
-                {{#each this.newsletters.newsletters as |newsletter|}}
-                    {{#if (eq newsletter.status "active")}}
-                        <div class="gh-main-content-card gh-newsletter-card {{if (gt this.activeNewsletterCount 1) "multiple"}}">
-                            {{svg-jar "grab" class="grab-newsletter"}}
-                            <div class="gh-newsletter-card-block title-block">
-                                <h3 class="gh-newsletter-card-name">
-                                    {{newsletter.name}}
-                                </h3>
-                                <p class="gh-newsletter-card-description">
-                                    {{newsletter.description}}
-                                </p>
-                            </div>
-                            <div class="gh-newsletter-card-block stats-block {{if (gt this.activeNewsletterCount 1) "multiple"}}">
-                                <div>
-                                    <h3 class="gh-newsletter-card-name">{{newsletter.members.total}}</h3>
-                                    <p class="gh-newsletter-card-description">Subscribers</p>
-                                </div>
-                                <div>
-                                    <h3 class="gh-newsletter-card-name">{{newsletter.posts.total}}</h3>
-                                    <p class="gh-newsletter-card-description">Posts sent</p>
-                                </div>
-                            </div>
-                            <div class="gh-newsletter-card-block cta-block">
-                                {{#if (eq this.activeNewsletterCount 1)}}
-                                    <button class="gh-btn gh-btn-green" type="button" {{on "click" @toggleEmailDesignSettings}}><span>Customize &rarr;</span></button>
-                                {{else}}
-                                    <span class="dropdown">
-                                        <GhDropdownButton
-                                            @dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
-                                            @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
-                                        >
-                                            <span>
-                                                {{svg-jar "dotdotdot"}}
-                                                <span class="hidden">Actions</span>
-                                            </span>
-                                        </GhDropdownButton>
-                                            <GhDropdown
-                                                @name="newsletter-actions-menu-newsletter-{{newsletter.id}}"
-                                                @tagName="ul"
-                                                @classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
-                                            >
-                                                <li>
-                                                    <button class="mr2" type="button" {{on "click" @toggleEmailDesignSettings}}>
-                                                        <span>Edit</span>
-                                                    </button>
-                                                </li>
-                                                <li>
-                                                    <button class="mr2" type="button" {{on "click" (fn this.archiveNewsletter newsletter.id)}}>
-                                                        <span>Archive</span>
-                                                    </button>
-                                                </li>
-                                            </GhDropdown>
-                                    </span>
-                                {{/if}}
-                            </div>
-                        </div>
-                    {{/if}}
-                {{/each}}
-            </div>
-        </section>
-        <button type="button" class="gh-add-newsletter" {{on "click" @toggleEmailDesignSettings}} {{on "click" this.addNewsletter}}>{{svg-jar "add-stroke"}}Add newsletter</button>
-    </div>
+    <Settings::MembersEmailLabs::NewsletterManagement @toggleEmailDesignSettings={{@toggleEmailDesignSettings}} />
 
     <section class="gh-main-section">
         <h4 class="gh-main-section-header small bn">General settings</h4>
diff --git a/ghost/admin/app/components/settings/members-email-labs.js b/ghost/admin/app/components/settings/members-email-labs.js
index d74883550b..d5155efe80 100644
--- a/ghost/admin/app/components/settings/members-email-labs.js
+++ b/ghost/admin/app/components/settings/members-email-labs.js
@@ -12,7 +12,6 @@ export default class MembersEmailLabs extends Component {
     @service ghostPaths;
     @service ajax;
     @service settings;
-    @service newsletters;
 
     // set recipientsSelectValue as a static property because within this
     // component's lifecycle it's not always derived from the settings values.
@@ -74,14 +73,6 @@ export default class MembersEmailLabs extends Component {
         };
     }
 
-    get activeNewsletterCount() {
-        return this.newsletters.newsletters.filter(n => n.status === 'active').length;
-    }
-
-    get archivedNewsletterCount() {
-        return this.newsletters.newsletters.filter(n => n.status === 'archived').length;
-    }
-
     @action
     toggleFromAddressConfirmation() {
         this.showFromAddressConfirmation = !this.showFromAddressConfirmation;
@@ -184,16 +175,6 @@ export default class MembersEmailLabs extends Component {
         this.settings.set('editorDefaultEmailRecipientsFilter', filter);
     }
 
-    @action
-    archiveNewsletter(id) {
-        this.newsletters.archive(id);
-    }
-
-    @action
-    addNewsletter() {
-        this.newsletters.add();
-    }
-
     @task({drop: true})
     *updateFromAddress() {
         let url = this.ghostPaths.url.api('/settings/members/email');
diff --git a/ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs b/ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs
new file mode 100644
index 0000000000..0c6c73fbc8
--- /dev/null
+++ b/ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs
@@ -0,0 +1,89 @@
+<div class="gh-main-section gh-newsletters">
+    <div class="flex justify-between items-center">
+        <h4 class="gh-main-section-header small bn">Newsletters</h4>
+        {{#if this.archivedNewsletters}}
+            <div>
+                <div class="gh-contentfilter-menu gh-contentfilter-type {{if (not (eq this.selectedType.value "active")) "gh-contentfilter-selected"}}" data-test-type-select="true">
+                    {{!-- <PowerSelect
+                        @selected={{this.selectedType}}
+                        @options={{this.availableTypes}}
+                        @searchEnabled={{false}}
+                        @onChange={{this.onTypeChange}}
+                        @triggerComponent="gh-power-select/trigger"
+                        @triggerClass="gh-contentfilter-menu-trigger gh-contentfilter-menu-trigger-tiers"
+                        @dropdownClass="gh-contentfilter-menu-dropdown"
+                        @matchTriggerWidth={{false}}
+                        as |type|
+                    >
+                        {{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
+                    </PowerSelect> --}}
+                    <span>Active</span>
+                    <span>{{svg-jar "arrow-down-small" class="w2"}}</span>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+    <section class="gh-expandable">
+        <div class="gh-expandable-block">
+            {{#each this.newsletters.newsletters as |newsletter|}}
+                {{#if (eq newsletter.status "active")}}
+                    <div class="gh-main-content-card gh-newsletter-card {{if this.hasMultiple "multiple"}}">
+                        {{svg-jar "grab" class="grab-newsletter"}}
+                        <div class="gh-newsletter-card-block title-block">
+                            <h3 class="gh-newsletter-card-name">
+                                {{newsletter.name}}
+                            </h3>
+                            <p class="gh-newsletter-card-description">
+                                {{newsletter.description}}
+                            </p>
+                        </div>
+                        <div class="gh-newsletter-card-block stats-block {{if this.hasMultiple "multiple"}}">
+                            <div>
+                                <h3 class="gh-newsletter-card-name">{{newsletter.members.total}}</h3>
+                                <p class="gh-newsletter-card-description">Subscribers</p>
+                            </div>
+                            <div>
+                                <h3 class="gh-newsletter-card-name">{{newsletter.posts.total}}</h3>
+                                <p class="gh-newsletter-card-description">Posts sent</p>
+                            </div>
+                        </div>
+                        <div class="gh-newsletter-card-block cta-block">
+                            {{#if this.hasMultiple}}
+                                <span class="dropdown">
+                                    <GhDropdownButton
+                                        @dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
+                                        @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
+                                    >
+                                        <span>
+                                            {{svg-jar "dotdotdot"}}
+                                            <span class="hidden">Actions</span>
+                                        </span>
+                                    </GhDropdownButton>
+                                    <GhDropdown
+                                        @name="newsletter-actions-menu-newsletter-{{newsletter.id}}"
+                                        @tagName="ul"
+                                        @classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
+                                    >
+                                        <li>
+                                            <button class="mr2" type="button" {{on "click" @toggleEmailDesignSettings}}>
+                                                <span>Edit</span>
+                                            </button>
+                                        </li>
+                                        <li>
+                                            <button class="mr2" type="button" {{on "click" (fn this.archiveNewsletter newsletter.id)}}>
+                                                <span>Archive</span>
+                                            </button>
+                                        </li>
+                                    </GhDropdown>
+                                </span>
+                            {{else}}
+                                <button class="gh-btn gh-btn-green" type="button" {{on "click" @toggleEmailDesignSettings}}><span>Customize &rarr;</span></button>
+                            {{/if}}
+                        </div>
+                    </div>
+                {{/if}}
+            {{/each}}
+        </div>
+    </section>
+    <button type="button" class="gh-add-newsletter" {{on "click" this.addNewsletter}} {{on "click" @toggleEmailDesignSettings}}>{{svg-jar "add-stroke"}}Add newsletter</button>
+</div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/settings/members-email-labs/newsletter-management.js b/ghost/admin/app/components/settings/members-email-labs/newsletter-management.js
new file mode 100644
index 0000000000..7fd0c05228
--- /dev/null
+++ b/ghost/admin/app/components/settings/members-email-labs/newsletter-management.js
@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class NewsletterManagementComponent extends Component {
+    @service newsletters;
+    @service store;
+
+    get activeNewsletters() {
+        return this.newsletters.newsletters.filter(n => n.status === 'active');
+    }
+
+    get archivedNewsletters() {
+        return this.newsletters.newsletters.filter(n => n.status === 'archived');
+    }
+
+    get hasMultiple() {
+        return this.activeNewsletters.length > 1;
+    }
+
+    @action
+    addNewsletter() {
+        this.newsletters.add();
+    }
+
+    @action
+    archiveNewsletter(id) {
+        this.newsletters.archive(id);
+    }
+}
diff --git a/ghost/admin/app/services/newsletters.js b/ghost/admin/app/services/newsletters.js
index fae62481ab..a67303c464 100644
--- a/ghost/admin/app/services/newsletters.js
+++ b/ghost/admin/app/services/newsletters.js
@@ -1,11 +1,29 @@
 import Service, {inject as service} from '@ember/service';
+import {TrackedArray} from 'tracked-built-ins';
 import {set} from '@ember/object';
 import {tracked} from '@glimmer/tracking';
 
+class Newsletter {
+    @tracked name;
+    @tracked description;
+    @tracked sender_name;
+    @tracked sender_email;
+    @tracked sender_reply_to;
+    @tracked default;
+    @tracked status;
+    @tracked recipient_filter;
+    @tracked subscribe_on_signup;
+    @tracked sort_order;
+
+    constructor(obj) {
+        Object.assign(this, obj);
+    }
+}
+
 let counter = 0;
 function getFakeNewsletter() {
     counter += 1;
-    return {
+    return new Newsletter({
         id: Math.floor(Math.random() * 1e9),
         name: 'Daily roundup ' + counter,
         description: 'Daily news delivered to your inbox every morning.',
@@ -23,7 +41,7 @@ function getFakeNewsletter() {
         posts: {
             total: Math.floor(Math.random() * 100)
         }
-    };
+    });
 }
 
 export default class NewslettersService extends Service {
@@ -32,33 +50,31 @@ export default class NewslettersService extends Service {
     @service feature;
     @service store;
 
-    @tracked
-        newsletters = [
-            {
-                id: '123',
-                name: 'Daily roundup',
-                description: 'Daily news delivered to your inbox every morning.',
-                sender_name: 'Test',
-                sender_email: 'test@example.com',
-                sender_reply_to: 'test@example.com',
-                default: true,
-                status: 'active',
-                recipient_filter: '',
-                subscribe_on_signup: true,
-                sort_order: 0,
-                members: {
-                    total: 19
-                },
-                posts: {
-                    total: 17
-                }
+    newsletters = new TrackedArray([
+        new Newsletter({
+            id: '123',
+            name: 'Daily roundup',
+            description: 'Daily news delivered to your inbox every morning.',
+            sender_name: 'Test',
+            sender_email: 'test@example.com',
+            sender_reply_to: 'test@example.com',
+            default: true,
+            status: 'active',
+            recipient_filter: '',
+            subscribe_on_signup: true,
+            sort_order: 0,
+            members: {
+                total: 19
+            },
+            posts: {
+                total: 17
             }
-        ];
+        })
+    ]);
 
     add() {
         this.newsletters.push(getFakeNewsletter());
         this.newsletters.sort((a,b) => a.sort_order - b.sort_order);
-        this.newsletters = [...this.newsletters]; //trigger UI refresh
         return this.newsletters;
     }