diff --git a/admin/service_messages.php b/admin/service_messages.php
index 280ecdc5..de634413 100644
--- a/admin/service_messages.php
+++ b/admin/service_messages.php
@@ -228,16 +228,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                                       class="form-control" name="message" id="content"></textarea>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <div class="col-md-10 col-md-offset-2">
-                            <div class="btn-group" role="group">
-                                <input type="submit" name="sm_save" value="<?php echo $hesklang['sm_save']; ?>"
-                                       class="btn btn-primary">
-                                <input type="submit" name="sm_preview"
-                                       value="<?php echo $hesklang['sm_preview']; ?>" class="btn btn-default">
-                            </div>
-                        </div>
-                    </div>
+                    <div id="preview-pane"></div>
                 </div>
                 <div class="modal-footer">
                     <input type="hidden" name="id">
diff --git a/internal-api/js/service-messages.js b/internal-api/js/service-messages.js
index 1e413ab5..43008335 100644
--- a/internal-api/js/service-messages.js
+++ b/internal-api/js/service-messages.js
@@ -135,9 +135,9 @@ function getServiceMessagePreview(icon, title, message, style) {
 
 function bindEditModal() {
     $(document).on('click', '[data-action="edit"]', function() {
-        console.log(serviceMessages);
         var element = serviceMessages[$(this).parent().parent().find('[data-property="id"]').data('value')];
         var $modal = $('#service-message-modal');
+        $modal.find('#preview-pane').html('');
 
         $modal.find('#edit-label').show();
         $modal.find('#create-label').hide();
@@ -164,7 +164,8 @@ function bindCreateModal() {
             .find('input[name="type"][value="0"]').prop('checked', 'checked').end() // Published
             .find('input[name="title"]').val('').end()
             .find('input[name="id"]').val(-1).end()
-            .find('input[name="order"]').val('').end();
+            .find('input[name="order"]').val('').end()
+            .find('#preview-pane').html('').end();
         setIcon('');
         tinyMCE.get('content').setContent('');
 
@@ -287,7 +288,14 @@ function bindSortButtons() {
 }
 
 function bindPreview() {
-    $('#preview-button').click(function() {
+    $('.preview-button').click(function() {
+        var styles = [];
+        styles[0] = "NONE";
+        styles[1] = "SUCCESS";
+        styles[2] = "INFO";
+        styles[3] = "NOTICE";
+        styles[4] = "ERROR";
+
         var $modal = $('#service-message-modal');
         var data = {
             icon: $modal.find('input[name="icon"]').val(),
@@ -298,6 +306,7 @@ function bindPreview() {
             order: $modal.find('input[name="order"]').val()
         };
 
-        getServiceMessagePreview(data.icon, data.title, data.message, data.style);
+        var preview = getServiceMessagePreview(data.icon, data.title, data.message, data.style);
+        $('#preview-pane').html(preview);
     });
 }
\ No newline at end of file