diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 41ebf84981..d243fc7006 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -21,9 +21,21 @@ const Comment = (props) => {
     };
 
     const comment = props.comment;
+    const isReply = props.isReply;
     const hasReplies = comment.replies && comment.replies.length > 0;
     const html = {__html: comment.html};
 
+    let commentMarginBottom;
+    if (!hasReplies) {
+        commentMarginBottom = 'mb-10';
+    }
+    if (hasReplies) {
+        commentMarginBottom = 'mb-4';
+    }
+    if (isReply) {
+        commentMarginBottom = 'mb-10';
+    }
+
     if (comment.status !== 'published') {
         html.__html = '<i>This comment has been removed.</i>';
     }
@@ -34,7 +46,7 @@ const Comment = (props) => {
         );
     } else {
         return (
-            <div className={`flex flex-col ${!hasReplies && 'mb-14'} last:mb-6`}>
+            <div className={`flex flex-col ${commentMarginBottom}`}>
                 <div>
                     <div className="flex mb-4 space-x-4 justify-start items-center">
                         <Avatar comment={comment} />
@@ -53,12 +65,12 @@ const Comment = (props) => {
                     </div>
                 </div>    
                 {hasReplies && 
-                    <div className={`ml-14 ${isInReplyMode ? 'mt-8' : 'mt-14'}`}>
+                    <div className="ml-14 mt-14">
                         <Replies comment={comment} />
                     </div>
                 }
                 {isInReplyMode &&
-                    <div className={`ml-14 mt-8`}>
+                    <div className={`ml-14 ${!hasReplies && 'mt-10'}`}>
                         <ReplyForm parent={comment} toggle={toggleReplyMode} />
                     </div>
                 }
diff --git a/apps/comments-ui/src/components/Replies.js b/apps/comments-ui/src/components/Replies.js
index 55d8a3cf62..4c8627665f 100644
--- a/apps/comments-ui/src/components/Replies.js
+++ b/apps/comments-ui/src/components/Replies.js
@@ -5,7 +5,7 @@ const Replies = (props) => {
 
     return (
         <div>
-            {comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} />))}
+            {comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} isReply={true} />))}
         </div>
     );
 };
diff --git a/apps/comments-ui/src/components/ReplyForm.js b/apps/comments-ui/src/components/ReplyForm.js
index 2d81757650..7e28a96838 100644
--- a/apps/comments-ui/src/components/ReplyForm.js
+++ b/apps/comments-ui/src/components/ReplyForm.js
@@ -56,7 +56,7 @@ const ReplyForm = (props) => {
     };
 
     return (
-        <form onSubmit={submitForm} className="comment-form">
+        <form onSubmit={submitForm} className="comment-form mb-4">
             <div className="w-full">
                 <div className="flex mb-4 space-x-4 justify-start items-center">
                     <Avatar />
@@ -75,11 +75,11 @@ const ReplyForm = (props) => {
                             onBlur={handleBlur}
                             placeholder={focused ? '' : 'Reply to this comment'}
                         />
-                        <button
+                        {focused && <button
                             className={`transition-[opacity] duration-150 rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-100' : 'opacity-0'}`}
                             type="submit">
                             Add your reply
-                        </button>
+                        </button>}
                         <button
                             className={`transition-[opacity] duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-0' : 'opacity-100'}`}
                             disabled={true}>