diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js
index 757bdd49db..b73115dedf 100644
--- a/apps/comments-ui/src/components/AddForm.js
+++ b/apps/comments-ui/src/components/AddForm.js
@@ -56,7 +56,7 @@ const AddForm = (props) => {
         <form onSubmit={submitForm} className="comment-form">
             <div className="w-full">
                 <div className="flex mb-4 space-x-4 justify-start items-center">
-                    <Avatar />
+                    <Avatar saturation={props.avatarSaturation} />
                     <div>
                         <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{member.name ? member.name : 'Anonymous'}</h4>
                         <h6 className="text-[13px] text-neutral-400 font-sans">Now</h6>
diff --git a/apps/comments-ui/src/components/Avatar.js b/apps/comments-ui/src/components/Avatar.js
index f7490f7ef8..7ef4eb0c22 100644
--- a/apps/comments-ui/src/components/Avatar.js
+++ b/apps/comments-ui/src/components/Avatar.js
@@ -25,11 +25,11 @@ class Avatar extends React.Component {
             return [0,0,10];
         }
 
-        const saturation = this.props.saturation ? this.props.saturation : 50;
+        const saturation = isNaN(this.props.saturation) ? 50 : this.props.saturation;
 
         const hRange = [0, 360];
-        const lRangeTop = Math.round(saturation / (100 / 30)) + 20;
-        const lRangeBottom = lRangeTop - 10;
+        const lRangeTop = Math.round(saturation / (100 / 30)) + 30;
+        const lRangeBottom = lRangeTop - 20;
         const lRange = [lRangeBottom, lRangeTop];
 
         const hash = this.getHashOfString(commentMember.name);
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index dde044d6cd..86d6ac311d 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -62,7 +62,7 @@ const Comment = (props) => {
                 }
                 {isInReplyMode &&
                     <div className={`ml-14 mb-10 ${!hasReplies && 'mt-10'}`}>
-                        <ReplyForm parent={comment} toggle={toggleReplyMode} />
+                        <ReplyForm parent={comment} toggle={toggleReplyMode} avatarSaturation={props.avatarSaturation} />
                     </div>
                 }
             </>
diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index 4e01c1f221..1d111fee16 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -58,7 +58,7 @@ class CommentsBox extends React.Component {
                     {comments}
                 </div>
                 <div>
-                    { this.context.member ? <AddForm /> : <NotSignedInBox /> }
+                    { this.context.member ? <AddForm avatarSaturation={this.props.avatarSaturation} /> : <NotSignedInBox /> }
                 </div>
             </section>
         );
diff --git a/apps/comments-ui/src/components/ReplyForm.js b/apps/comments-ui/src/components/ReplyForm.js
index 7e28a96838..a3b49aed84 100644
--- a/apps/comments-ui/src/components/ReplyForm.js
+++ b/apps/comments-ui/src/components/ReplyForm.js
@@ -59,7 +59,7 @@ const ReplyForm = (props) => {
         <form onSubmit={submitForm} className="comment-form mb-4">
             <div className="w-full">
                 <div className="flex mb-4 space-x-4 justify-start items-center">
-                    <Avatar />
+                    <Avatar saturation={props.avatarSaturation} />
                     <div>
                         <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{member.name}</h4>
                         <h6 className="text-[13px] text-neutral-400 font-sans">Now</h6>