diff --git a/packages/editor/src/components/collab-sidebar/comment-form.js b/packages/editor/src/components/collab-sidebar/comment-form.js
index 052fd3cdd2656..bd139a682f5cb 100644
--- a/packages/editor/src/components/collab-sidebar/comment-form.js
+++ b/packages/editor/src/components/collab-sidebar/comment-form.js
@@ -42,7 +42,10 @@ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
 					__next40pxDefaultSize
 					accessibleWhenDisabled
 					variant="primary"
-					onClick={ () => onSubmit( inputComment ) }
+					onClick={ () => {
+						onSubmit( inputComment );
+						setInputComment( '' );
+					} }
 					disabled={
 						0 === sanitizeCommentString( inputComment ).length
 					}
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index 7a03068787c81..f5d95621cb250 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML } from '@wordpress/element';
+import { useState, RawHTML, useEffect } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -16,7 +16,7 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -44,25 +44,7 @@ export function Comments( {
 	onCommentDelete,
 	onCommentResolve,
 } ) {
-	const [ actionState, setActionState ] = useState( false );
-	const [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );
-
-	const handleConfirmDelete = () => {
-		onCommentDelete( actionState.id );
-		setActionState( false );
-		setIsConfirmDialogOpen( false );
-	};
-
-	const handleConfirmResolve = () => {
-		onCommentResolve( actionState.id );
-		setActionState( false );
-		setIsConfirmDialogOpen( false );
-	};
-
-	const handleCancelDelete = () => {
-		setActionState( false );
-		setIsConfirmDialogOpen( false );
-	};
+	const [ focusThread, setFocusThread ] = useState( null );
 
 	const blockCommentId = useSelect( ( select ) => {
 		const clientID = select( blockEditorStore ).getSelectedBlockClientId();
@@ -72,101 +54,11 @@ export function Comments( {
 		);
 	}, [] );
 
-	const CommentBoard = ( { thread, parentThread } ) => {
-		return (
-			<>
-				<CommentHeader
-					thread={ thread }
-					onResolve={ () => {
-						setActionState( {
-							action: 'resolve',
-							id: parentThread?.id ?? thread.id,
-						} );
-						setIsConfirmDialogOpen( true );
-					} }
-					onEdit={ () =>
-						setActionState( { action: 'edit', id: thread.id } )
-					}
-					onDelete={ () => {
-						setActionState( { action: 'delete', id: thread.id } );
-						setIsConfirmDialogOpen( true );
-					} }
-					onReply={
-						! parentThread
-							? () =>
-									setActionState( {
-										action: 'reply',
-										id: thread.id,
-									} )
-							: undefined
-					}
-					status={ parentThread?.status ?? thread.status }
-				/>
-				<HStack
-					alignment="left"
-					spacing="3"
-					justify="flex-start"
-					className="editor-collab-sidebar-panel__user-comment"
-				>
-					<VStack
-						spacing="3"
-						className="editor-collab-sidebar-panel__comment-field"
-					>
-						{ 'edit' === actionState?.action &&
-							thread.id === actionState?.id && (
-								<CommentForm
-									onSubmit={ ( value ) => {
-										onEditComment( thread.id, value );
-										setActionState( false );
-									} }
-									onCancel={ () => setActionState( false ) }
-									thread={ thread }
-									submitButtonText={ _x( 'Update', 'verb' ) }
-								/>
-							) }
-						{ ( ! actionState ||
-							'edit' !== actionState?.action ) && (
-							<RawHTML>{ thread?.content?.raw }</RawHTML>
-						) }
-					</VStack>
-				</HStack>
-				{ 'resolve' === actionState?.action &&
-					thread.id === actionState?.id && (
-						<ConfirmDialog
-							isOpen={ isConfirmDialogOpen }
-							onConfirm={ handleConfirmResolve }
-							onCancel={ handleCancelDelete }
-							confirmButtonText="Yes"
-							cancelButtonText="No"
-						>
-							{
-								// translators: message displayed when confirming an action
-								__(
-									'Are you sure you want to mark this comment as resolved?'
-								)
-							}
-						</ConfirmDialog>
-					) }
-				{ 'delete' === actionState?.action &&
-					thread.id === actionState?.id && (
-						<ConfirmDialog
-							isOpen={ isConfirmDialogOpen }
-							onConfirm={ handleConfirmDelete }
-							onCancel={ handleCancelDelete }
-							confirmButtonText="Yes"
-							cancelButtonText="No"
-						>
-							{
-								// translators: message displayed when confirming an action
-								__(
-									'Are you sure you want to delete this comment?'
-								)
-							}
-						</ConfirmDialog>
-					) }
-			</>
-		);
-	};
+	useEffect( () => {
+		if ( blockCommentId ) {
+			setFocusThread( blockCommentId );
+		}
+	}, [ blockCommentId ] );
 
 	return (
 		<>
@@ -186,7 +78,6 @@ export function Comments( {
 					</VStack>
 				)
 			}
-
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
 				threads.map( ( thread ) => (
@@ -196,98 +87,157 @@ export function Comments( {
 							'editor-collab-sidebar-panel__thread',
 							{
 								'editor-collab-sidebar-panel__active-thread':
-									blockCommentId &&
-									blockCommentId === thread.id,
+									focusThread && focusThread === thread.id,
 							}
 						) }
 						id={ thread.id }
 						spacing="3"
+						onClick={ () => setFocusThread( thread.id ) }
 					>
-						<CommentBoard thread={ thread } />
-						{ 0 < thread?.reply?.length &&
-							thread.reply.map( ( reply ) => (
-								<VStack
-									key={ reply.id }
-									className="editor-collab-sidebar-panel__child-thread"
-									id={ reply.id }
-									spacing="2"
-								>
-									<CommentBoard
-										thread={ reply }
-										parentThread={ thread }
-									/>
-								</VStack>
-							) ) }
-						{ 'reply' === actionState?.action &&
-							thread.id === actionState?.id && (
-								<VStack
-									className="editor-collab-sidebar-panel__child-thread"
-									spacing="2"
-								>
-									<HStack
-										alignment="left"
-										spacing="3"
-										justify="flex-start"
-									>
-										<CommentAuthorInfo />
-									</HStack>
-									<VStack
-										spacing="3"
-										className="editor-collab-sidebar-panel__comment-field"
-									>
-										<CommentForm
-											onSubmit={ ( inputComment ) => {
-												onAddReply(
-													inputComment,
-													thread.id
-												);
-												setActionState( false );
-											} }
-											onCancel={ () =>
-												setActionState( false )
-											}
-											submitButtonText={ _x(
-												'Reply',
-												'Add reply comment'
-											) }
-										/>
-									</VStack>
-								</VStack>
-							) }
+						<Thread
+							thread={ thread }
+							onAddReply={ onAddReply }
+							onCommentDelete={ onCommentDelete }
+							onCommentResolve={ onCommentResolve }
+							onEditComment={ onEditComment }
+						/>
 					</VStack>
 				) ) }
 		</>
 	);
 }
 
