diff --git a/packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx b/packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx
index 38308b6cd9..3a2a8a5ed8 100644
--- a/packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx
+++ b/packages/components/src/ButtonShowReplies/ButtonShowReplies.stories.tsx
@@ -70,7 +70,7 @@ export const NoCreatorName: StoryFn<typeof ButtonShowReplies> = () => {
       creatorName={null}
       isShowReplies={false}
       replies={replies}
-      setIsShowReplies={mockSetIsShowReplies}
+      setIsShowReplies={() => null}
     />
   )
 }
diff --git a/packages/components/src/CommentItem/CommentItem.stories.tsx b/packages/components/src/CommentItem/CommentItem.stories.tsx
index 17873475f9..41528a722a 100644
--- a/packages/components/src/CommentItem/CommentItem.stories.tsx
+++ b/packages/components/src/CommentItem/CommentItem.stories.tsx
@@ -10,35 +10,74 @@ export default {
   component: CommentItem,
 } as Meta<typeof CommentItem>
 
+const handleEdit = () => {
+  return
+}
+
 export const Default: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment({ creatorImage: faker.image.avatar() })
 
-  return <CommentItem isReply={false} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={false}
+      showAvatar
+    />
+  )
 }
 
 export const WithoutAvatar: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment()
 
-  return <CommentItem isReply={false} comment={comment} showAvatar={false} />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={false}
+      showAvatar={false}
+    />
+  )
 }
 
 export const Editable: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment({ isEditable: true })
 
-  return <CommentItem isReply={false} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={false}
+      showAvatar
+    />
+  )
 }
 
 export const Edited: StoryFn<typeof CommentItem> = () => {
   const comment = fakeComment({ _edited: new Date().toISOString() })
 
-  return <CommentItem isReply={false} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={false}
+      showAvatar
+    />
+  )
 }
 
 export const LongText: StoryFn<typeof CommentItem> = () => {
   const text = `Ut dignissim, odio a cursus pretium, erat ex dictum quam, a eleifend augue mauris vel metus. Suspendisse pellentesque, elit efficitur rutrum maximus, arcu enim congue ipsum, vel aliquam ipsum urna quis tellus. Mauris at imperdiet nisi. Integer at neque ex. Nullam vel ipsum sodales, porttitor nulla vitae, tincidunt est. Pellentesque vitae lectus arcu. Integer dapibus rutrum facilisis. Nullam tincidunt quam at arcu interdum, vitae egestas libero vehicula. Morbi metus tortor, dapibus id finibus ac, egestas quis leo. Phasellus scelerisque suscipit mauris sed rhoncus. In quis ultricies ipsum. Integer vitae iaculis risus, sit amet elementum augue. Pellentesque vitae sagittis erat, eget consectetur lorem.\n\nUt pharetra molestie quam id dictum. In molestie, arcu sit amet faucibus pulvinar, eros erat egestas leo, at molestie nunc velit a arcu. Aliquam erat volutpat. Vivamus vehicula mi sit amet nibh auctor efficitur. Duis fermentum sem et nibh facilisis, ut tincidunt sem commodo. Nullam ornare ex a elementum accumsan. Etiam a neque ut lacus suscipit blandit. Maecenas id tortor velit.\n\nInterdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut commodo tellus. Maecenas at leo metus. Vivamus ullamcorper ex purus, volutpat auctor nunc lobortis a. Integer sit amet ornare nisi, sed ultrices enim. Pellentesque ut aliquam urna, eu fringilla ante. Nullam dui nibh, feugiat id vestibulum nec, efficitur a lorem. In vitae pellentesque tellus. Pellentesque sed odio iaculis, imperdiet turpis at, aliquam ex. Praesent iaculis bibendum nibh, vel egestas turpis ultrices ac. Praesent tincidunt libero sed gravida ornare. Aliquam vehicula risus ut molestie suscipit. Nunc erat odio, venenatis nec posuere in, placerat eget massa. Sed in ultrices ex, vel egestas quam. Integer lectus magna, ornare at nisl sed, convallis euismod enim. Cras pretium commodo arcu non bibendum.\n\nNullam dictum lectus felis. Duis vitae lacus vitae nisl aliquet faucibus. Integer neque lacus, dignissim sed mi et, dignissim luctus metus. Cras sollicitudin vestibulum leo, ac ultrices sapien bibendum ac. Phasellus lobortis aliquam libero eu volutpat. Donec vitae rutrum tellus. Fusce vel ante ipsum. Suspendisse mollis tempus porta. Sed a orci tempor, rhoncus tortor eu, sodales justo.`
   const comment = fakeComment({ text })
 
-  return <CommentItem isReply={true} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={true}
+      showAvatar
+    />
+  )
 }
 
 export const ShortTextWithLink: StoryFn<typeof CommentItem> = () => {
@@ -46,5 +85,12 @@ export const ShortTextWithLink: StoryFn<typeof CommentItem> = () => {
     text: `Ut dignissim, odio a cursus pretium. https://example.com`,
   })
 
