diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js
index 141333b2b4d..ffaafb3ee9e 100644
--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@@ -117,12 +117,10 @@
   }());
 
   markdownPreview = new window.MarkdownPreview();
-
   previewButtonSelector = '.js-md-preview-button';
-
   writeButtonSelector = '.js-md-write-button';
-
   lastTextareaPreviewed = null;
+  const markdownToolbar = $('.md-header-toolbar');
 
   $.fn.setupMarkdownPreview = function () {
     var $form = $(this);
@@ -146,6 +144,7 @@
     // toggle content
     $form.find('.md-write-holder').hide();
     $form.find('.md-preview-holder').show();
+    markdownToolbar.removeClass('active');
     markdownPreview.showPreview($form);
   });
 
@@ -167,6 +166,7 @@
     $form.find('.md-write-holder').show();
     $form.find('textarea.markdown-area').focus();
     $form.find('.md-preview-holder').hide();
+    markdownToolbar.addClass('active');
 
     markdownPreview.hideReferencedCommands($form);
   });
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index c5e3a7945bd..8212ab9a31e 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -17,7 +17,7 @@
         %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
           Preview
 
-      %li.md-header-toolbar
+      %li.md-header-toolbar.active
         = markdown_toolbar_button({ icon: "bold", data: { "md-tag" => "**" }, title: "Add bold text" })
         = markdown_toolbar_button({ icon: "italic", data: { "md-tag" => "*" }, title: "Add italic text" })
         = markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })