diff --git a/src/pages/Articles/components/commentComponent.tsx b/src/pages/Articles/components/commentComponent.tsx
index e730e4e..310db92 100644
--- a/src/pages/Articles/components/commentComponent.tsx
+++ b/src/pages/Articles/components/commentComponent.tsx
@@ -71,7 +71,7 @@ const CommentComponent: FunctionComponent<{ comment: IArticleComments, level: nu
 
   return (
     <Fragment>
-      <Box mb={"5px"} ml={`${level * 10}px`}> {/* Indent based on level */}
+      <Box mb={"5px"}> {/* Indent based on level */}
         <Box
           display={"flex"}
           justifyContent={"flex-start"}
@@ -203,7 +203,7 @@ const CommentComponent: FunctionComponent<{ comment: IArticleComments, level: nu
 
       {/* Render nested replies */}
       {comment.replies && comment.replies.length > 0 && (
-        <>
+        <Box ml={`${level * 10}px`}>
           {showAllReplies
             ? comment.replies.map(reply => (
               <CommentComponent key={reply.id} comment={reply} level={level + 1} />
@@ -211,7 +211,7 @@ const CommentComponent: FunctionComponent<{ comment: IArticleComments, level: nu
             : comment.replies.slice(0, 1).map(reply => (
               <CommentComponent key={reply.id} comment={reply} level={level + 1} />
             ))}
-        </>
+        </Box>
       )}
 
       <ShowLoginModal isOpen={isOpen} onClose={onClose} />
diff --git a/src/pages/Threads/components/commentComponent.tsx b/src/pages/Threads/components/commentComponent.tsx
index 4e89374..60ca631 100644
--- a/src/pages/Threads/components/commentComponent.tsx
+++ b/src/pages/Threads/components/commentComponent.tsx
@@ -70,7 +70,7 @@ const CommentComponent: FunctionComponent<{ comment: IThreadComments, level: num
 
   return (
     <Fragment>
-      <Box mb={"5px"} ml={`${level * 20}px`}>
+      <Box mb={"5px"}>
         <Flex flex="1" gap={2} alignItems="flex-start" flexWrap="wrap">
           <Link to={`/user/${comment?.user?.username}`}>
             <Avatar size={"xs"} name={comment?.user?.fullname} src={comment?.user?.avatar} />
@@ -176,7 +176,7 @@ const CommentComponent: FunctionComponent<{ comment: IThreadComments, level: num
 
         {/* Render nested replies */}
         {comment.replies && comment.replies.length > 0 && (
-          <>
+          <Box ml={`${level * 20}px`}>
             {showAllReplies
               ? comment.replies.map(reply => (
                 <CommentComponent key={reply.id} comment={reply} level={level + 1} />
@@ -184,7 +184,7 @@ const CommentComponent: FunctionComponent<{ comment: IThreadComments, level: num
               : comment.replies.slice(0, 1).map(reply => (
                 <CommentComponent key={reply.id} comment={reply} level={level + 1} />
               ))}
-          </>
+          </Box>
         )}
       </Box>