diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 582a08ebd3..8421dcbf5a 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -423,7 +423,7 @@ const Form = (props) => {
                                             handleShowDialog(event, {
                                                 bioAutofocus: true
                                             });
-                                        }}>{memberBio ? memberBio : 'Add your bio'}
+                                        }}>{memberBio ? memberBio : 'Add your expertise'}
                                         {memberBio && <EditIcon className="transition-all duration-100 ease-out opacity-0 -translate-x-[6px] group-hover:opacity-100 group-hover:translate-x-0 w-[12px] h-[12px] stroke-neutral-500 ml-1" />}
                                     </button>
                                 </div>
diff --git a/apps/comments-ui/src/components/modals/AddDetailsDialog.js b/apps/comments-ui/src/components/modals/AddDetailsDialog.js
index 0704c7667a..948f8ebd47 100644
--- a/apps/comments-ui/src/components/modals/AddDetailsDialog.js
+++ b/apps/comments-ui/src/components/modals/AddDetailsDialog.js
@@ -11,6 +11,9 @@ const AddNameDialog = (props) => {
     const [name, setName] = useState(member.name ?? '');
     const [bio, setBio] = useState(member.bio ?? '');
 
+    const [exampleProfiles, setExampleProfiles] = useState([]);
+    const [exampleExpertise, setExampleExpertise] = useState('Head of Marketing');
+
     const maxBioChars = 50;
     let initialBioChars = maxBioChars;
     if (member.bio) {
@@ -20,6 +23,10 @@ const AddNameDialog = (props) => {
 
     const [error, setError] = useState({name: '', bio: ''});
 
+    const stopPropagation = (event) => {
+        event.stopPropagation();
+    };
+
     const close = (succeeded) => {
         dispatchAction('closePopup');
         props.callback(succeeded);
@@ -39,8 +46,49 @@ const AddNameDialog = (props) => {
         }
     };
 
+    const generateExampleProfiles = () => {
+        let returnable = [];
+        let dummyData = [
+            {avatar: 'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80', name: 'Sophie Joan', expertise: 'Freelance Writer'},
+            {avatar: 'https://images.unsplash.com/photo-1569913486515-b74bf7751574?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1289&q=80', name: 'Naomi Schiff', expertise: 'Founder @ Acme Inc'},
+            {avatar: 'https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2667&q=80', name: 'Katrina Klosp', expertise: 'Local Resident'},
+            {avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80', name: 'Laura Smith', expertise: 'Craft Maker'},
+            {avatar: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80', name: 'Peter Kristy', expertise: 'Design Consultant'},
+            {avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1364&q=80', name: 'Linda Lo', expertise: 'Wedding Photographer'},
+            {avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80', name: 'Darren Mckenzie', expertise: 'Senior Engineer'},
+            {avatar: 'https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80', name: 'Jack Tomlin', expertise: 'Mid-level UX Designer'}
+        ];
+
+        // setup fake users
+        for (let i = 0; i < 4; i++) {
+            let dummyIndex = Math.floor(Math.random() * dummyData.length);
+            returnable.push(dummyData[dummyIndex]);
+            dummyData.splice(dummyIndex, 1);
+        }
+
+        return returnable;
+    };
+
+    const generateExampleExpertise = () => {
+        let dummyData = [
+            'Freelance Copywriter',
+            'Head of Marketing',
+            'Junior Developer',
+            'Full-time Parent',
+            'Local Resident',
+            'English Teacher',
+            'Support Officer',
+            'Professional Athlete'
+        ];
+
+        return dummyData[Math.floor(Math.random() * dummyData.length)];
+    };
+
     // using <input autofocus> breaks transitions in browsers. So we need to use a timer
     useEffect(() => {
+        setExampleProfiles(generateExampleProfiles());
+        setExampleExpertise(generateExampleExpertise());
+
         const timer = setTimeout(() => {
             if (props.bioAutofocus) {
                 inputBioRef.current?.focus();
@@ -52,80 +100,122 @@ const AddNameDialog = (props) => {
         return () => {
             clearTimeout(timer);
         };
-    }, [inputNameRef]);
+    }, [inputNameRef, inputBioRef]);
+
+    const renderExampleProfile = (index) => {
+        return (exampleProfiles[index] ? 
+            <Transition
+                appear
+                enter={`transition duration-200 delay-[400ms] ease-out`}
+                enterFrom="opacity-0 translate-y-2"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition duration-200 ease-in"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-2"
+            >
+                <div className="flex flex-row justify-start items-center gap-3 my-4 pr-4">
+                    <div className="w-10 h-10 rounded-full border-2 border-white bg-no-repeat bg-cover" style={{backgroundImage: `url(${exampleProfiles[index].avatar})`}} />
+                    <div className="flex flex-col justify-center items-start">
+                        <div className="text-base font-sans font-semibold tracking-tight text-white">
+                            {exampleProfiles[index].name}
+                        </div>
+                        <div className="font-sans text-[14px] tracking-tight text-neutral-400">
+                            {exampleProfiles[index].expertise}
+                        </div>
+                    </div>
+                </div>
+            </Transition> : null
+        );
+    };
 
     return (
-        <>
-            <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add to your profile</h1>
-            <p className="font-sans text-[1.45rem] text-neutral-500 px-4 sm:px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
-            <section className="mt-8 text-left">
-                <div className="flex flex-row mb-2 justify-between">
-                    <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
-                    <Transition
-                        show={!!error.name}
-                        enter="transition duration-300 ease-out"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="transition duration-100 ease-out"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <div className="font-sans text-sm text-red-500">{error.name}</div>
-                    </Transition>
+        <div className="overflow-hidden relative bg-white w-screen sm:w-[720px] h-screen sm:h-auto p-[28px] sm:p-0 rounded-none sm:rounded-xl text-center shadow-modal" onClick={stopPropagation}>
+            <div className="flex">
+                <div className="flex flex-col justify-center items-center w-[40%] bg-[#1C1C1C]">
+                    <div className="flex flex-col">
+                        {exampleProfiles.length > 0 && (
+                            <>
+                                <span>{renderExampleProfile(0)}</span>
+                                <span>{renderExampleProfile(1)}</span>
+                                <span>{renderExampleProfile(2)}</span>
+                                <span>{renderExampleProfile(3)}</span>
+                            </>
+                        )}
+                    </div>
                 </div>
-                <input
-                    id="comments-name"
-                    className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${error.name && 'border-red-500 focus:border-red-500'}`}
-                    type="text"
-                    name="name"
-                    ref={inputNameRef}
-                    value={name}
-                    placeholder="Jamie Larson"
-                    onChange={(e) => {
-                        setName(e.target.value);
-                    }}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                            setName(e.target.value);
-                            submit();
-                        }
-                    }}
-                    maxLength="64"
-                />
-                <div className="flex flex-row mt-4 mb-2 justify-between">
-                    <label htmlFor="comments-name" className="font-sans font-medium text-sm">Bio</label>
-                    <div className={`font-sans text-sm text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>
+                <div className="w-[60%] p-8">
+                    <h1 className="font-sans font-bold tracking-tight text-[24px] mb-1 text-black text-left">Complete your profile.</h1>
+                    <p className="font-sans text-base text-neutral-500 pr-4 sm:pr-10 leading-9 text-left">Add context to your comment, share your name and expertise to foster a healthy discussion.</p>
+                    <section className="mt-8 text-left">
+                        <div className="flex flex-row mb-2 justify-between">
+                            <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
+                            <Transition
+                                show={!!error.name}
+                                enter="transition duration-300 ease-out"
+                                enterFrom="opacity-0"
+                                enterTo="opacity-100"
+                                leave="transition duration-100 ease-out"
+                                leaveFrom="opacity-100"
+                                leaveTo="opacity-0"
+                            >
+                                <div className="font-sans text-sm text-red-500">{error.name}</div>
+                            </Transition>
+                        </div>
+                        <input
+                            id="comments-name"
+                            className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${error.name && 'border-red-500 focus:border-red-500'}`}
+                            type="text"
+                            name="name"
+                            ref={inputNameRef}
+                            value={name}
+                            placeholder="Jamie Larson"
+                            onChange={(e) => {
+                                setName(e.target.value);
+                            }}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    setName(e.target.value);
+                                    submit();
+                                }
+                            }}
+                            maxLength="64"
+                        />
+                        <div className="flex flex-row mt-6 mb-2 justify-between">
+                            <label htmlFor="comments-name" className="font-sans font-medium text-sm">Expertise</label>
+                            <div className={`font-sans text-sm text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>
+                        </div>
+                        <input
+                            id="comments-bio"
+                            className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${(bioCharsLeft === 0) && 'border-red-500 focus:border-red-500'}`}
+                            type="text"
+                            name="bio"
+                            ref={inputBioRef}
+                            value={bio}
+                            placeholder={exampleExpertise}
+                            onChange={(e) => {
+                                let bioText = e.target.value;
+                                setBioCharsLeft(maxBioChars - bioText.length);
+                                setBio(bioText);
+                            }}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    setBio(e.target.value);
+                                    submit();
+                                }
+                            }}
+                            maxLength={maxBioChars}
+                        />
+                        <button
+                            className="transition-opacity duration-200 ease-linear w-full h-[44px] mt-8 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-[#3204F5] opacity-100 hover:opacity-90"
+                            onClick={submit}
+                        >
+                            Save
+                        </button>
+                    </section>
                 </div>
-                <input
-                    id="comments-bio"
-                    className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${(bioCharsLeft === 0) && 'border-red-500 focus:border-red-500'}`}
-                    type="text"
-                    name="bio"
-                    ref={inputBioRef}
-                    value={bio}
-                    placeholder="Head of Marketing at Acme, Inc"
-                    onChange={(e) => {
-                        let bioText = e.target.value;
-                        setBioCharsLeft(maxBioChars - bioText.length);
-                        setBio(bioText);
-                    }}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                            setBio(e.target.value);
-                            submit();
-                        }
-                    }}
-                    maxLength={maxBioChars}
-                />
-                <button
-                    className="transition-opacity duration-200 ease-linear w-full h-[44px] mt-8 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-[#3204F5] opacity-100 hover:opacity-90"
-                    onClick={submit}
-                >
-                    Save
-                </button>
-            </section>
-            <CloseButton close={() => close(false)} />
-        </>
+                <CloseButton close={() => close(false)} />
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/comments-ui/src/components/modals/CloseButton.js b/apps/comments-ui/src/components/modals/CloseButton.js
index 8c8afbe2d4..059f29b317 100644
--- a/apps/comments-ui/src/components/modals/CloseButton.js
+++ b/apps/comments-ui/src/components/modals/CloseButton.js
@@ -3,7 +3,7 @@ import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
 
 const CloseButton = (props) => {
     return (
-        <button className="transition-opacity duration-100 ease-out absolute top-[36px] sm:top-10 right-8 sm:right-10 opacity-20 hover:opacity-40" onClick={props.close}>
+        <button className="transition-opacity duration-100 ease-out absolute top-[36px] sm:top-10 right-8 sm:right-8 opacity-20 hover:opacity-40" onClick={props.close}>
             <CloseIcon className="w-[20px] h-[20px]" />
         </button>
     );
diff --git a/apps/comments-ui/src/components/modals/GenericDialog.js b/apps/comments-ui/src/components/modals/GenericDialog.js
index 50b5e6a4c6..a81ba3d00c 100644
--- a/apps/comments-ui/src/components/modals/GenericDialog.js
+++ b/apps/comments-ui/src/components/modals/GenericDialog.js
@@ -14,10 +14,6 @@ const GenericDialog = (props) => {
         }
     };
 
-    const stopPropagation = (event) => {
-        event.stopPropagation();
-    };
-
     useEffect(() => {
         const listener = (event) => {
             if (event.key === 'Escape') {
@@ -52,9 +48,7 @@ const GenericDialog = (props) => {
                                 leaveFrom="translate-y-0 opacity-100"
                                 leaveTo="translate-y-4 opacity-0"
                             >
-                                <div className="relative bg-white w-screen sm:w-[500px] h-screen sm:h-auto p-[28px] sm:p-8 rounded-none sm:rounded-xl text-center shadow-modal" onClick={stopPropagation}>
-                                    {props.children}
-                                </div>
+                                {props.children}
                             </Transition.Child>
                         </div>
                     </Transition.Child>
diff --git a/apps/comments-ui/src/components/modals/ReportDialog.js b/apps/comments-ui/src/components/modals/ReportDialog.js
index fa4846bf0c..48ada84410 100644
--- a/apps/comments-ui/src/components/modals/ReportDialog.js
+++ b/apps/comments-ui/src/components/modals/ReportDialog.js
@@ -27,6 +27,10 @@ const ReportDialog = (props) => {
 
     const {dispatchAction} = useContext(AppContext);
 
+    const stopPropagation = (event) => {
+        event.stopPropagation();
+    };
+
     const close = (event) => {
         dispatchAction('closePopup');
     };
@@ -48,7 +52,7 @@ const ReportDialog = (props) => {
     };
 
     return (
-        <>
+        <div className="relative bg-white w-screen sm:w-[500px] h-screen sm:h-auto p-[28px] sm:p-8 rounded-none sm:rounded-xl text-center shadow-modal" onClick={stopPropagation}>
             <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">You sure you want to report?</h1>
             <p className="font-sans text-[1.45rem] text-neutral-500">You request will be sent to the owner of this site.</p>
             <div className="mt-10">
@@ -60,7 +64,7 @@ const ReportDialog = (props) => {
                 </button>
                 <p className="font-sans font-medium text-[1.45rem] text-neutral-500 mt-4 -mb-1">No, <button className="font-sans underline" onClick={close}>I've changed my mind</button></p>
             </div>
-        </>
+        </div>
     );
 };