-/**
- * Renders the header of a comment in the collaboration sidebar.
- *
- * @param {Object}   props           - The component props.
- * @param {Object}   props.thread    - The comment thread object.
- * @param {Function} props.onResolve - The function to resolve the comment.
- * @param {Function} props.onEdit    - The function to edit the comment.
- * @param {Function} props.onDelete  - The function to delete the comment.
- * @param {Function} props.onReply   - The function to reply to the comment.
- * @param {string}   props.status    - The status of the comment.
- * @return {React.ReactNode} The rendered comment header.
- */
-function CommentHeader( {
+function Thread( {
+	thread,
+	onEditComment,
+	onAddReply,
+	onCommentDelete,
+	onCommentResolve,
+} ) {
+	const [ showMoreReply, setShowMoreReply ] = useState( false );
+	const [ showReplyInput, setShowReplyInput ] = useState( false );
+
+	const handleReply = () => {
+		setShowReplyInput( true );
+	};
+
+	return (
+		<>
+			<CommentBoard
+				thread={ thread }
+				onResolve={ onCommentResolve }
+				onEdit={ onEditComment }
+				onDelete={ onCommentDelete }
+				onReply={ handleReply }
+				status={ thread.status }
+			/>
+			{ 0 < thread?.reply?.length && (
+				<>
+					{ ! showMoreReply && (
+						<Button
+							__next40pxDefaultSize
+							className="editor-collab-sidebar-panel__show-more-reply"
+							onClick={ () => setShowMoreReply( true ) }
+							size="small"
+						>
+							{ sprintf(
+								// translators: 1: number of replies.
+								_x(
+									'%s more replies..',
+									'Show replies button'
+								),
+								thread?.reply?.length
+							) }
+						</Button>
+					) }
+
+					{ showMoreReply &&
+						thread.reply.map( ( reply ) => (
+							<VStack
+								key={ reply.id }
+								className="editor-collab-sidebar-panel__child-thread"
+								id={ reply.id }
+								spacing="2"
+							>
+								<CommentBoard
+									thread={ thread }
+									onEdit={ onEditComment }
+									onDelete={ onCommentDelete }
+								/>
+							</VStack>
+						) ) }
+				</>
+			) }
+			{ 'approved' !== thread.status && showReplyInput && (
+				<VStack
+					className="editor-collab-sidebar-panel__child-thread"
+					spacing="2"
+				>
+					<HStack alignment="left" spacing="3" justify="flex-start">
+						<CommentAuthorInfo />
+					</HStack>
+					<VStack
+						spacing="3"
+						className="editor-collab-sidebar-panel__comment-field"
+					>
+						<CommentForm
+							onSubmit={ ( inputComment ) => {
+								onAddReply( inputComment, thread.id );
+							} }
+							onCancel={ () => setShowReplyInput( false ) }
+							submitButtonText={ _x(
+								'Reply',
+								'Add reply comment'
+							) }
+						/>
+					</VStack>
+				</VStack>
+			) }
+		</>
+	);
+}
+
+const CommentBoard = ( {
 	thread,
 	onResolve,
 	onEdit,
 	onDelete,
 	onReply,
 	status,
-} ) {
+} ) => {
+	const [ actionState, setActionState ] = useState( false );
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
+
+	const handleConfirmDelete = () => {
+		onDelete( thread.id );
+		setActionState( false );
+		setShowConfirmDialog( false );
+	};
+
+	const handleConfirmResolve = () => {
+		onResolve( thread.id );
+		setActionState( false );
+		setShowConfirmDialog( false );
+	};
+
+	const handleCancel = () => {
+		setActionState( false );
+		setShowConfirmDialog( false );
+	};
+
 	const actions = [
 		{
 			title: _x( 'Edit', 'Edit comment' ),
-			onClick: onEdit,
+			onClick: () => {
+				setActionState( 'edit' );
+			},
 		},
 		{
 			title: _x( 'Delete', 'Delete comment' ),
-			onClick: onDelete,
+			onClick: () => {
+				setActionState( 'delete' );
+				setShowConfirmDialog( true );
+			},
 		},
 		{
 			title: _x( 'Reply', 'Reply on a comment' ),
@@ -298,45 +248,110 @@ function CommentHeader( {
 	const moreActions = actions.filter( ( item ) => item.onClick );
 
 	return (
-		<HStack alignment="left" spacing="3" justify="flex-start">
-			<CommentAuthorInfo
-				avatar={ thread?.author_avatar_urls?.[ 48 ] }
-				name={ thread?.author_name }
-				date={ thread?.date }
-			/>
-			<span className="editor-collab-sidebar-panel__comment-status">
-				{ status !== 'approved' && (
-					<HStack alignment="right" justify="flex-end" spacing="0">
-						{ 0 === thread?.parent && onResolve && (
-							<Button
+		<>
+			<HStack alignment="left" spacing="3" justify="flex-start">
+				<CommentAuthorInfo
+					avatar={ thread?.author_avatar_urls?.[ 48 ] }
+					name={ thread?.author_name }
+					date={ thread?.date }
+				/>
+				<span className="editor-collab-sidebar-panel__comment-status">
+					{ status !== 'approved' && (
+						<HStack
+							alignment="right"
+							justify="flex-end"
+							spacing="0"
+						>
+							{ 0 === thread?.parent && onResolve && (
+								<Button
+									label={ _x(
+										'Resolve',
+										'Mark comment as resolved'
+									) }
+									__next40pxDefaultSize
+									icon={ published }
+									onClick={ () => {
+										setActionState( 'resolve' );
+										setShowConfirmDialog( true );
+									} }
+									showTooltip
+								/>
+							) }
+							<DropdownMenu
+								icon={ moreVertical }
 								label={ _x(
-									'Resolve',
-									'Mark comment as resolved'
+									'Select an action',
+									'Select comment action'
 								) }
-								__next40pxDefaultSize
-								icon={ published }
-								onClick={ onResolve }
-								showTooltip
+								className="editor-collab-sidebar-panel__comment-dropdown-menu"
+								controls={ moreActions }
 							/>
-						) }
-						<DropdownMenu
-							icon={ moreVertical }
-							label={ _x(
-								'Select an action',
-								'Select comment action'
-							) }
-							className="editor-collab-sidebar-panel__comment-dropdown-menu"
-							controls={ moreActions }
+						</HStack>
+					) }
+					{ status === 'approved' && (
+						// translators: tooltip for resolved comment
+						<Tooltip text={ __( 'Resolved' ) }>
+							<Icon icon={ check } />
+						</Tooltip>
+					) }
+				</span>
+			</HStack>
+			<HStack
+				alignment="left"
+				spacing="3"
+				justify="flex-start"
+				className="editor-collab-sidebar-panel__user-comment"
+			>
+				<VStack
+					spacing="3"
+					className="editor-collab-sidebar-panel__comment-field"
+				>
+					{ 'edit' === actionState && (
+						<CommentForm
+							onSubmit={ ( value ) => {
+								onEdit( thread.id, value );
+								setActionState( false );
+							} }
+							onCancel={ () => handleCancel() }
+							thread={ thread }
+							submitButtonText={ _x( 'Update', 'verb' ) }
 						/>
-					</HStack>
-				) }
-				{ status === 'approved' && (
-					// translators: tooltip for resolved comment
-					<Tooltip text={ __( 'Resolved' ) }>
-						<Icon icon={ check } />
-					</Tooltip>
-				) }
-			</span>
-		</HStack>
+					) }
+					{ 'edit' !== actionState && (
+						<RawHTML>{ thread?.content?.raw }</RawHTML>
+					) }
+				</VStack>
+			</HStack>
+			{ 'resolve' === actionState && (
+				<ConfirmDialog
+					isOpen={ showConfirmDialog }
+					onConfirm={ handleConfirmResolve }
+					onCancel={ handleCancel }
+					confirmButtonText="Yes"
+					cancelButtonText="No"
+				>
+					{
+						// translators: message displayed when confirming an action
+						__(
+							'Are you sure you want to mark this comment as resolved?'
+						)
+					}
+				</ConfirmDialog>
+			) }
+			{ 'delete' === actionState && (
+				<ConfirmDialog
+					isOpen={ showConfirmDialog }
+					onConfirm={ handleConfirmDelete }
+					onCancel={ handleCancel }
+					confirmButtonText="Yes"
+					cancelButtonText="No"
+				>
+					{
+						// translators: message displayed when confirming an action
+						__( 'Are you sure you want to delete this comment?' )
+					}
+				</ConfirmDialog>
+			) }
+		</>
 	);
-}
+};
diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
index 2f937e3df9a25..493fc98e1491b 100644
--- a/packages/editor/src/components/collab-sidebar/style.scss
+++ b/packages/editor/src/components/collab-sidebar/style.scss
@@ -108,4 +108,8 @@
 		}
 	}
 
+	&__show-more-reply {
+		font-weight: bold;
+		padding: 0;
+	}
 }