diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index abfe25baa9..00a51a52ab 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -92,7 +92,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
                                     <p className="font-sans text-[16px] leading-normal text-neutral-400 italic mt-[4px]">{notPublishedMessage}</p>
                                 </div> :
                                 <div>
-                                    <h4 className="text-[17px] font-sans font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
+                                    <h4 className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23] dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
                                     <div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
                                         {memberBio && <div>{memberBio}<span className="mx-[0.3em]">·</span></div>}
                                         <div title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</div>
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 4de01227fb..6b82ddce94 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -302,6 +302,19 @@ const Form = (props) => {
         editor.commands.focus();
     };
 
+    const handleAddBoth = (event) => {
+        event.preventDefault();
+        setPreventClosing(true);
+
+        dispatchAction('openPopup', {
+            type: 'addDetailsDialog',
+            callback: () => {
+                editor?.commands.focus();
+                setPreventClosing(false);
+            }
+        });
+    };
+
     const handleAddBio = (event) => {
         event.preventDefault();
         setPreventClosing(true);
@@ -409,12 +422,9 @@ const Form = (props) => {
                                 leaveFrom="opacity-100"
                                 leaveTo="opacity-0"
                             >
-                                <h4 className="text-[17px] font-sans font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{memberName ? memberName : 'Anonymous'}</h4>
+                                <button className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23)] hover:text-black dark:text-[rgba(255,255,255,0.85)]" onClick={handleAddBoth}>{memberName ? memberName : 'Anonymous'}</button>
                                 <div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
-                                    {memberBio ?
-                                        <div onClick={handleAddBio}>{memberBio}</div> :
-                                        <button className="transition duration-150 hover:text-neutral-500" onClick={handleAddBio}>Add your bio</button>
-                                    }
+                                    <button className="transition duration-150 hover:text-neutral-500" onClick={memberBio ? handleAddBoth : handleAddBio}>{memberBio ? memberBio : 'Add your bio'}</button>
                                 </div>
                             </Transition>
                         </div>