diff --git a/frontends/mit-open/public/images/unit_banners/see.jpg b/frontends/mit-open/public/images/unit_banners/see.jpg
index 5b12a0ddd7..6b20f0346a 100644
Binary files a/frontends/mit-open/public/images/unit_banners/see.jpg and b/frontends/mit-open/public/images/unit_banners/see.jpg differ
diff --git a/frontends/mit-open/public/images/unit_banners/xpro.jpg b/frontends/mit-open/public/images/unit_banners/xpro.jpg
index cb5402f5a3..ede776430c 100644
Binary files a/frontends/mit-open/public/images/unit_banners/xpro.jpg and b/frontends/mit-open/public/images/unit_banners/xpro.jpg differ
diff --git a/frontends/ol-components/src/components/BannerPage/BannerPage.tsx b/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
index 83ae99f14b..6e3f3ac47a 100644
--- a/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
+++ b/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
@@ -16,16 +16,20 @@ interface ImgProps {
   alt?: string
 }
 
-/**
- * Prefer direct use of `BannerPage` component.
- */
-const BannerContainer = styled.div`
+const BannerOverlayGradient = styled.div`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
+  background-color: rgba(0 0 0 / 30%);
+`
+/**
+ * Prefer direct use of `BannerPage` component.
+ */
+const BannerContainer = styled(BannerOverlayGradient)`
+  z-index: -2;
 `
 
 const imageStylesheet = `
@@ -109,6 +113,7 @@ const BannerPage: React.FC<BannerPageProps> = ({
   return (
     <BannerPageWrapper className={className}>
       <BannerPageHeaderFlex className={bannerContainerClass}>
+        <BannerOverlayGradient></BannerOverlayGradient>
         <BannerContainer>
           {!omitBackground && <BannerImage src={src} alt={alt} />}
         </BannerContainer>