diff --git a/templates/comments/list.html b/templates/comments/list.html
index 565de8d..2194f08 100644
--- a/templates/comments/list.html
+++ b/templates/comments/list.html
@@ -69,14 +69,14 @@
                                             <i class="fa fa-pencil fa-fw"></i>
                                         </a>
                                         {% else %}
-                                            <a href="javascript:comment_set_parent({{ node.id }})"
+                                            <a href="javascript:reply_comment({{ node.id }})"
                                                title="{{ _('Reply') }}">
                                             <i class="fa fa-reply fa-fw"></i>
                                         </a>
                                         {% endif %}
                                         {% if perms.judge.change_comment %}
                                             {% if can_edit %}
-                                                <a href="javascript:comment_set_parent({{ node.id }})"
+                                                <a href="javascript:reply_comment({{ node.id }})"
                                                    title="{{ _('Reply') }}"><i class="fa fa-reply fa-fw"></i></a>
                                             {% else %}
                                                 <a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
@@ -109,6 +109,7 @@
                         </div>
                     </div>
                 </li>
+                <ul id="comment-{{ node.id }}-reply" class="reply-comment" hidden></ul>
                 {% with children=node.get_children() %}
                     {% if children %}
                         <ul id="comment-{{ node.id }}-children" class="comments">{{ loop(children) }}</ul>
@@ -121,7 +122,7 @@
     {% endif %}
 
     {% if request.user.is_authenticated and comment_form and not comment_lock %}
-        <div class="form-area comment-submit">
+        <div id="new-comment" class="form-area comment-submit">
             {% block comment_submit_title %}
                 <h3>{{ _('New comment') }}</h3>
                 <hr>
@@ -131,7 +132,7 @@
                     {{ _('You need to have solved at least one problem before your voice can be heard.') }}
                 </div>
             {% else %}
-                <form id="comment-submit" action="" method="post">
+                <form class="comment-submit-form" action="" method="post">
                     {% csrf_token %}
                     {% if comment_form.errors %}
                         <div id="form-errors">
diff --git a/templates/comments/media-css.html b/templates/comments/media-css.html
index 85d8337..cda426d 100644
--- a/templates/comments/media-css.html
+++ b/templates/comments/media-css.html
@@ -99,5 +99,9 @@
             -o-transform: translatez(0);
             transform: translatez(0);
         }
+        .reply-comment {
+            margin: -50px 23px 10px -40px;
+            padding-top: 50px;
+        }
     </style>
 {% endcompress %}
diff --git a/templates/comments/media-js.html b/templates/comments/media-js.html
index d938fb7..c4ed03c 100644
--- a/templates/comments/media-js.html
+++ b/templates/comments/media-js.html
@@ -30,13 +30,27 @@
     {% endif %}
     <script type="text/javascript">
         $(document).ready(function () {
-            window.comment_set_parent = function (parent) {
-                $('form#comment-submit input#id_parent').val(parent);
+            window.reply_comment = function (parent) {
+                var $comment_reply = $('#comment-' + parent + '-reply');
+                var reply_id = 'reply-' + parent;
+                if ($comment_reply.find('#' + reply_id).length == 0) {
+                    var $reply_form = $('#new-comment').clone(true).prop('id', reply_id);
+                    $reply_form.find('h3').html('{{ _('Replying to comment') }}');
+                    $reply_form.prepend('<a class="close">x</a>');
+                    $reply_form.find('form.comment-submit-form input#id_parent').val(parent);
+                    $reply_form.appendTo($comment_reply);
+                }
+                $comment_reply.fadeIn();
+
                 $('html, body').animate({
-                    scrollTop: $('.form-area.comment-submit').offset().top - $('#navigation').height() - 4
+                     scrollTop: $comment_reply.offset().top - $('#navigation').height() - 4
                 }, 500);
             };
 
+            $(document).on('click', '.close', function() {
+                $(this).closest('.reply-comment').fadeOut();
+            });
+
             function update_math($comment) {
                 if ('MathJax' in window) {
                     var $body = $comment.find('.comment-body');