diff --git a/src/app/concepts/[id]/NotWellDefinedProblem.tsx b/src/app/concepts/[id]/NotWellDefinedProblem.tsx
index 0a99498..52c9fab 100644
--- a/src/app/concepts/[id]/NotWellDefinedProblem.tsx
+++ b/src/app/concepts/[id]/NotWellDefinedProblem.tsx
@@ -46,7 +46,7 @@ const NotWellDefinedProblem = ({ problem, evaluation }: Props) => (
         {evaluation.suggestions.map((item, index) => (
           <div
             key={index}
-            className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
+            className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900/50"
           >
             {item}
           </div>
diff --git a/src/app/concepts/[id]/ProblemRequiresChanges.tsx b/src/app/concepts/[id]/ProblemRequiresChanges.tsx
index 5ed1ad0..27042a3 100644
--- a/src/app/concepts/[id]/ProblemRequiresChanges.tsx
+++ b/src/app/concepts/[id]/ProblemRequiresChanges.tsx
@@ -117,7 +117,7 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
           {evaluation.suggestions.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900/50"
             >
               <p className="first-letter:float-left first-letter:pr-3 first-letter:text-5xl first-letter:font-bold">
                 {item}
@@ -133,7 +133,7 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
             {evaluation.recommendations.map((item, index) => (
               <div
                 key={index}
-                className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:p-6 dark:bg-gray-900"
+                className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:p-6 dark:bg-gray-900/50"
               >
                 <p className="grow md:text-lg">{item}</p>
 
diff --git a/src/app/concepts/[id]/WellDefinedProblem.tsx b/src/app/concepts/[id]/WellDefinedProblem.tsx
index 46d65c8..1c5c5b6 100644
--- a/src/app/concepts/[id]/WellDefinedProblem.tsx
+++ b/src/app/concepts/[id]/WellDefinedProblem.tsx
@@ -87,7 +87,7 @@ const WellDefinedProblem = ({ conceptId, evaluation }: Props) => {
           {evaluation.painPoints.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900/50"
             >
               <p className="first-letter:float-left first-letter:pr-3 first-letter:text-5xl first-letter:font-bold">
                 {item}
@@ -102,7 +102,7 @@ const WellDefinedProblem = ({ conceptId, evaluation }: Props) => {
           {evaluation.targetAudience.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 md:p-6 md:pb-0 dark:bg-gray-900"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 md:p-6 md:pb-0 dark:bg-gray-900/50"
             >
               <p className="mb-4 text-lg font-bold md:text-xl">
                 {item.segment}
diff --git a/src/app/ideas/[id]/components/SectionCompetitors.tsx b/src/app/ideas/[id]/components/SectionCompetitors.tsx
index baaf19e..619d81d 100644
--- a/src/app/ideas/[id]/components/SectionCompetitors.tsx
+++ b/src/app/ideas/[id]/components/SectionCompetitors.tsx
@@ -67,7 +67,7 @@ const SectionCompetitors: React.FC<SectionCompetitorsProps> = ({
                     onReport(`competitor_analysis.competitors.${idx}`)
                   }
                 >
-                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900">
+                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900/50">
                     <h3 className="mb-2 text-lg font-semibold md:text-xl">
                       Product:
                     </h3>
diff --git a/src/app/ideas/[id]/components/SectionContentIdeas.tsx b/src/app/ideas/[id]/components/SectionContentIdeas.tsx
index 7bcb455..ef7b9ae 100644
--- a/src/app/ideas/[id]/components/SectionContentIdeas.tsx
+++ b/src/app/ideas/[id]/components/SectionContentIdeas.tsx
@@ -142,7 +142,7 @@ const ContentIdea: React.FC<ContentIdeaSectionProps> = ({
     header={header}
     onReport={() => onReport(`content_ideas_for_marketing.${section}`)}
   >
-    <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-4 dark:bg-gray-900">
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-4 dark:bg-gray-900/50">
       <h3 className="mb-2 text-lg font-semibold">Platforms:</h3>
 
       <Paragraph>{data.platforms.join(', ')}</Paragraph>
diff --git a/src/app/ideas/[id]/components/SectionElevatorPitch.tsx b/src/app/ideas/[id]/components/SectionElevatorPitch.tsx
index 93a24ee..9fc6c94 100644
--- a/src/app/ideas/[id]/components/SectionElevatorPitch.tsx
+++ b/src/app/ideas/[id]/components/SectionElevatorPitch.tsx
@@ -99,7 +99,7 @@ const Pitch: React.FC<PitchProps> = ({ idx, pitch, onReport }) => {
       header={`${idx + 1}. ${pitch.hook}`}
       onReport={() => onReport(`elevator_pitch.${idx}`)}
     >
-      <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900">
+      <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900/50">
         <Paragraph>
           {pitch.problem} {pitch.solution} {pitch.valueProposition}
         </Paragraph>
diff --git a/src/app/ideas/[id]/components/SectionProductNames.tsx b/src/app/ideas/[id]/components/SectionProductNames.tsx
index 6bc181d..53687da 100644
--- a/src/app/ideas/[id]/components/SectionProductNames.tsx
+++ b/src/app/ideas/[id]/components/SectionProductNames.tsx
@@ -56,7 +56,7 @@ const SectionProductNames: React.FC<SectionProductNamesProps> = ({
                   header={`${idx + 1}. ${productName.productName} - ${productName.tagline}`}
                   onReport={() => onReport(`potential_product_names.${idx}`)}
                 >
-                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900">
+                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900/50">
                     <Paragraph>
                       {productName.why} {productName.targetAudienceInsight}
                     </Paragraph>
diff --git a/src/app/ideas/[id]/components/SectionTargetAudiences.tsx b/src/app/ideas/[id]/components/SectionTargetAudiences.tsx
index 6cf5730..2c35321 100644
--- a/src/app/ideas/[id]/components/SectionTargetAudiences.tsx
+++ b/src/app/ideas/[id]/components/SectionTargetAudiences.tsx
@@ -53,7 +53,7 @@ const SectionTargetAudiences: React.FC<SectionTargetAudiencesProps> = ({
               header={`${idx + 1}. ${audience.segment}`}
               onReport={() => onReport(`target_audiences.${audience.id}`)}
             >
-              <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 dark:bg-gray-900">
+              <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 dark:bg-gray-900/50">
                 <h3 className="mb-2 text-lg font-semibold md:text-xl">
                   Description:
                 </h3>