diff --git a/ghost/admin/app/components/gh-browser-preview.hbs b/ghost/admin/app/components/gh-browser-preview.hbs
index 5871713582..e0b480a90c 100644
--- a/ghost/admin/app/components/gh-browser-preview.hbs
+++ b/ghost/admin/app/components/gh-browser-preview.hbs
@@ -1,20 +1,23 @@
-
-
-<div class="gh-browserpreview-previewcontainer" ...attributes>
-    <div class="gh-browserpreview-browser">
-        <div class="tabs">
-            <ul><li></li><li></li><li></li></ul>
-            <div>
-                {{#if @icon}}
-                    <span class="favicon"><img src={{@icon}} alt="icon"></span>
-                {{else}}
-                    <span class="favicon default">{{svg-jar "default-favicon"}}</span>
-                {{/if}}
-                <span class="site-title">{{@title}}</span>
+{{!-- changes only classes between desktop/mobile to avoid re-rendering yielded contents --}}
+<div class="{{if @isMobilePreview "gh-pe-mobile-container flex justify-center" "gh-browserpreview-previewcontainer"}}" ...attributes>
+    {{#unless @isMobilePreview}}
+        <div class="gh-browserpreview-browser">
+            <div class="tabs">
+                <ul><li></li><li></li><li></li></ul>
+                <div>
+                    {{#if (or @icon this.settings.icon)}}
+                        <span class="favicon"><img src={{or @icon this.settings.icon}} alt="icon"></span>
+                    {{else}}
+                        <span class="favicon default">{{svg-jar "default-favicon"}}</span>
+                    {{/if}}
+                    <span class="site-title">{{or @title this.settings.title}}</span>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="gh-browserpreview-iframecontainer">
-        {{yield}}
+    {{/unless}}
+    <div class="{{if @isMobilePreview "gh-pe-mobile-bezel" "gh-browserpreview-iframecontainer"}}">
+        <div class="{{if @isMobilePreview "gh-pe-mobile-screen"}}">
+            {{yield}}
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-browser-preview.js b/ghost/admin/app/components/gh-browser-preview.js
new file mode 100644
index 0000000000..8c30f8a48e
--- /dev/null
+++ b/ghost/admin/app/components/gh-browser-preview.js
@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+
+export default class GhBrowserPreview extends Component {
+    @service settings;
+}
diff --git a/ghost/admin/app/components/modals/design/view-theme.hbs b/ghost/admin/app/components/modals/design/view-theme.hbs
index 62388c5745..910b2ef1a3 100644
--- a/ghost/admin/app/components/modals/design/view-theme.hbs
+++ b/ghost/admin/app/components/modals/design/view-theme.hbs
@@ -17,28 +17,8 @@
     </GhCanvasHeader>
 
     <section class="view-container">
-        {{!-- changes only classes between desktop/mobile to avoid re-rendering iframe contents --}}
-        <div class="{{if this.isMobilePreview "gh-pe-mobile-container flex justify-center" "gh-browserpreview-previewcontainer gh-theme-previewcontainer"}}">
-            {{#if this.isDesktopPreview}}
-                <div class="gh-browserpreview-browser">
-                    <div class="tabs">
-                        <ul><li></li><li></li><li></li></ul>
-                        <div>
-                            {{#if this.settings.icon}}
-                                <span class="favicon"><img src={{this.settings.icon}} alt="icon"></span>
-                            {{else}}
-                                <span class="favicon default">{{svg-jar "default-favicon"}}</span>
-                            {{/if}}
-                            <span class="site-title">{{this.settings.title}}</span>
-                        </div>
-                    </div>
-                </div>
-            {{/if}}
-            <div class="{{if this.isMobilePreview "gh-pe-mobile-bezel" "gh-browserpreview-iframecontainer"}}">
-                <div class="{{if this.isMobilePreview "gh-pe-mobile-screen"}}">
-                    <iframe class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}} src={{@data.theme.previewUrl}} />
-                </div>
-            </div>
-        </div>
+        <GhBrowserPreview @isMobilePreview={{this.isMobilePreview}}>
+            <iframe class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}} src={{@data.theme.previewUrl}} title="{{@data.theme.name}} theme preview" />
+        </GhBrowserPreview>
     </section>
 </section>
\ No newline at end of file
diff --git a/ghost/admin/app/templates/settings/design/index.hbs b/ghost/admin/app/templates/settings/design/index.hbs
index 653d28f39b..1a48628788 100644
--- a/ghost/admin/app/templates/settings/design/index.hbs
+++ b/ghost/admin/app/templates/settings/design/index.hbs
@@ -31,28 +31,11 @@
     </GhCanvasHeader>
 
     <div class="view-container">
-        {{!-- changes only classes between desktop/mobile to avoid re-rendering iframe contents --}}
-        <div class="{{if this.isMobilePreview "gh-pe-mobile-container flex justify-center" "gh-browserpreview-previewcontainer"}}">
-            {{#if this.isDesktopPreview}}
-                <div class="gh-browserpreview-browser">
-                    <div class="tabs">
-                        <ul><li></li><li></li><li></li></ul>
-                        <div>
-                            {{#if this.settings.icon}}
-                                <span class="favicon"><img src={{this.settings.icon}} alt="icon"></span>
-                            {{else}}
-                                <span class="favicon default">{{svg-jar "default-favicon"}}</span>
-                            {{/if}}
-                            <span class="site-title">{{this.settings.title}}</span>
-                        </div>
-                    </div>
-                </div>
-            {{/if}}
-            <div class="{{if this.isMobilePreview "gh-pe-mobile-bezel" "gh-browserpreview-iframecontainer"}}">
-                <div class="{{if this.isMobilePreview "gh-pe-mobile-screen"}}">
-                    <GhHtmlIframe class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}} @html={{this.themeManagement.previewHtml}} @pageId={{this.themeManagement.previewType}} />
-                </div>
-            </div>
-        </div>
+        <GhBrowserPreview @isMobilePreview={{this.isMobilePreview}}>
+            <GhHtmlIframe
+                class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}}
+                @html={{this.themeManagement.previewHtml}}
+                @pageId={{this.themeManagement.previewType}} />
+        </GhBrowserPreview>
     </div>
 </section>
\ No newline at end of file