diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js
index 57a9f718aa..18aa2f60e7 100644
--- a/apps/comments-ui/src/components/AddForm.js
+++ b/apps/comments-ui/src/components/AddForm.js
@@ -134,9 +134,9 @@ class AddForm extends React.Component {
                     </div>
                     <div className="-mt-[51px] ml-14 pr-3 font-sans leading-normal dark:text-neutral-300">
                         <div className="relative w-full">
-                            <textarea className={`transition-[height] ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer hover:border-slate-300 h-12 '} duration-150 w-full resize-none rounded-md border border-slate-200 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300`} value={this.state.message} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur} placeholder={this.state.focused ? '' : 'Add to the discussion'} />
-                            <button className={`transition-[opacity] ${this.state.focused ? 'opacity-100' : 'opacity-0'} duration-150 rounded-md border p-3 py-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`} type="submit">Add your comment</button>
-                            <button className={`transition-[opacity] ${this.state.focused ? 'opacity-0' : 'opacity-100'} duration-100 absolute top-[5px] right-[5px] rounded-md border p-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`} disabled="true">Comment</button>
+                            <textarea className={`transition-[height] ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer hover:border-slate-300 h-12'} duration-150 w-full resize-none rounded-md border border-slate-200 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300`} value={this.state.message} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur} placeholder={this.state.focused ? '' : 'Add to the discussion'} />
+                            <button className={`transition-[opacity] ${this.state.focused ? 'opacity-100' : 'opacity-0'} 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`} type="submit">Add your comment</button>
+                            <button className={`transition-[opacity] ${this.state.focused ? 'opacity-0' : 'opacity-100'} 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`} disabled="true">Comment</button>
                         </div>
                     </div>
                 </div>
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index d33aac9a89..55b50f0efa 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -3,7 +3,7 @@ import React from 'react';
 import AppContext from '../AppContext';
 import Avatar from './Avatar';
 import Like from './Like';
-// import Reply from './Reply';
+import Reply from './Reply';
 import More from './More';
 import EditForm from './EditForm';
 import Replies from './Replies';
