diff --git a/apps/comments-ui/src/components/content/Avatar.js b/apps/comments-ui/src/components/content/Avatar.js
index 84a1e4be2f..0fa4a13f33 100644
--- a/apps/comments-ui/src/components/content/Avatar.js
+++ b/apps/comments-ui/src/components/content/Avatar.js
@@ -11,8 +11,8 @@ export const BlankAvatar = () => {
     const dimensionClasses = getDimensionClasses();
     return (
         <figure className={`relative ${dimensionClasses}`}>
-            <div className={`flex items-center justify-center rounded-full bg-[rgba(200,200,200,0.3)] ${dimensionClasses}`}>
-                <AvatarIcon className="stroke-white dark:opacity-70" />
+            <div className={`flex items-center justify-center rounded-full bg-[rgba(0,0,0,0.085)] dark:bg-[rgba(255,255,255,0.15)] ${dimensionClasses}`}>
+                <AvatarIcon className="stroke-white opacity-80" />
             </div>
         </figure>
     );
diff --git a/apps/comments-ui/src/components/content/CTABox.js b/apps/comments-ui/src/components/content/CTABox.js
index 12b78f9560..8ab3ef6f6d 100644
--- a/apps/comments-ui/src/components/content/CTABox.js
+++ b/apps/comments-ui/src/components/content/CTABox.js
@@ -23,7 +23,7 @@ const CTABox = ({isFirst, isPaid}) => {
     };
 
     return (
-        <section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} border-y-2 border-gray-100 px-2 dark:border-gray-100/10 sm:px-8`}>
+        <section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} border-y-2 border-[rgba(0,0,0,0.075)] dark:border-[rgba(255,255,255,0.1)] sm:px-8`}>
             <h1 className={`mb-[8px] text-center font-sans text-[24px] tracking-tight  text-black dark:text-[rgba(255,255,255,0.85)] ${isFirst ? 'font-semibold' : 'font-bold'}`}>
                 {titleText}
             </h1>
@@ -33,7 +33,7 @@ const CTABox = ({isFirst, isPaid}) => {
             <button onClick={handleSignUpClick} className="font-san mb-[12px] inline-block rounded py-[14px] px-5 font-medium leading-none text-white transition-all hover:opacity-90" style={buttonStyle}>
                 {(isPaid && member) ? 'Upgrade now' : 'Sign up now'}
             </button>
-            {!member && (<p className="text-center font-sans text-sm text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
+            {!member && (<p className="text-center font-sans text-sm text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">
                 <span className='mr-1 inline-block text-[15px]'>Already a member?</span>
                 <button onClick={handleSignInClick} className="rounded-md text-sm font-semibold transition-all hover:opacity-90" style={linkStyle}>Sign in</button>
             </p>)}
diff --git a/apps/comments-ui/src/components/content/Comment.js b/apps/comments-ui/src/components/content/Comment.js
index 54990bd9a8..cc55fc00e3 100644
--- a/apps/comments-ui/src/components/content/Comment.js
+++ b/apps/comments-ui/src/components/content/Comment.js
@@ -105,7 +105,7 @@ function UnpublishedComment({comment, openEditMode}) {
         <CommentLayout hasReplies={hasReplies} avatar={avatar}>
             <div className="-mt-[3px] mb-2 flex items-start">
                 <div className="flex h-12 flex-row items-center gap-4 pb-[8px] pr-4">
-                    <p className="mt-[4px] font-sans text-[16px] italic leading-normal text-neutral-300 dark:text-[rgba(255,255,255,0.5)]">{notPublishedMessage}</p>
+                    <p className="mt-[4px] font-sans text-[16px] italic leading-normal text-[rgba(0,0,0,0.2)] dark:text-[rgba(255,255,255,0.35)]">{notPublishedMessage}</p>
                     <div className="mt-[4px]">
                         <MoreButton comment={comment} toggleEdit={openEditMode} />
                     </div>
@@ -237,7 +237,7 @@ function RepliesLine({hasReplies}) {
         return null;
     }
 
-    return (<div className="mb-2 h-full w-[3px] grow rounded bg-gradient-to-b from-[rgba(229,229,229,0.5)] via-[rgba(229,229,229,0.5)] to-transparent dark:from-[rgba(255,255,255,0.05)] dark:via-[rgba(255,255,255,0.05)]" />);
+    return (<div className="mb-2 h-full w-[3px] grow rounded bg-gradient-to-b from-[rgba(0,0,0,0.05)] via-[rgba(0,0,0,0.05)] to-transparent dark:from-[rgba(255,255,255,0.08)] dark:via-[rgba(255,255,255,0.08)]" />);
 }
 
 function CommentLayout({children, avatar, hasReplies}) {
diff --git a/apps/comments-ui/src/components/content/Pagination.js b/apps/comments-ui/src/components/content/Pagination.js
index f11062aa38..a07a3ab516 100644
--- a/apps/comments-ui/src/components/content/Pagination.js
+++ b/apps/comments-ui/src/components/content/Pagination.js
@@ -19,8 +19,8 @@ const Pagination = () => {
     }
 
     return (
-        <button data-testid="pagination-component" type="button" className="group mb-10 flex w-full items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white " onClick={loadMore}>
-            <span className="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgb(229,229,229,0.4)] py-2 px-3 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgb(229,229,229,0.7)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↑ Show {left} previous {left === 1 ? 'comment' : 'comments'}</span>
+        <button data-testid="pagination-component" type="button" className="group mb-10 flex w-full items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white" onClick={loadMore}>
+            <span className="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-3 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↑ Show {left} previous {left === 1 ? 'comment' : 'comments'}</span>
         </button>
     );
 };
diff --git a/apps/comments-ui/src/components/content/RepliesPagination.js b/apps/comments-ui/src/components/content/RepliesPagination.js
index 9f4637e9e5..dd74141487 100644
--- a/apps/comments-ui/src/components/content/RepliesPagination.js
+++ b/apps/comments-ui/src/components/content/RepliesPagination.js
@@ -4,7 +4,7 @@ const RepliesPagination = ({loadMore, count}) => {
     return (
         <div className="flex w-full items-center justify-start">
             <button type="button" className="group ml-[48px] mb-10 flex w-auto items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white sm:mb-12 " onClick={loadMore} data-testid="reply-pagination-button">
-                <span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgb(229,229,229,0.4)] py-2 px-4 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgb(229,229,229,0.7)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ Show {count} more {count === 1 ? 'reply' : 'replies'}</span>
+                <span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-4 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ Show {count} more {count === 1 ? 'reply' : 'replies'}</span>
             </button>
         </div>
     );