diff --git a/app/assets/javascripts/previewPane.js b/app/assets/javascripts/previewPane.js
index 9c6bd50e3..e327687bf 100644
--- a/app/assets/javascripts/previewPane.js
+++ b/app/assets/javascripts/previewPane.js
@@ -13,7 +13,7 @@
   const $paneWrapper = $('<div class="govuk-grid-column-full"></div>');
   const $form = $('form');
   const previewType = $form.data('previewType');
-  const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview"></iframe>`);
+  const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview" scrolling="no"></iframe>`);
 
   function buildQueryString () {
     return $.map(arguments, (val, idx) => encodeURI(val[0]) + '=' + encodeURI(val[1])).join('&');
diff --git a/app/templates/components/branding-preview.html b/app/templates/components/branding-preview.html
new file mode 100644
index 000000000..67d59ed79
--- /dev/null
+++ b/app/templates/components/branding-preview.html
@@ -0,0 +1,11 @@
+{% macro branding_preview(branding_style, endpoint) %}
+  <iframe src="{{ url_for(endpoint, branding_style=branding_style) }}" class="branding-preview" scrolling="no"></iframe>
+{% endmacro %}
+
+{% macro email_branding_preview(branding_style) %}
+  {{ branding_preview(branding_style, 'main.email_template') }}
+{% endmacro %}
+
+{% macro letter_branding_preview(branding_style) %}
+  {{ branding_preview(branding_style, 'main.letter_template') }}
+{% endmacro %}
diff --git a/app/templates/views/organisations/organisation/settings/preview-email-branding.html b/app/templates/views/organisations/organisation/settings/preview-email-branding.html
index 4e6186831..6b401f711 100644
--- a/app/templates/views/organisations/organisation/settings/preview-email-branding.html
+++ b/app/templates/views/organisations/organisation/settings/preview-email-branding.html
@@ -1,6 +1,7 @@
 {% extends "org_template.html" %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/button/macro.njk" import govukButton %}
+{% from "components/branding-preview.html" import email_branding_preview %}
 
 {% block org_page_title %}
   Preview email branding
@@ -11,7 +12,7 @@
   <h1 class="heading-large">Preview email branding</h1>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
-      <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
+      {{ email_branding_preview(form.branding_style.data) }}
       {% call form_wrapper(action=action) %}
         <div class="form-group">
           {{ form.hidden_tag() }}
diff --git a/app/templates/views/organisations/organisation/settings/preview-letter-branding.html b/app/templates/views/organisations/organisation/settings/preview-letter-branding.html
index 3b0504596..0b4075e0f 100644
--- a/app/templates/views/organisations/organisation/settings/preview-letter-branding.html
+++ b/app/templates/views/organisations/organisation/settings/preview-letter-branding.html
@@ -1,6 +1,8 @@
 {% extends "org_template.html" %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/branding-preview.html" import letter_branding_preview %}
+
 {% block per_page_title %}
   Preview letter branding
 {% endblock %}
@@ -10,7 +12,7 @@
   <h1 class="heading-large">Preview letter branding</h1>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
-      <iframe src="{{ url_for('main.letter_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
+      {{ letter_branding_preview(form.branding_style.data) }}
       {% call form_wrapper(action=action) %}
         <div class="form-group">
           {{ form.hidden_tag() }}
diff --git a/app/templates/views/service-settings/branding/email-branding-govuk.html b/app/templates/views/service-settings/branding/email-branding-govuk.html
index a1f3ada20..e4b16841f 100644
--- a/app/templates/views/service-settings/branding/email-branding-govuk.html
+++ b/app/templates/views/service-settings/branding/email-branding-govuk.html
@@ -3,6 +3,7 @@
 {% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/page-header.html" import page_header %}
+{% from "components/branding-preview.html" import email_branding_preview %}
 
 {% block service_page_title %}
   Check your new branding
@@ -22,7 +23,7 @@
     Emails from {{ current_service.name }} will look like this.
   </p>
 
-  <iframe src="{{ url_for('main.email_template', branding_style='__NONE__') }}" class="branding-preview"></iframe>
+  {{ email_branding_preview('__NONE__') }}
 
   <h2 class="heading-medium">Before you continue</h2>
 
diff --git a/app/templates/views/service-settings/branding/email-branding-nhs.html b/app/templates/views/service-settings/branding/email-branding-nhs.html
index 9bdcc84c6..ddaf96a3e 100644
--- a/app/templates/views/service-settings/branding/email-branding-nhs.html
+++ b/app/templates/views/service-settings/branding/email-branding-nhs.html
@@ -3,6 +3,7 @@
 {% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/page-header.html" import page_header %}
+{% from "components/branding-preview.html" import email_branding_preview %}
 
 {% block service_page_title %}
   Check your new branding
@@ -21,8 +22,7 @@
   <p class="govuk-body">
     Emails from {{ current_service.name }} will look like this.
   </p>
-
-  <iframe src="{{ url_for('main.email_template', branding_style=nhs_branding_id) }}" class="branding-preview"></iframe>
+  {{ email_branding_preview(nhs_branding_id) }}
 
   <h2 class="heading-medium">Before you continue</h2>
 
diff --git a/app/templates/views/service-settings/branding/email-branding-options.html b/app/templates/views/service-settings/branding/email-branding-options.html
index 9beee6142..75811004d 100644
--- a/app/templates/views/service-settings/branding/email-branding-options.html
+++ b/app/templates/views/service-settings/branding/email-branding-options.html
@@ -6,6 +6,7 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/back-link/macro.njk" import govukBackLink %}
+{% from "components/branding-preview.html" import email_branding_preview %}
 
 {% block service_page_title %}
   Change email branding
@@ -25,8 +26,9 @@
     Your emails currently have {{ branding_name }} branding.
   </p>
 
-  {% set branding_id = current_service.email_branding_id if current_service.email_branding else '__NONE__' %}
-  <iframe src="{{ url_for('main.email_template', branding_style=branding_id) }}" class="branding-preview"></iframe>
+  {{ email_branding_preview(
+    current_service.email_branding_id if current_service.email_branding else '__NONE__'
+  ) }}
 
   {% if current_service.needs_to_change_email_branding %}
     <p class="govuk-body">
diff --git a/app/templates/views/service-settings/preview-email-branding.html b/app/templates/views/service-settings/preview-email-branding.html
index d0149947d..6ce35fa1d 100644
--- a/app/templates/views/service-settings/preview-email-branding.html
+++ b/app/templates/views/service-settings/preview-email-branding.html
@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/button/macro.njk" import govukButton %}
+{% from "components/branding-preview.html" import email_branding_preview %}
 
 {% block service_page_title %}
   Preview email branding
@@ -11,7 +12,7 @@
   <h1 class="heading-large">Preview email branding</h1>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
-      <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
+      {{ email_branding_preview(form.branding_style.data) }}
       {% call form_wrapper(action=action) %}
         <div class="form-group">
           {{ form.hidden_tag() }}
diff --git a/app/templates/views/service-settings/preview-letter-branding.html b/app/templates/views/service-settings/preview-letter-branding.html
index a65d6c432..2c9e1a30a 100644
--- a/app/templates/views/service-settings/preview-letter-branding.html
+++ b/app/templates/views/service-settings/preview-letter-branding.html
@@ -1,6 +1,7 @@
 {% extends "views/platform-admin/_base_template.html" %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/button/macro.njk" import govukButton %}
+{% from "components/branding-preview.html" import letter_branding_preview %}
 
 {% block per_page_title %}
   Preview letter branding
@@ -11,7 +12,7 @@
   <h1 class="heading-large">Preview letter branding</h1>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
-      <iframe src="{{ url_for('main.letter_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
+      {{ letter_branding_preview(form.branding_style.data) }}
       {% call form_wrapper(action=action) %}
         <div class="form-group">
           {{ form.hidden_tag() }}