-  return <CommentItem isReply={true} comment={comment} showAvatar />
+  return (
+    <CommentItem
+      comment={comment}
+      handleEdit={handleEdit}
+      isReply={true}
+      showAvatar
+    />
+  )
 }
diff --git a/packages/components/src/CommentItem/CommentItem.tsx b/packages/components/src/CommentItem/CommentItem.tsx
index 4b9b02706a..75dab9a70c 100644
--- a/packages/components/src/CommentItem/CommentItem.tsx
+++ b/packages/components/src/CommentItem/CommentItem.tsx
@@ -16,7 +16,7 @@ const DELETED_COMMENT = 'The original comment got deleted'
 export interface IProps {
   comment: IComment
   handleDelete?: (commentId: string) => Promise<void>
-  handleEdit?: (commentId: string, newCommentText: string) => void
+  handleEdit: (commentId: string, newCommentText: string) => void
   handleEditRequest?: (commentId: string) => Promise<void>
   isReply: boolean
   showAvatar: boolean
@@ -66,6 +66,7 @@ export const CommentItem = (props: IProps) => {
 
   const date = formatDate(_edited || _created)
   const maxHeight = isShowMore ? 'max-content' : '128px'
+  const item = isReply ? 'ReplyItem' : 'CommentItem'
 
   useEffect(() => {
     if (textRef.current) {
@@ -85,14 +86,10 @@ export const CommentItem = (props: IProps) => {
   }
 
   return (
-    <Flex
-      id={`comment:${_id}`}
-      data-cy="comment"
-      sx={{ flexDirection: 'column' }}
-    >
+    <Flex id={`comment:${_id}`} data-cy={item} sx={{ flexDirection: 'column' }}>
       <Flex sx={{ gap: 2 }}>
         {_deleted && (
-          <Box sx={{ marginBottom: 2 }}>
+          <Box sx={{ marginBottom: 2 }} data-cy="deletedComment">
             <Text sx={{ color: 'grey' }}>[{DELETED_COMMENT}]</Text>
           </Box>
         )}
@@ -151,7 +148,7 @@ export const CommentItem = (props: IProps) => {
                   }}
                 >
                   <Button
-                    data-cy="CommentItem: edit button"
+                    data-cy={`${item}: edit button`}
                     variant="outline"
                     small={true}
                     icon="edit"
@@ -160,7 +157,7 @@ export const CommentItem = (props: IProps) => {
                     edit
                   </Button>
                   <Button
-                    data-cy="CommentItem: delete button"
+                    data-cy={`${item}: delete button`}
                     variant={'outline'}
                     small={true}
                     icon="delete"
@@ -204,8 +201,8 @@ export const CommentItem = (props: IProps) => {
       <Modal width={600} isOpen={showEditModal}>
         <EditComment
           comment={text}
-          handleSubmit={(commentText) => {
-            handleEdit && handleEdit(_id, commentText)
+          handleSubmit={async (commentText) => {
+            await handleEdit(_id, commentText)
             setShowEditModal(false)
           }}
           handleCancel={() => setShowEditModal(false)}
@@ -218,8 +215,8 @@ export const CommentItem = (props: IProps) => {
         message="Are you sure you want to delete this comment?"
         confirmButtonText="Delete"
         handleCancel={() => setShowDeleteModal(false)}
-        handleConfirm={() => {
-          handleDelete && handleDelete(_id)
+        handleConfirm={async () => {
+          handleDelete && (await handleDelete(_id))
           setShowDeleteModal(false)
         }}
       />
diff --git a/packages/components/src/CommentList/CommentList.tsx b/packages/components/src/CommentList/CommentList.tsx
index 2a509d0dc8..1eac7da63a 100644
--- a/packages/components/src/CommentList/CommentList.tsx
+++ b/packages/components/src/CommentList/CommentList.tsx
@@ -5,6 +5,7 @@ import { Button } from '../Button/Button'
 import { ButtonShowReplies } from '../ButtonShowReplies/ButtonShowReplies'
 import { CommentItem } from '../CommentItem/CommentItem'
 import { CreateReply } from '../CreateReply/CreateReply'
+import { nonDeletedCommentsCount } from '../DiscussionTitle/DiscussionTitle'
 import { Icon } from '../Icon/Icon'
 
 import type { IComment } from '../CommentItem/types'
@@ -89,7 +90,9 @@ export const CommentContainer = (props: IPropsCommentContainer) => {
     }
   }
 
-  if (_deleted && (!replies || replies.length === 0)) return null
+  if (_deleted && (!replies || nonDeletedCommentsCount(replies) === 0)) {
+    return null
+  }
 
   return (
     <Box
diff --git a/packages/components/src/CreateComment/CreateComment.tsx b/packages/components/src/CreateComment/CreateComment.tsx
index 3bd0dff139..8012a35564 100644
--- a/packages/components/src/CreateComment/CreateComment.tsx
+++ b/packages/components/src/CreateComment/CreateComment.tsx
@@ -7,6 +7,7 @@ export interface Props {
   maxLength: number
   isLoggedIn: boolean
   isLoading?: boolean
+  isReply?: boolean
   onSubmit: (value: string) => void
   onChange: (value: string) => void
   comment: string
@@ -16,7 +17,7 @@ export interface Props {
 }
 
 export const CreateComment = (props: Props) => {
-  const { comment, isLoggedIn, maxLength, onSubmit, isLoading } = props
+  const { comment, isLoggedIn, isReply, maxLength, onSubmit, isLoading } = props
   const userProfileType = props.userProfileType || 'member'
   const placeholder = props.placeholder || 'Leave your questions or feedback...'
   const buttonLabel = props.buttonLabel ?? 'Leave a comment'
@@ -58,7 +59,7 @@ export const CreateComment = (props: Props) => {
                   onChange && onChange(event.target.value)
                 }}
                 aria-label="Comment"
-                data-cy="comments-form"
+                data-cy={isReply ? 'reply-form' : 'comments-form'}
                 placeholder={placeholder}
                 sx={{
                   background: 'none',
@@ -104,7 +105,7 @@ export const CreateComment = (props: Props) => {
 
       <Flex sx={{ alignSelf: 'flex-end' }}>
         <Button
-          data-cy="comment-submit"
+          data-cy={isReply ? 'reply-submit' : 'comment-submit'}
           disabled={!comment.trim() || !isLoggedIn || isLoading}
           variant="primary"
           onClick={() => {
diff --git a/packages/components/src/CreateReply/CreateReply.tsx b/packages/components/src/CreateReply/CreateReply.tsx
index b6580568c0..0d6f456e3d 100644
--- a/packages/components/src/CreateReply/CreateReply.tsx
+++ b/packages/components/src/CreateReply/CreateReply.tsx
@@ -45,6 +45,7 @@ export const CreateReply = (props: Props) => {
         onSubmit={handleSubmit}
         isLoggedIn={isLoggedIn}
         isLoading={isLoading}
+        isReply
         buttonLabel="Leave a reply"
       />
       {isError ? (
diff --git a/packages/components/src/EditComment/EditComment.tsx b/packages/components/src/EditComment/EditComment.tsx
index f86f0a1e8e..ce784e3528 100644
--- a/packages/components/src/EditComment/EditComment.tsx
+++ b/packages/components/src/EditComment/EditComment.tsx
@@ -51,6 +51,7 @@ export const EditComment = (props: IProps) => {
         comment,
       }}
       validate={validateEditedComment}
+      data-cy="EditCommentForm"
       render={({ invalid, handleSubmit, values }) => {
         const disabled = invalid
         return (
diff --git a/packages/cypress/src/integration/howto/discussions.spec.ts b/packages/cypress/src/integration/howto/discussions.spec.ts
index 0894581014..52b9d2bc10 100644
--- a/packages/cypress/src/integration/howto/discussions.spec.ts
+++ b/packages/cypress/src/integration/howto/discussions.spec.ts
@@ -17,8 +17,8 @@ describe('[Howto.Discussions]', () => {
 
     cy.signUpNewUser()
     cy.visit(`/how-to/${item.slug}#comment:${firstComment._id}`)
-    cy.get('[data-cy="comment"]').should('have.length.gte', 2)
-    cy.get('[data-cy="comment"]')
+    cy.get('[data-cy="CommentItem"]').should('have.length.gte', 2)
+    cy.get('[data-cy="CommentItem"]')
       .first()
       .scrollIntoView()
       .should('be.inViewport', 10)
@@ -57,8 +57,8 @@ describe('[Howto.Discussions]', () => {
 
     cy.step('Can add reply')
     cy.get('[data-cy=show-replies]:first').click()
-    cy.get('[data-cy=comments-form]:first').type(newReply)
-    cy.get('[data-cy=comment-submit]:first').click()
+    cy.get('[data-cy=reply-form]:first').type(newReply)
+    cy.get('[data-cy=reply-submit]:first').click()
     cy.contains(`${howtoDiscussion.comments.length + 1} comments`)
     cy.contains(newReply)
     cy.queryDocuments('howtos', '_id', '==', item._id).then((docs) => {
@@ -69,14 +69,14 @@ describe('[Howto.Discussions]', () => {
     })
 
     cy.step('Can edit their reply')
-    cy.get('[data-cy="CommentItem: edit button"]:first').click()
+    cy.get('[data-cy="ReplyItem: edit button"]:first').click()
     cy.get('[data-cy=edit-comment]').clear().type(updatedNewReply)
     cy.get('[data-cy=edit-comment-submit]').click()
     cy.contains(updatedNewReply)
     cy.contains(newReply).should('not.exist')
 
     cy.step('Can delete their reply')
-    cy.get('[data-cy="CommentItem: delete button"]:first').click()
+    cy.get('[data-cy="ReplyItem: delete button"]:first').click()
     cy.get('[data-cy="Confirm.modal: Confirm"]:first').click()
     cy.contains(updatedNewReply).should('not.exist')
     cy.contains(`${howtoDiscussion.comments.length} comments`)
diff --git a/packages/cypress/src/integration/questions/discussions.spec.ts b/packages/cypress/src/integration/questions/discussions.spec.ts
index 5656d622e4..6eac45b7c6 100644
--- a/packages/cypress/src/integration/questions/discussions.spec.ts
+++ b/packages/cypress/src/integration/questions/discussions.spec.ts
@@ -16,8 +16,8 @@ describe('[Questions.Discussions]', () => {
   it('can open using deep links', () => {
     cy.signUpNewUser()
     cy.visit(`/questions/${item.slug}#comment:${firstComment._id}`)
-    cy.get('[data-cy="comment"]').should('have.length.gte', 2)
-    cy.get('[data-cy="comment"]')
+    cy.get('[data-cy="CommentItem"]').should('have.length.gte', 2)
+    cy.get('[data-cy="CommentItem"]')
       .first()
       .scrollIntoView()
       .should('be.inViewport', 10)
@@ -32,6 +32,7 @@ describe('[Questions.Discussions]', () => {
       'An interesting question. The answer must be that when the sky is red, the apocalypse _might_ be on the way.'
     const newReply = 'Thanks Dave and Ben. What does everyone else think?'
     const updatedNewReply = 'Anyone else?'
+    const secondReply = 'Quick reply'
 
     const visitor = generateNewUserDetails()
     cy.signUpNewUser(visitor)
@@ -50,35 +51,50 @@ describe('[Questions.Discussions]', () => {
     cy.contains(updatedNewComment)
     cy.contains(newComment).should('not.exist')
 
-    cy.step('Can delete their comment')
-    cy.get('[data-cy="CommentItem: delete button"]:last').click()
-    cy.get('[data-cy="Confirm.modal: Confirm"]:last').click()
-    cy.contains(updatedNewComment).should('not.exist')
-    cy.contains(`${discussion.comments.length} comments`)
-
     cy.step('Can add reply')
     cy.get('[data-cy=show-replies]:first').click()
-    cy.get('[data-cy=comments-form]:first').type(newReply)
-    cy.get('[data-cy=comment-submit]:first').click()
-    cy.contains(`${discussion.comments.length + 1} comments`)
+    cy.get('[data-cy=reply-form]:first').type(newReply)
+    cy.get('[data-cy=reply-submit]:first').click()
+    cy.contains(`${discussion.comments.length + 2} comments`)
     cy.contains(newReply)
     cy.queryDocuments('questions', '_id', '==', item._id).then((docs) => {
       const [question] = docs
-      expect(question.commentCount).to.eq(discussion.comments.length + 1)
+      expect(question.commentCount).to.eq(discussion.comments.length + 2)
       // Updated to the just added comment iso datetime
       expect(question.latestCommentDate).to.not.eq(item.latestCommentDate)
     })
 
     cy.step('Can edit their reply')
-    cy.get('[data-cy="CommentItem: edit button"]:first').click()
+    cy.get('[data-cy="ReplyItem: edit button"]:first').click()
     cy.get('[data-cy=edit-comment]').clear().type(updatedNewReply)
     cy.get('[data-cy=edit-comment-submit]').click()
     cy.contains(updatedNewReply)
     cy.contains(newReply).should('not.exist')
 
     cy.step('Can delete their reply')
+    cy.get('[data-cy="ReplyItem: delete button"]:first').click()
+    cy.get('[data-cy="Confirm.modal: Confirm"]').click()
+    cy.contains(updatedNewReply).should('not.exist')
+
+    // Prep for: Replies still show for deleted comments
+    cy.get('[data-cy=show-replies]:last').click()
+    cy.get('[data-cy=reply-form]:last').type(secondReply)
+    cy.get('[data-cy=reply-submit]:last').click()
+    cy.contains('[data-cy="Confirm.modal: Modal"]').should('not.exist')
+    cy.get('[data-cy=ReplyItem]:last').contains(secondReply)
+
+    cy.step('Can delete their comment')
     cy.get('[data-cy="CommentItem: delete button"]:first').click()
-    cy.get('[data-cy="Confirm.modal: Confirm"]:first').click()
+    cy.get('[data-cy="Confirm.modal: Confirm"]').click()
+    cy.contains(updatedNewComment).should('not.exist')
+
+    cy.step('Replies still show for deleted comments')
+    cy.get('[data-cy="deletedComment"]').should('be.visible')
+    cy.contains(secondReply)
+
+    cy.step('Can delete their reply')
+    cy.get('[data-cy="ReplyItem: delete button"]:first').click()
+    cy.get('[data-cy="Confirm.modal: Confirm"]').click()
     cy.contains(updatedNewReply).should('not.exist')
     cy.contains(`${discussion.comments.length} comments`)
     cy.queryDocuments('questions', '_id', '==', item._id).then((docs) => {
@@ -86,6 +102,7 @@ describe('[Questions.Discussions]', () => {
       expect(question.commentCount).to.eq(discussion.comments.length)
       expect(question.latestCommentDate).to.eq(item.latestCommentDate)
     })
+    cy.contains('[data-cy=deletedComment]').should('not.exist')
 
     // Putting these at the end to avoid having to put a wait in the test
     cy.step('Comment generated notification for question author')
diff --git a/packages/cypress/src/integration/research/discussions.spec.ts b/packages/cypress/src/integration/research/discussions.spec.ts
index 564b281f77..dfafbcbb9c 100644
--- a/packages/cypress/src/integration/research/discussions.spec.ts
+++ b/packages/cypress/src/integration/research/discussions.spec.ts
@@ -15,8 +15,10 @@ const firstComment = discussion.comments[0]
 describe('[Research.Discussions]', () => {
   it('can open using deep links', () => {
     cy.visit(`/research/${item.slug}#update-0-comment:${firstComment._id}`)
-    cy.get('[data-cy="comment"]').should('have.length.gte', 1)
-    cy.get('[data-cy="comment"]').scrollIntoView().should('be.inViewport', 10)
+    cy.get('[data-cy="CommentItem"]').should('have.length.gte', 1)
+    cy.get('[data-cy="CommentItem"]')
+      .scrollIntoView()
+      .should('be.inViewport', 10)
     cy.contains(firstComment.text)
   })
 
@@ -38,10 +40,10 @@ describe('[Research.Discussions]', () => {
     cy.get('[data-cy="comments-form"]').type(comment)
     cy.get('[data-cy="comment-submit"]').click()
     cy.get('[data-cy=update_0]').contains('2 Comments')
-    cy.get('[data-cy="comment"]').last().should('contain', comment)
+    cy.get('[data-cy="CommentItem"]').last().should('contain', comment)
 
     cy.step('Can edit their own comment')
-    cy.get('[data-cy="comment"]')
+    cy.get('[data-cy="CommentItem"]')
       .last()
       .get(`[data-cy="CommentItem: edit button"]`)
       .click()
@@ -57,8 +59,8 @@ describe('[Research.Discussions]', () => {
 
     cy.step('Can add reply')
     cy.get('[data-cy=show-replies]:first').click()
-    cy.get('[data-cy=comments-form]:first').type(reply)
-    cy.get('[data-cy=comment-submit]:first').click()
+    cy.get('[data-cy=reply-form]:first').type(reply)
+    cy.get('[data-cy=reply-submit]:first').click()
     cy.contains(`${discussion.comments.length + 1} Comments`)
     cy.contains(reply)
     cy.queryDocuments('research', '_id', '==', item._id).then((docs) => {
@@ -69,14 +71,14 @@ describe('[Research.Discussions]', () => {
     })
 
     cy.step('Can edit their reply')
-    cy.get('[data-cy="CommentItem: edit button"]:first').click()
+    cy.get('[data-cy="ReplyItem: edit button"]:first').click()
     cy.get('[data-cy=edit-comment]').clear().type(updatedReply)
     cy.get('[data-cy=edit-comment-submit]').click()
     cy.contains(updatedReply)
     cy.contains(reply).should('not.exist')
 
     cy.step('Can delete their reply')
-    cy.get('[data-cy="CommentItem: delete button"]:first').click()
+    cy.get('[data-cy="ReplyItem: delete button"]:first').click()
     cy.get('[data-cy="Confirm.modal: Confirm"]:first').click()
     cy.contains(updatedReply).should('not.exist')
     cy.contains(`1 Comment`)
diff --git a/src/utils/filterNonDeletedComments.test.ts b/src/utils/filterNonDeletedComments.test.ts
index caddfca8ee..ef3bc17ad4 100644
--- a/src/utils/filterNonDeletedComments.test.ts
+++ b/src/utils/filterNonDeletedComments.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest'
+
 import { filterNonDeletedComments } from './filterNonDeletedComments'
 
 import type { IComment } from 'src/models'