@@ -44,6 +44,7 @@ class Comment extends React.Component {
 
     render() {
         const comment = this.props.comment;
+        const hasReplies = comment.replies && comment.replies.length > 0;
         const html = {__html: comment.html};
 
         if (comment.status !== 'published') {
@@ -56,7 +57,7 @@ class Comment extends React.Component {
             );
         } else {
             return (
-                <div className="flex flex-col   ">
+                <div className={`flex flex-col ${!hasReplies ? 'mb-10' : ''}`}>
                     <div>
                         <div className="flex mb-2 space-x-4 justify-start items-center">
                             <Avatar comment={comment} />
@@ -68,17 +69,17 @@ class Comment extends React.Component {
                         <div className="ml-14 mb-2.5 pr-4 font-sans leading-normal dark:text-neutral-300">
                             <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
                         </div>
-
-                        <div className="ml-14 flex gap-5">
+                        <div className="ml-14 flex gap-4">
                             <Like comment={comment} />
-                        
-                            {/* <Reply comment={comment} /> */}
+                            <Reply comment={comment} />
                             <More comment={comment} show={this.hasMoreContextMenu} toggleEdit={this.toggleEditMode} />
                         </div>
-                    </div>
-                    <div className="ml-14 mt-8">
-                        {comment.replies && comment.replies.length > 0 && <Replies replies={comment.replies} />}
-                    </div>
+                    </div>    
+                    {hasReplies && 
+                        <div className="ml-14 mt-10">
+                            <Replies replies={comment.replies} />
+                        </div>
+                    }
                 </div>
             );
         }
diff --git a/apps/comments-ui/src/components/EditForm.js b/apps/comments-ui/src/components/EditForm.js
index e1fa20c093..bac5f96317 100644
--- a/apps/comments-ui/src/components/EditForm.js
+++ b/apps/comments-ui/src/components/EditForm.js
@@ -50,8 +50,8 @@ class EditForm extends React.Component {
                         <div className="relative w-full">
                             <textarea className="w-full resize-none rounded-md border h-32 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={this.state.message} onChange={this.handleChange} autofocus="true" />
                             <div className="flex flex-start">
-                                <button type="submit" className="rounded-md border p-2 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
-                                <button className="font-sans text-sm font-medium ml-2.5 text-neutral-500" onClick={this.props.toggle}>Cancel</button>
+                                <button type="submit" className="rounded border py-1 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
+                                <button className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={this.props.toggle}>Cancel</button>
                             </div>
                         </div>
                     </div>
diff --git a/apps/comments-ui/src/components/Like.js b/apps/comments-ui/src/components/Like.js
index 029fcc8685..435f7c7a16 100644
--- a/apps/comments-ui/src/components/Like.js
+++ b/apps/comments-ui/src/components/Like.js
@@ -15,7 +15,7 @@ function Like(props) {
 
     return (
         <button className="flex font-sans text-[14px] items-center dark:text-white" onClick={toggleLike}>
-            <LikeIcon className={`gh-comments-icon gh-comments-icon-like mr-1 dark:stroke-white ${props.comment.liked ? 'fill-black' : ''}`} />
+            <LikeIcon className={`mr-1 stroke-black dark:stroke-white ${props.comment.liked ? 'fill-black dark:fill-white' : ''}`} />
             {props.comment.likes_count}
         </button>
     );
diff --git a/apps/comments-ui/src/components/More.js b/apps/comments-ui/src/components/More.js
index 934428961b..15c1c1dfc4 100644
--- a/apps/comments-ui/src/components/More.js
+++ b/apps/comments-ui/src/components/More.js
@@ -27,7 +27,7 @@ class More extends React.Component {
 
         return (
             <div className="relative">
-                {show ? <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more -m-[3px] dark:fill-white' /></button> : null}
+                {show ? <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more dark:fill-white' /></button> : null}
                 {this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} close={this.toggleContextMenu} toggleEdit={this.props.toggleEdit} /> : null}
             </div>
         );
diff --git a/apps/comments-ui/src/components/Reply.js b/apps/comments-ui/src/components/Reply.js
index 5f0204b571..b40eb9aed6 100644
--- a/apps/comments-ui/src/components/Reply.js
+++ b/apps/comments-ui/src/components/Reply.js
@@ -1,9 +1,18 @@
+import React, {useState} from 'react';
 import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
 
 function Reply() {
+    const [replied, setReplied] = useState(false);
+
+    const toggleReply = () => {
+        setReplied(!replied);
+    };
+
     return (
-        <button className="flex font-sans text-[14px] items-center"><ReplyIcon className='gh-comments-icon gh-comments-icon-reply mr-1' />Reply</button>
+        <button className="flex font-sans text-[14px] items-center dark:text-white" onClick={toggleReply}>
+            <ReplyIcon className={`mr-1 stroke-dark dark:stroke-white ${replied ? 'fill-black dark:fill-white' : ''}`} />Reply
+        </button>
     );
 }
-  
-export default Reply;
\ No newline at end of file
+
+export default Reply;
diff --git a/apps/comments-ui/src/components/modals/CommentContextMenu.js b/apps/comments-ui/src/components/modals/CommentContextMenu.js
index 71af2c55df..5e95fa6f01 100644
--- a/apps/comments-ui/src/components/modals/CommentContextMenu.js
+++ b/apps/comments-ui/src/components/modals/CommentContextMenu.js
@@ -30,7 +30,7 @@ class CommentContextMenu extends React.Component {
         const comment = this.props.comment;
 
         return (
-            <div className="bg-white absolute font-sans rounded py-3 px-4 drop-shadow-xl text-sm whitespace-nowrap z-10">
+            <div className="bg-white absolute font-sans rounded py-3 px-4 drop-shadow-xl text-sm whitespace-nowrap z-10 dark:bg-zinc-900 dark:text-white">
                 {this.isAuthor && comment.status === 'published' ? <AuthorContextMenu comment={comment} close={this.close} toggleEdit={this.props.toggleEdit} /> : (this.isAdmin ? <AdminContextMenu comment={comment} close={this.close}/> : <NotAuthorContextMenu comment={comment} close={this.close}/>)}
             </div>
         );
diff --git a/apps/comments-ui/src/images/icons/more.svg b/apps/comments-ui/src/images/icons/more.svg
index 73f48763d5..22c7c1342e 100644
--- a/apps/comments-ui/src/images/icons/more.svg
+++ b/apps/comments-ui/src/images/icons/more.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z"/>
-<path d="M8 10.5C8.82843 10.5 9.5 9.82843 9.5 9C9.5 8.17157 8.82843 7.5 8 7.5C7.17157 7.5 6.5 8.17157 6.5 9C6.5 9.82843 7.17157 10.5 8 10.5Z"/>
-<path d="M13 10.5C13.8284 10.5 14.5 9.82843 14.5 9C14.5 8.17157 13.8284 7.5 13 7.5C12.1716 7.5 11.5 8.17157 11.5 9C11.5 9.82843 12.1716 10.5 13 10.5Z" />
+<path d="M3 12C3.82843 12 4.5 11.3284 4.5 10.5C4.5 9.67157 3.82843 9 3 9C2.17157 9 1.5 9.67157 1.5 10.5C1.5 11.3284 2.17157 12 3 12Z" />
+<path d="M8 12C8.82843 12 9.5 11.3284 9.5 10.5C9.5 9.67157 8.82843 9 8 9C7.17157 9 6.5 9.67157 6.5 10.5C6.5 11.3284 7.17157 12 8 12Z" />
+<path d="M13 12C13.8284 12 14.5 11.3284 14.5 10.5C14.5 9.67157 13.8284 9 13 9C12.1716 9 11.5 9.67157 11.5 10.5C11.5 11.3284 12.1716 12 13 12Z" />
 </svg>
diff --git a/apps/comments-ui/src/images/icons/reply.svg b/apps/comments-ui/src/images/icons/reply.svg
index 0bebc88cfd..513693d761 100644
--- a/apps/comments-ui/src/images/icons/reply.svg
+++ b/apps/comments-ui/src/images/icons/reply.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.17463 2.98741C7.17439 2.7888 7.11434 2.59487 7.00229 2.43088C6.89025 2.26689 6.73141 2.14046 6.54647 2.06805C6.36153 1.99564 6.15907 1.98061 5.96546 2.02492C5.77186 2.06923 5.5961 2.17083 5.46107 2.31648L1.86192 6.21418C1.69351 6.39677 1.60001 6.63606 1.60001 6.88445C1.60001 7.13284 1.69351 7.37213 1.86192 7.55472L5.45909 11.4524C5.59412 11.5981 5.76988 11.6997 5.96349 11.744C6.15709 11.7883 6.35955 11.7733 6.54449 11.7009C6.72943 11.6284 6.88827 11.502 7.00032 11.338C7.11236 11.174 7.17242 10.9801 7.17265 10.7815V8.86164H9.12703C10.438 8.86164 11.6953 9.38241 12.6222 10.3094C13.5492 11.2364 14.07 12.4937 14.07 13.8046V9.85023C14.07 8.53927 13.5492 7.28201 12.6222 6.35502C11.6953 5.42803 10.438 4.90726 9.12703 4.90726H7.17265L7.17463 2.98741Z" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.17463 2.98741C7.17439 2.7888 7.11434 2.59487 7.00229 2.43088C6.89025 2.26689 6.73141 2.14046 6.54647 2.06805C6.36153 1.99564 6.15907 1.98061 5.96546 2.02492C5.77186 2.06923 5.5961 2.17083 5.46107 2.31648L1.86192 6.21418C1.69351 6.39677 1.60001 6.63606 1.60001 6.88445C1.60001 7.13284 1.69351 7.37213 1.86192 7.55472L5.45909 11.4524C5.59412 11.5981 5.76988 11.6997 5.96349 11.744C6.15709 11.7883 6.35955 11.7733 6.54449 11.7009C6.72943 11.6284 6.88827 11.502 7.00032 11.338C7.11236 11.174 7.17242 10.9801 7.17265 10.7815V8.86164H9.12703C10.438 8.86164 11.6953 9.38241 12.6222 10.3094C13.5492 11.2364 14.07 12.4937 14.07 13.8046V9.85023C14.07 8.53927 13.5492 7.28201 12.6222 6.35502C11.6953 5.42803 10.438 4.90726 9.12703 4.90726H7.17265L7.17463 2.98741Z" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>