diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
index 01ee7aff0370e..fce47e821e206 100644
--- a/packages/editor/src/components/collab-sidebar/add-comment.js
+++ b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -1,22 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	Button,
-	TextControl,
 } from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString } from './utils';
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
 
 /**
  * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
@@ -32,39 +29,14 @@ export function AddComment( {
 	showCommentBoard,
 	setShowCommentBoard,
 } ) {
-	// State to manage the comment thread.
-	const [ inputComment, setInputComment ] = useState( '' );
-
-	const { defaultAvatar, clientId, blockCommentId, currentUser } = useSelect(
-		( select ) => {
-			const { getSettings, getSelectedBlock } =
-				select( blockEditorStore );
-			const { __experimentalDiscussionSettings } = getSettings();
-			const selectedBlock = getSelectedBlock();
-			const userData = select( coreStore ).getCurrentUser();
-			return {
-				defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
-				clientId: selectedBlock?.clientId,
-				blockCommentId: selectedBlock?.attributes?.blockCommentId,
-				currentUser: userData,
-			};
-		},
-		[]
-	);
-
-	const userAvatar =
-		currentUser && currentUser.avatar_urls && currentUser.avatar_urls[ 48 ]
-			? currentUser.avatar_urls[ 48 ]
-			: defaultAvatar;
-
-	useEffect( () => {
-		setInputComment( '' );
-	}, [ clientId ] );
-
-	const handleCancel = () => {
-		setShowCommentBoard( false );
-		setInputComment( '' );
-	};
+	const { clientId, blockCommentId } = useSelect( ( select ) => {
+		const { getSelectedBlock } = select( blockEditorStore );
+		const selectedBlock = getSelectedBlock();
+		return {
+			clientId: selectedBlock?.clientId,
+			blockCommentId: selectedBlock?.attributes?.blockCommentId,
+		};
+	} );
 
 	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
 		return null;
@@ -76,46 +48,17 @@ export function AddComment( {
 			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread"
 		>
 			<HStack alignment="left" spacing="3">
-				<img
-					src={ userAvatar }
-					// translators: alt text for user avatar image
-					alt={ __( 'User Avatar' ) }
-					className="editor-collab-sidebar-panel__user-avatar"
-					width={ 32 }
-					height={ 32 }
-				/>
-				<span className="editor-collab-sidebar-panel__user-name">
-					{ currentUser?.name ?? '' }
-				</span>
+				<CommentAuthorInfo />
 			</HStack>
-			<TextControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				value={ inputComment }
-				onChange={ setInputComment }
-				placeholder={ _x( 'Comment', 'noun' ) }
+			<CommentForm
+				onSubmit={ ( inputComment ) => {
+					onSubmit( inputComment );
+				} }
+				onCancel={ () => {
+					setShowCommentBoard( false );
+				} }
+				submitButtonText={ _x( 'Comment', 'Add comment button' ) }
 			/>
-			<HStack alignment="right" spacing="3">
-				<Button
-					__next40pxDefaultSize
-					variant="tertiary"
-					text={ _x( 'Cancel', 'Cancel comment button' ) }
-					onClick={ handleCancel }
-				/>
-				<Button
-					__next40pxDefaultSize
-					accessibleWhenDisabled
-					variant="primary"
-					text={ _x( 'Comment', 'Add comment button' ) }
-					disabled={
-						0 === sanitizeCommentString( inputComment ).length
-					}
-					onClick={ () => {
-						onSubmit( inputComment );
-						setInputComment( '' );
-					} }
-				/>
-			</HStack>
 		</VStack>
 	);
 }
diff --git a/packages/editor/src/components/collab-sidebar/comment-author-info.js b/packages/editor/src/components/collab-sidebar/comment-author-info.js
new file mode 100644
index 0000000000000..89d09a2b52261
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comment-author-info.js
@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Render author information for a comment.
+ *
+ * @param {Object} props        - Component properties.
+ * @param {string} props.avatar - URL of the author's avatar.
+ * @param {string} props.name   - Name of the author.
+ * @param {string} props.date   - Date of the comment.
+ *
+ * @return {JSX.Element} The JSX element representing the author's information.
+ */
+function CommentAuthorInfo( { avatar, name, date } ) {
+	const dateSettings = getDateSettings();
+	const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
+		'root',
+		'site',
+		'time_format'
+	);
+
+	const { currentUserAvatar, currentUserName } = useSelect( ( select ) => {
+		const userData = select( coreStore ).getCurrentUser();
+
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+		return {
+			currentUserAvatar: userData?.avatar_urls[ 48 ] ?? defaultAvatar,
+			currentUserName: userData?.name,
+		};
+	}, [] );
+
+	const currentDate = new Date();
+
+	return (
+		<>
+			<img
+				src={ avatar ?? currentUserAvatar }
+				className="editor-collab-sidebar-panel__user-avatar"
+				// translators: alt text for user avatar image
+				alt={ __( 'User avatar' ) }
+				width={ 32 }
+				height={ 32 }
+			/>
+			<VStack spacing="0">
+				<span className="editor-collab-sidebar-panel__user-name">
+					{ name ?? currentUserName }
+				</span>
+				<time
+					dateTime={ dateI18n( 'c', date ?? currentDate ) }
+					className="editor-collab-sidebar-panel__user-time"
+				>
+					{ dateI18n( dateTimeFormat, date ?? currentDate ) }
+				</time>
+			</VStack>
+		</>
+	);
+}
+
+export default CommentAuthorInfo;
diff --git a/packages/editor/src/components/collab-sidebar/comment-form.js b/packages/editor/src/components/collab-sidebar/comment-form.js
new file mode 100644
index 0000000000000..28622f9f52a6f
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comment-form.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	Button,
+	TextareaControl,
+} from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { sanitizeCommentString } from './utils';
+
+/**
+ * EditComment component.
+ *
+ * @param {Object}   props                  - The component props.
+ * @param {Function} props.onSubmit         - The function to call when updating the comment.
+ * @param {Function} props.onCancel         - The function to call when canceling the comment update.
+ * @param {Object}   props.thread           - The comment thread object.
+ * @param {string}   props.submitButtonText - The text to display on the submit button.
+ * @return {JSX.Element} The CommentForm component.
+ */
+function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
+	const [ inputComment, setInputComment ] = useState(
+		thread?.content?.raw ?? ''
+	);
+
+	return (
+		<>
+			<TextareaControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				value={ inputComment ?? '' }
+				onChange={ setInputComment }
+			/>
+			<HStack alignment="left" spacing="3" justify="flex-start">
+				<Button
+					__next40pxDefaultSize
+					accessibleWhenDisabled
+					variant="primary"
+					onClick={ () => onSubmit( inputComment ) }
+					disabled={
+						0 === sanitizeCommentString( inputComment ).length
+					}
+					text={ submitButtonText }
+				/>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ onCancel }
+					text={ _x( 'Cancel', 'Cancel comment button' ) }
+				/>
+			</HStack>
+		</>
+	);
+}
+
+export default CommentForm;
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index c0b4bd3d4dc38..808ea0acf04b3 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -13,24 +13,18 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	Button,
 	DropdownMenu,
