diff --git a/pagure/templates/pull_request.html b/pagure/templates/pull_request.html
index a9658bb..e2a4868 100644
--- a/pagure/templates/pull_request.html
+++ b/pagure/templates/pull_request.html
@@ -390,40 +390,46 @@
 </section>
 {% endif %}
 
-<section class="request_comment add_comment">
-{% if authenticated and mergeform and pull_request %}
-  <form action="{{ url_for(
-      'pull_request_add_comment', username=username, repo=repo.name,
-      requestid=requestid) }}"
-      method="post" onsubmit="return try_async_comment(this, false)">
-    {{ mergeform.csrf_token }}
-    <header>
-      <label for="comment">Add new comment</label>
-      (supports the <a href="http://daringfireball.net/projects/markdown/syntax"
-        target="_blank">Markdown syntax</a>)
-    </header>
-    <div class="tabs" id="comment_block">
-      <ul>
-        <li><a href="#edit">Comment</a></li>
-        <li><a href="#preview">Preview</a></li>
-      </ul>
-      <div id="edit">
-        <div>
-          <textarea id="comment" name="comment" placeholder="Enter your comment here"></textarea>
-        </div>
-      </div>
-      <div id="preview">
-      </div>
-      <div>
-        <input type="submit" class="submit positive button" value="Comment">
-        <input type="button" value="Clear" id="clear_comment" />
+    <div class="card">
+      <div class="card-header">
+
+        <section class="request_comment add_comment">
+        {% if authenticated and mergeform and pull_request %}
+
+
+          <form action="{{ url_for(
+            'pull_request_add_comment', username=username, repo=repo.name,
+            requestid=requestid) }}"
+            method="post" onsubmit="return try_async_comment(this, false)">
+          {{ mergeform.csrf_token }}
+
+          <fieldset class="form-group">
+            <label for="comment"><strong>Add new comment</strong></label>
+            <small class="text-muted pull-xs-right">
+              <span class="btn btn-sm btn-secondary inactive"
+                aria-pressed="false" id="previewinmarkdown">Preview
+              </span>
+            </small>
+            <textarea class="form-control" rows=8 id="comment"
+                name="comment" placeholder="Enter your comment here">
+            </textarea>
+
+            <div id="preview">
+            </div>
+          </fieldset>
+
+            <div>
+              <input type="submit" class="btn btn-primary" value="Update Issue">
+              <input type="button" class="btn btn-secondary" value="Clear" id="clear_comment" />
+            </div>
+        </form>
+        {% else %}
+          <p><a href="{{ url_for('auth_login', next=request.url) }}">Login</a> to comment on this ticket.</p>
+        {% endif %}
+        </section>
+
       </div>
     </div>
-  </form>
-{% elif pull_request %}
-  <p><a href="{{ url_for('auth_login', next=request.url) }}">Login</a> to comment.</p>
-{% endif %}
-</section>
 </div>
 </div>
 
@@ -574,6 +580,42 @@
     }
   );
 
+  $( "#preview" ).hide();
+  $( "#previewinmarkdown" ).click(
+    function(event, ui) {
+        if ($( "#previewinmarkdown" ).hasClass("inactive")){
+          var _text = $( "#comment" ).val();
+          var _url = "{{ url_for('markdown_preview') }}";
+            $.ajax({
+                url: _url ,
+                type: 'POST',
+                data: {
+                  content: _text,
+                  csrf_token: "{{ mergeform.csrf_token.current_token }}",
+                },
+                dataType: 'html',
+                success: function(res) {
+                    $( "#preview" ).html(res);
+                    $( "#previewinmarkdown" ).removeClass("inactive");
+                    $( "#previewinmarkdown" ).addClass("active");
+                    $( "#comment" ).hide();
+                    $( "#preview" ).show();
+                },
+                error: function() {
+                    alert('Unable to generate preview!');
+                }
+            });
+            return false;
+          } else if ($( "#previewinmarkdown" ).hasClass("active")){
+            $( "#previewinmarkdown" ).addClass("inactive");
+            $( "#previewinmarkdown" ).removeClass("active");
+            $( "#comment" ).show();
+            $( "#preview" ).hide();
+          }
+    }
+  );
+
+
   $(".edit_btn").click(function() {
     var commentid = $( this ).attr('data-comment');
     var _url = '{{ request.base_url }}' + '/comment/' + commentid + '/edit';