diff --git a/src/components/reply/reply.module.css b/src/components/reply/reply.module.css
index 56df1e66..cd4bf612 100644
--- a/src/components/reply/reply.module.css
+++ b/src/components/reply/reply.module.css
@@ -1,15 +1,15 @@
 .nested {
   margin-top: 10px;
+  margin-left: 25px;
   border-left: 1px dotted #DDF;
 }
 
 .replyWrapper {
- margin-top: 10px; 
+ margin-top: 10px;
 }
 
 .midcol {
   visibility: visible;
-  margin-left: 0px;
   width: 15px;
   float: left;
   margin-right: 7px;
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index f58a2098..1eaf2493 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -25,11 +25,10 @@ const Reply: FC<ReplyProps> = ({ reply }) => {
   const toggleExpanded = () => setExpanded(!expanded);
   const commentMediaInfo = utils.getCommentMediaInfoMemoized(reply);
   const hasThumbnail = utils.hasThumbnail(commentMediaInfo, link);
-  const calculatedMargin = 10 + (depth - 1) * 25;
 
   return (
     <div className={styles.reply}>
-      <div className={`${styles.replyWrapper} ${depth > 1 && styles.nested}`} style={{marginLeft: `${calculatedMargin}px`}}>
+      <div className={`${styles.replyWrapper} ${depth > 1 && styles.nested}`}>
         <div className={styles.midcol}>
           <div className={`${styles.arrow} ${styles.arrowUp}`} />
           <div className={`${styles.arrow} ${styles.arrowDown}`} />
@@ -51,10 +50,10 @@ const Reply: FC<ReplyProps> = ({ reply }) => {
             <span className={styles.time}>{utils.getFormattedTime(timestamp)}</span>
           </p>
           <div className={styles.usertext}>
-            {hasThumbnail && (<Thumbnail commentCid={cid} />)}
-            {hasThumbnail && (<ExpandButton commentCid={cid} expanded={expanded} hasThumbnail={hasThumbnail} toggleExpanded={toggleExpanded} />)}
+            {hasThumbnail && <Thumbnail commentCid={cid} />}
+            {hasThumbnail && <ExpandButton commentCid={cid} expanded={expanded} hasThumbnail={hasThumbnail} toggleExpanded={toggleExpanded} />}
             <div className={styles.md}>{content}</div>
-            {hasThumbnail && (<Expando commentCid={cid} expanded={expanded} showContent={false} />)}
+            {hasThumbnail && <Expando commentCid={cid} expanded={expanded} showContent={false} />}
           </div>
         </div>
         <ul className={styles.buttons}>
@@ -74,10 +73,10 @@ const Reply: FC<ReplyProps> = ({ reply }) => {
             <span>reply</span>
           </li>
         </ul>
+        {replies.map((reply, index) => (
+          <Reply key={index} reply={reply} />
+        ))}
       </div>
-      {replies.map((reply, index) => (
-        <Reply key={index} reply={reply} />
-      ))}
     </div>
   );
 };
diff --git a/src/components/views/comments/comments.module.css b/src/components/views/comments/comments.module.css
index 2f665480..967f3dab 100644
--- a/src/components/views/comments/comments.module.css
+++ b/src/components/views/comments/comments.module.css
@@ -116,5 +116,5 @@
 
 .replies {
   max-width: 80em;
-  margin-left: -6px;
+  margin-left: 3px;
 }
\ No newline at end of file
diff --git a/src/components/views/comments/comments.tsx b/src/components/views/comments/comments.tsx
index 11c9c797..5236bcca 100644
--- a/src/components/views/comments/comments.tsx
+++ b/src/components/views/comments/comments.tsx
@@ -12,7 +12,7 @@ const Comments: FC = () => {
   const { commentCid } = useParams();
   const comment = useComment({ commentCid });
   const { content, replyCount, subplebbitAddress, title } = comment || {};
-  const subplebbit = useSubplebbit({subplebbitAddress});
+  const subplebbit = useSubplebbit({ subplebbitAddress });
   const replies = useReplies(comment).map((reply, index) => <Reply key={index} reply={reply} />) || '';
   const threadTitle = title?.slice(0, 40) || content?.slice(0, 40);
   const subplebbitTitle = subplebbit?.title || subplebbit?.shortAddress;
@@ -39,7 +39,7 @@ const Comments: FC = () => {
             </div>
             <div className={styles.menuArea}>
               <div className={styles.spacer}>
-                <span className={styles.dropdownTitle}>sorted by:</span>
+                <span className={styles.dropdownTitle}>sorted by: </span>
                 <div className={styles.dropdown}>
                   <span className={styles.selected}>best</span>
                 </div>