diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index e55280d9ad..3ced996bc6 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -1,3 +1,5 @@
+@cta-card-bg-color: var(--dark-jungle-green);
+
 .website-redesign {
   // hero section of features, enterprises, and universities will have an image that will overflow the page
   overflow-x: hidden;
@@ -653,7 +655,14 @@
     display: flex;
     justify-content: space-between;
     padding: 64px;
-    background: var(--dark-jungle-green);
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.4) 0%,
+        @cta-card-bg-color 20%,
+        @cta-card-bg-color 100%
+      ),
+      url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
+    background-size: cover;
     color: var(--white);
     border-radius: 8px;
 
@@ -686,8 +695,16 @@
     flex-direction: column;
     align-items: center;
     padding: 64px;
-    background: var(--dark-jungle-green);
     color: var(--white);
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.4) 0%,
+        @cta-card-bg-color 25%,
+        @cta-card-bg-color 75%,
+        rgba(0, 0, 0, 0.4) 100%
+      ),
+      url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
+    background-size: cover;
     border-radius: 8px;
 
     @media (max-width: @screen-sm-max) {
diff --git a/services/web/public/img/website-redesign/overleaf-pattern-purple.png b/services/web/public/img/website-redesign/overleaf-pattern-purple.png
new file mode 100644
index 0000000000..189159370f
Binary files /dev/null and b/services/web/public/img/website-redesign/overleaf-pattern-purple.png differ