-	TextareaControl,
 	Tooltip,
 } from '@wordpress/components';
-import {
-	dateI18n,
-	format,
-	getSettings as getDateSettings,
-} from '@wordpress/date';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString } from './utils';
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
 
 /**
  * Renders the Comments component.
@@ -127,6 +121,7 @@ export function Comments( {
 									} }
 									onCancel={ () => setActionState( false ) }
 									thread={ thread }
+									submitButtonText={ _x( 'Update', 'verb' ) }
 								/>
 							) }
 						{ ( ! actionState ||
@@ -209,14 +204,33 @@ export function Comments( {
 						spacing="3"
 					>
 						<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 && (
-								<HStack
-									alignment="left"
-									spacing="3"
-									justify="flex-start"
-									className="editor-collab-sidebar-panel__user-comment"
+								<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"
@@ -232,75 +246,20 @@ export function Comments( {
 											onCancel={ () =>
 												setActionState( false )
 											}
+											submitButtonText={ _x(
+												'Reply',
+												'Add reply comment'
+											) }
 										/>
 									</VStack>
-								</HStack>
-							) }
-						{ 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>
-							) ) }
+							) }
 					</VStack>
 				) ) }
 		</>
 	);
 }
 
-/**
- * EditComment component.
- *
- * @param {Object}   props          - The component props.
- * @param {Function} props.onSubmit - The function to call when updating the comment.
- * @param {Function} props.onCancel - The function to call when canceling the comment update.
- * @param {Object}   props.thread   - The comment thread object.
- * @return {JSX.Element} The CommentForm component.
- */
-function CommentForm( { onSubmit, onCancel, thread } ) {
-	const [ inputComment, setInputComment ] = useState(
-		thread?.content?.raw ?? ''
-	);
-
-	return (
-		<>
-			<TextareaControl
-				__nextHasNoMarginBottom
-				value={ inputComment ?? '' }
-				onChange={ setInputComment }
-			/>
-			<VStack alignment="left" spacing="3" justify="flex-start">
-				<HStack alignment="left" spacing="3" justify="flex-start">
-					<Button
-						__next40pxDefaultSize
-						accessibleWhenDisabled
-						variant="primary"
-						onClick={ () => onSubmit( inputComment ) }
-						disabled={
-							0 === sanitizeCommentString( inputComment ).length
-						}
-					>
-						{ thread
-							? _x( 'Update', 'verb' )
-							: _x( 'Reply', 'Add reply comment' ) }
-					</Button>
-					<Button __next40pxDefaultSize onClick={ onCancel }>
-						{ _x( 'Cancel', 'Cancel comment edit' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		</>
-	);
-}
-
 /**
  * Renders the header of a comment in the collaboration sidebar.
  *
@@ -321,13 +280,6 @@ function CommentHeader( {
 	onReply,
 	status,
 } ) {
-	const dateSettings = getDateSettings();
-	const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
-		'root',
-		'site',
-		'time_format'
-	);
-
 	const actions = [
 		{
 			title: _x( 'Edit', 'Edit comment' ),
@@ -347,29 +299,15 @@ function CommentHeader( {
 
 	return (
 		<HStack alignment="left" spacing="3" justify="flex-start">
-			<img
-				src={ thread?.author_avatar_urls?.[ 48 ] }
-				className="editor-collab-sidebar-panel__user-avatar"
-				// translators: alt text for user avatar image
-				alt={ __( 'User avatar' ) }
-				width={ 32 }
-				height={ 32 }
+			<CommentAuthorInfo
+				avatar={ thread?.author_avatar_urls?.[ 48 ] }
+				name={ thread?.author_name }
+				date={ thread?.date }
 			/>
-			<VStack spacing="0">
-				<span className="editor-collab-sidebar-panel__user-name">
-					{ thread.author_name }
-				</span>
-				<time
-					dateTime={ format( 'h:i A', thread.date ) }
-					className="editor-collab-sidebar-panel__user-time"
-				>
-					{ dateI18n( dateTimeFormat, thread.date ) }
-				</time>
-			</VStack>
 			<span className="editor-collab-sidebar-panel__comment-status">
 				{ status !== 'approved' && (
 					<HStack alignment="right" justify="flex-end" spacing="0">
-						{ 0 === thread.parent && onResolve && (
+						{ 0 === thread?.parent && onResolve && (
 							<Button
 								label={ _x(
 									'Resolve',