diff --git a/app/assets/javascripts/admin/communication/preview.js b/app/assets/javascripts/admin/communication/preview.js
index 8ae8491ebbf5b71affdb9bc9479dfb0320d3f8c7..5a2d11e0da2ea0c0f6c7b281aaf57db9cd41983b 100644
--- a/app/assets/javascripts/admin/communication/preview.js
+++ b/app/assets/javascripts/admin/communication/preview.js
@@ -1,17 +1,11 @@
 $(function() {
-    $('.preview__button__mobile').on('click', function(){
-      $('.preview__button').removeClass('btn-primary').addClass('btn-light');
-      $('.preview__button__mobile').removeClass('btn-light').addClass('btn-primary');
-      $('#preview').removeClass('preview--desktop').removeClass('preview--tablet').addClass('preview--mobile');
-    });
-    $('.preview__button__tablet').on('click', function(){
-      $('.preview__button').removeClass('btn-primary').addClass('btn-light');
-      $('.preview__button__tablet').removeClass('btn-light').addClass('btn-primary');
-      $('#preview').removeClass('preview--mobile').removeClass('preview--desktop').addClass('preview--tablet');
-    });
-    $('.preview__button__desktop').on('click', function(){
-      $('.preview__button').removeClass('btn-primary').addClass('btn-light');
-      $('.preview__button__desktop').removeClass('btn-light').addClass('btn-primary');
-      $('#preview').removeClass('preview--mobile').removeClass('preview--tablet').addClass('preview--desktop');
-    });
-  });
\ No newline at end of file
+  'use strict';
+  var modes = ['mobile', 'tablet', 'desktop'],
+      mode = '';
+  $('.preview__button').on('click', function(){
+    mode = $(this).data('mode');
+    $('.preview__button').removeClass('btn-primary').addClass('btn-light');
+    $(this).removeClass('btn-light').addClass('btn-primary');
+    $('#preview').removeClass('preview--desktop').removeClass('preview--tablet').removeClass('preview--mobile').addClass('preview--' + mode);
+  });
+});
\ No newline at end of file
diff --git a/app/views/admin/application/_preview.html.erb b/app/views/admin/application/_preview.html.erb
index 2df997249cdce7f0565b78c57b5b60d2051a5591..4a90bc7fe3250e74681f6d896dda9bbb9e42f1d8 100644
--- a/app/views/admin/application/_preview.html.erb
+++ b/app/views/admin/application/_preview.html.erb
@@ -4,15 +4,15 @@
       <div class="modal-header">
         <h5 class="modal-title h4"><%= t 'preview.title' %></h5>
         <div class="btn-group m-auto" role="group" aria-label="Basic example">
-          <button type="button" class="btn btn-primary preview__button preview__button__mobile">
+          <button type="button" class="btn btn-primary preview__button" data-mode="mobile">
             <i class="fas fa-mobile"></i>
             <%= t 'preview.mobile' %>
           </button>
-          <button type="button" class="btn btn-light preview__button preview__button__tablet">
+          <button type="button" class="btn btn-light preview__button" data-mode="tablet">
             <i class="fas fa-tablet"></i>
             <%= t 'preview.tablet' %>
           </button>
-          <button type="button" class="btn btn-light preview__button preview__button__desktop">
+          <button type="button" class="btn btn-light preview__button" data-mode="desktop">
             <i class="fas fa-desktop"></i>
             <%= t 'preview.desktop' %>
           </button>