diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index fe4f2686bb..d76beec668 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -52,16 +52,16 @@ const Comment = (props) => {
                         <More comment={comment} toggleEdit={toggleEditMode} />
                     </div>
                 </div>    
-                {isInReplyMode &&
-                    <div className={`ml-14 mt-8`}>
-                        <ReplyForm parent={comment} />
-                    </div>
-                }
                 {hasReplies && 
                     <div className={`ml-14 ${isInReplyMode ? 'mt-8' : 'mt-14'}`}>
                         <Replies replies={comment.replies} />
                     </div>
                 }
+                {isInReplyMode &&
+                    <div className={`ml-14 mt-8`}>
+                        <ReplyForm parent={comment} toggle={toggleReplyMode} />
+                    </div>
+                }
             </div>
         );
     }
diff --git a/apps/comments-ui/src/components/ReplyForm.js b/apps/comments-ui/src/components/ReplyForm.js
index c518170a42..2d81757650 100644
--- a/apps/comments-ui/src/components/ReplyForm.js
+++ b/apps/comments-ui/src/components/ReplyForm.js
@@ -34,6 +34,7 @@ const ReplyForm = (props) => {
             // Clear message on success
             setMessage('');
             setFocused(false);
+            props.toggle();
         } catch (e) {
             // eslint-disable-next-line no-console
             console.error(e);