diff --git a/apps/comments-ui/src/components/NotPaidBox.js b/apps/comments-ui/src/components/NotPaidBox.js
index 0c4f62bd66..0b429079c4 100644
--- a/apps/comments-ui/src/components/NotPaidBox.js
+++ b/apps/comments-ui/src/components/NotPaidBox.js
@@ -15,8 +15,8 @@ const NotPaidBox = (props) => {
     };
 
     return (
-        <section className={`flex flex-col items-center mb-1 pt-12 pb-12 px-8 border-t-2 border-gray-100 ` + (props.isFirst && ` border-b-2`)}>
-            <h1 className={`text-center text-black text-[22px] font-sans mb-4 tracking-tight dark:text-white ` + (props.isFirst ? `font-semibold` : `font-bold`)}>{titleText}</h1>
+        <section className={`flex flex-col items-center mb-1 pt-12 pb-12 px-8 border-t-2 border-gray-100 dark:border-gray-100/10 ` + (props.isFirst && ` border-b-2`)}>
+            <h1 className={`text-center text-black text-[22px] font-sans mb-4 tracking-tight dark:text-[rgba(255,255,255,0.85)]` + (props.isFirst ? `font-semibold` : `font-bold`)}>{titleText}</h1>
             <button onClick={handleSubscribeClick} className="text-white font-sans py-3 px-5 mb-4 rounded inline-block font-medium leading-none hover:opacity-90 transition-all" style={buttonStyle}>
                 Choose a plan
             </button>
diff --git a/apps/comments-ui/src/components/NotSignedInBox.js b/apps/comments-ui/src/components/NotSignedInBox.js
index adaeb8784c..5e3e8ec3a1 100644
--- a/apps/comments-ui/src/components/NotSignedInBox.js
+++ b/apps/comments-ui/src/components/NotSignedInBox.js
@@ -23,8 +23,8 @@ const NotSignedInBox = (props) => {
     };
 
     return (
-        <section className={`flex flex-col items-center mb-1 pt-12 pb-12 px-8 border-t-2 border-gray-100 ` + (props.isFirst && ` border-b-2`)}>
-            <h1 className={`text-center text-black text-[22px] font-sans mb-4 tracking-tight dark:text-white ` + (props.isFirst ? `font-semibold` : `font-bold`)}>{titleText}</h1>
+        <section className={`flex flex-col items-center mb-1 pt-12 pb-12 px-8 border-t-2 border-gray-100 dark:border-gray-100/10 ` + (props.isFirst && ` border-b-2`)}>
+            <h1 className={`text-center text-black text-[22px] font-sans mb-4 tracking-tight dark:text-[rgba(255,255,255,0.85)] ` + (props.isFirst ? `font-semibold` : `font-bold`)}>{titleText}</h1>
             <button onClick={handleSubscribeClick} className="text-white font-sans py-3 px-5 mb-4 rounded inline-block font-medium leading-none hover:opacity-90 transition-all" style={buttonStyle}>
                 Subscribe now
             </button>