diff --git a/app/assets/javascripts/emailPreviewPane.js b/app/assets/javascripts/emailPreviewPane.js
new file mode 100644
index 000000000..7e42e99ba
--- /dev/null
+++ b/app/assets/javascripts/emailPreviewPane.js
@@ -0,0 +1,43 @@
+(function () {
+
+  'use strict';
+
+  const root = this,
+      $ = this.jQuery;
+
+  let branding_type = $('.multiple-choice input[name="branding_type"]:checked');
+  let branding_style = $('.multiple-choice input[name="branding_style"]:checked');
+
+  if (!branding_type.length || !branding_style.length) { return; }
+
+  branding_type = branding_type.val();
+  branding_style = branding_style.val();
+
+  const $paneWrapper = $('<div class="column-full"></div>');
+  const $form = $('form');
+  const $previewPane = $('<iframe src="/_email?' +
+                          buildQueryString(['branding_type', branding_type], ['branding_style', branding_style]) +
+                          '" class="email-branding-preview"></iframe>');
+
+  function buildQueryString () {
+    return $.map(arguments, (val, idx) => encodeURI(val[0]) + '=' + encodeURI(val[1])).join('&');
+  }
+
+  function setPreviewPane (e) {
+    const $target = $(e.target);
+    if ($target.attr('name') == 'branding_type') {
+      branding_type = $target.val();
+    }
+    if ($target.attr('name') == 'branding_style') {
+      branding_style = $target.val();
+    }
+    $previewPane.attr('src', '/_email?' + buildQueryString(['branding_type', branding_type], ['branding_style', branding_style]));
+  }
+
+  $paneWrapper.append($previewPane);
+  $form.find('.grid-row').eq(0).prepend($paneWrapper);
+  $form.attr('action', location.pathname.replace(/set-email-branding$/, 'preview-email-branding'));
+  $form.find('button[type="submit"]').text('Save');
+
+  $('fieldset').on('change', 'input[name="branding_type"], input[name="branding_style"]', setPreviewPane);
+})();
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 60b66f28a..a27093059 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -74,6 +74,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
     paths.src + 'javascripts/fullscreenTable.js',
     paths.src + 'javascripts/conditionalRadios.js',
+    paths.src + 'javascripts/emailPreviewPane.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.prettyerror())