diff --git a/app/assets/javascripts/banners.js b/app/assets/javascripts/banners.js
index 9ae732ee4..583015a89 100644
--- a/app/assets/javascripts/banners.js
+++ b/app/assets/javascripts/banners.js
@@ -4,23 +4,23 @@
     initialize: function() {
       $("[data-js-banner-title]").on({
         change: function() {
-          $("#js-banner-title").text($(this).val());
+          $(".banner h2").text($(this).val());
         }
       });
       $("[data-js-banner-description]").on({
         change: function() {
-          $("#js-banner-description").text($(this).val());
+          $(".banner h3").text($(this).val());
         }
       });
       $("[name='banner[background_color]']").on({
         change: function() {
-          $("#js-banner-background").css("background-color", $(this).val());
+          $(".banner").css("background-color", $(this).val());
         }
       });
       $("[name='banner[font_color]']").on({
         change: function() {
-          $("#js-banner-title").css("color", $(this).val());
-          $("#js-banner-description").css("color", $(this).val());
+          $(".banner h2").css("color", $(this).val());
+          $(".banner h3").css("color", $(this).val());
         }
       });
     }
diff --git a/app/views/admin/banners/_form.html.erb b/app/views/admin/banners/_form.html.erb
index a3589c90e..bf8fc89b7 100644
--- a/app/views/admin/banners/_form.html.erb
+++ b/app/views/admin/banners/_form.html.erb
@@ -84,15 +84,9 @@
     <div class="actions small-12 medium-3 column">
       <%= f.submit(class: "button expanded", value: t("admin.banners.edit.form.submit_button")) %>
     </div>
+  </div>
 
-    <div id="js-banner-background" class="banner clear"
-                                   style="background-color:<%= @banner.background_color %>">
-      <%= link_to @banner.target_url do %>
-        <h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
-        <h3 id="js-banner-description" style="color:<%= @banner.font_color %>">
-          <%= @banner.description %>
-        </h3>
-      <% end %>
-    </div>
+  <div class="row">
+    <%= render "shared/banner", banner: @banner %>
   </div>
 <% end %>
diff --git a/app/views/admin/banners/index.html.erb b/app/views/admin/banners/index.html.erb
index a466c6b7f..4b3e97230 100644
--- a/app/views/admin/banners/index.html.erb
+++ b/app/views/admin/banners/index.html.erb
@@ -35,12 +35,7 @@
       <tr>
         <td colspan="3">
           <span class="help-text"><%= t("admin.banners.index.preview") %></span>
-          <div class="banner" style="background-color:<%= banner.background_color %>">
-            <%= link_to banner.target_url do %>
-              <h2 style="color:<%= banner.font_color %>"><%= banner.title %></h2>
-              <h3 style="color:<%= banner.font_color %>"><%= banner.description %></h3>
-            <% end %>
-          </div>
+          <%= render "shared/banner", banner: banner %>
         </td>
       </tr>
     </tbody>
diff --git a/app/views/shared/_banner.html.erb b/app/views/shared/_banner.html.erb
index 3a632b20b..48f315a94 100644
--- a/app/views/shared/_banner.html.erb
+++ b/app/views/shared/_banner.html.erb
@@ -1,4 +1,4 @@
-<% banner = @banners.sample %>
+<% banner ||= @banners.sample %>
 <div class="banner" style="background-color:<%= banner.background_color %>;">
   <%= link_to banner.target_url do %>
     <h2 style="color:<%= banner.font_color %>;"><%= banner.title %></h2>
diff --git a/spec/features/admin/banners_spec.rb b/spec/features/admin/banners_spec.rb
index af9246a5f..3b9920e14 100644
--- a/spec/features/admin/banners_spec.rb
+++ b/spec/features/admin/banners_spec.rb
@@ -164,7 +164,7 @@ describe "Admin banners magement" do
 
     page.find("body").click
 
-    within("div#js-banner-background") do
+    within(".banner") do
       expect(page).to have_selector("h2", text: "Modified title")
       expect(page).to have_selector("h3", text: "Edited text")
     end