diff --git a/src/blocks/Hero/Hero.jsx b/src/blocks/Hero/Hero.jsx
index ea4c8ca..b989f4b 100644
--- a/src/blocks/Hero/Hero.jsx
+++ b/src/blocks/Hero/Hero.jsx
@@ -18,6 +18,12 @@ const HeroWrapper = styled.div`
   @media (max-width: 480px) {
     padding: 7.5rem 0px 4.5rem 0px;
   }
+
+  span.darkenBackground div {
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 0.375rem;
+    border-radius: 0.5em;
+  }
 `;
 
 const Supertitle = styled.div`
@@ -89,13 +95,16 @@ export default function BlockHero({ block, section }) {
     opacity: [-1.5, 10],
   });
 
+  // const klass = block.darkenBackground ? 'darkenBackground' : block.darkenBackground;;
+  const klass = true ? 'darkenBackground' : block.darkenBackground;;
+
   return (
     <HeroWrapper>
       <span ref={heroSupertitleRef.ref}>
         {block.supertitle && <Supertitle>{block.supertitle}</Supertitle>}
       </span>
 
-      <span ref={heroTitleRef.ref}>
+      <span ref={heroTitleRef.ref} class={klass}>
         {block.heroTitle && (
           <HeroTitle>
             <RichText element={block.heroTitle} />
@@ -103,7 +112,7 @@ export default function BlockHero({ block, section }) {
         )}
       </span>
 
-      <span ref={heroTextRef.ref}>
+      <span ref={heroTextRef.ref} class={klass}>
         {block.heroText && (
           <HeroText>
             <RichText element={block.heroText} />
diff --git a/src/blocks/Text/Text.jsx b/src/blocks/Text/Text.jsx
index 4b191df..9675636 100644
--- a/src/blocks/Text/Text.jsx
+++ b/src/blocks/Text/Text.jsx
@@ -26,6 +26,15 @@ const Wrapper = styled.div`
   p {
     margin-bottom: 1rem;
   }
+
+  div {
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+  }
+
+  .darkenBackground {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 `;
 
 // it can edit in
@@ -40,12 +49,14 @@ export default function BlockText({ block, section }) {
     opacity: [0, 4],
   });
 
+  const klass = block.darkenBackground ? 'darkenBackground' : block.darkenBackground;;
+
   return (
     <Wrapper>
-      <div ref={firstColumnRef.ref}>
+      <div ref={firstColumnRef.ref} class={klass}>
         <RichText element={block.firstColumn} />
       </div>
-      <div ref={secondColumnRef.ref}>
+      <div ref={secondColumnRef.ref} class={klass}>
         <RichText element={block.secondColumn} />
       </div>
     </Wrapper>