diff --git a/src/components/Shared/Hero/Hero.module.scss b/src/components/Shared/Hero/Hero.module.scss
index 6b168e0..864e73e 100644
--- a/src/components/Shared/Hero/Hero.module.scss
+++ b/src/components/Shared/Hero/Hero.module.scss
@@ -16,37 +16,17 @@
         right: 0;
         bottom: 0;
         left: 0;
-        background: linear-gradient(94.07deg, rgba(159, 44, 155, 0.8) 2.67%, rgb(0 9 148 / 70%) 29.84%, #000000 84.6%, #000000 92.52%);
+        background: linear-gradient(var(--gradient));
         transition: opacity 0.2s ease-in;
         z-index: -1;
         opacity: 1;
     }
 
-    &::before {
-        position: absolute;
-        content: "";
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(
-            94.07deg,
-            rgb(241 38 234 / 45%) 7.67%,
-            rgba(29, 42, 255, 0.46) 40.84%,
-            rgba(244, 244, 244, 0.5294117647) 84.6%,
-            rgba(255, 255, 255, 0.95) 92.52%
-        );
-
-        transition: opacity 0.2s ease-in;
-        z-index: 0;
-        opacity: 0;
-    }
-
     > [class*="gatsby-image-wrapper"] {
         width: 100%;
         height: 100%;
         position: absolute;
-        z-index: -1;
+        z-index: -2;
         object-fit: cover;
     }
 
diff --git a/src/components/Shared/Hero/index.tsx b/src/components/Shared/Hero/index.tsx
index b7e245d..0d8d0fb 100644
--- a/src/components/Shared/Hero/index.tsx
+++ b/src/components/Shared/Hero/index.tsx
@@ -19,6 +19,7 @@ function Hero({ buttons, title, image, image_title, gradient, description, backg
         const regexForStripHTML = /<\/?[^>]+(>|$)/g;
         return text.replaceAll(regexForStripHTML, "");
     };
+
     return (
         <section className={`${styles.hero} gradient ${gradient} container`}>
             {background_image && <GatsbyImage image={background_image} alt={`Hero background`}></GatsbyImage>}
diff --git a/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss b/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss
index cbd1e9c..76689f4 100644
--- a/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss
+++ b/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss
@@ -2,6 +2,7 @@
 
 .newsletterContainer {
     position: relative;
+    background: var(--casperBlack);
     &::after {
         position: absolute;
         content: "";
@@ -9,35 +10,27 @@
         right: 0;
         bottom: 0;
         left: 0;
-        background: linear-gradient(
-            146.71deg,
-            rgba(106, 35, 104, 1) 0.43%,
-            rgb(36 41 104 / 90%) 42.97%,
-            rgb(0, 0, 0) 85.81%,
-            rgb(0, 0, 0) 94.61%
-        );
+        background: linear-gradient(var(--gradient));
         transition: opacity 0.2s ease-in;
         z-index: 0;
         opacity: 1;
     }
-
-    &::before {
-        position: absolute;
-        content: "";
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(146.71deg, #e387e0db 0.43%, #747acde6 40.97%, #f4f4f4d4 85.81%, #f4f4f478 94.61%);
-        transition: opacity 0.2s ease-in;
-        z-index: 1;
-        opacity: 0;
+    .backgroundImage {
+        > [class*="gatsby-image-wrapper"] {
+            position: absolute;
+            z-index: -1;
+            height: 100%;
+            width: 100%;
+        }
     }
+
     section {
         background: none;
+        position: relative;
         .indexForm {
             z-index: 1;
         }
+
         .imgContainer {
             position: absolute;
             top: 0;
diff --git a/src/components/Shared/NewsletterFormComponent/index.tsx b/src/components/Shared/NewsletterFormComponent/index.tsx
index 3142c3f..8a62e3e 100644
--- a/src/components/Shared/NewsletterFormComponent/index.tsx
+++ b/src/components/Shared/NewsletterFormComponent/index.tsx
@@ -3,7 +3,7 @@ import * as styles from "./NewsletterFormComponent.module.scss";
 import Select from "react-select";
 import { icons } from "../../../svg/Icons";
 import Section from "../Section";
-import { StaticImage } from "gatsby-plugin-image";
+import { GatsbyImage, IGatsbyImageData, StaticImage } from "gatsby-plugin-image";
 
 export default function NewsletterFormComponent({ newsletterData }: any) {
     const [countries, setCountries] = useState([]);
@@ -15,6 +15,8 @@ export default function NewsletterFormComponent({ newsletterData }: any) {
     const [submitError, setSubmitError] = useState<string>("");
     const [submitSuccess, setSubmitSuccess] = useState<string>("");
 
+    const backgroundImage = newsletterData.background_image?.imageFile?.childImageSharp?.gatsbyImageData;
+
     useEffect(() => {
         const getData = async () => {
             const res = await fetch(`${process.env.GATSBY_DIRECTUS_URL}/newsletter/landing`);
@@ -185,167 +187,182 @@ export default function NewsletterFormComponent({ newsletterData }: any) {
         if (e.key != "Enter") return;
         handleAgreeChange();
     }
+
     return (
-        <div className={styles.newsletterContainer} id="newsletter-form">
-            <Section
-                header="Begin your Casper journey"
-                subheader="Sign up for a series of five emails to introduce you to the Casper developer community"
+        <>
+            <div
+                className={`${styles.newsletterContainer} ${!backgroundImage && `gradient ${newsletterData.gradient}`} `}
+                id="newsletter-form"
             >
-                {submitSuccess && (
-                    <div className={`container ${styles.indexForm}`}>
-                        <div className="contentBox">
-                            <div className="span-12">
-                                <div className={styles.onSubmit}>
-                                    <h4>{submitSuccess}</h4>
+                {backgroundImage && (
+                    <div className={styles.backgroundImage}>
+                        {" "}
+                        <GatsbyImage image={backgroundImage} alt={"background_form"} />
+                    </div>
+                )}
+                <Section header={newsletterData.header} subheader={newsletterData.subheader}>
+                    {submitSuccess && (
+                        <div className={`container ${styles.indexForm}`}>
+                            <div className="contentBox">
+                                <div className="span-12">
+                                    <div className={styles.onSubmit}>
+                                        <h4>{submitSuccess}</h4>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                )}
-                {!submitSuccess && newsletterData && (
-                    <div className={`container ${styles.indexForm}`}>
-                        <div className="contentBox">
-                            <div className="span-12">
-                                <form className={styles.form}>
-                                    {submitError && (
-                                        <div className={styles.errorSubmit}>
-                                            {icons.error}
-                                            <h4>{submitError}</h4>
-                                        </div>
-                                    )}
-
-                                    <div className={styles.email}>
-                                        <label htmlFor="email">{newsletterData.email_label}</label>
-                                        <input
-                                            value={email}
-                                            className="primaryParagraph"
-                                            type="text"
-                                            name="email"
-                                            id="email"
-                                            onChange={handleEmailChange}
-                                            onBlur={handleEmailBlur}
-                                        />
-                                        {emailError && (
-                                            <label htmlFor="email Error" className={styles.error}>
-                                                {emailError}
-                                            </label>
+                    )}
+                    {!submitSuccess && newsletterData && (
+                        <div className={`container ${styles.indexForm}`}>
+                            <div className="contentBox">
+                                <div className="span-12">
+                                    <form className={styles.form}>
+                                        {submitError && (
+                                            <div className={styles.errorSubmit}>
+                                                {icons.error}
+                                                <h4>{submitError}</h4>
+                                            </div>
                                         )}
-                                    </div>
 
-                                    <div className={styles.name}>
-                                        <label htmlFor="first_name">{newsletterData.first_name_label}</label>
-                                        <input
-                                            value={firstName}
-                                            type="text"
-                                            name="first_name"
-                                            id="first_name"
-                                            onChange={handleFirstNameChange}
-                                            onBlur={handleFirstNameBlur}
-                                        />
-                                        {firstNameError && (
-                                            <label htmlFor="name Error" className={styles.error}>
-                                                {firstNameError}
-                                            </label>
-                                        )}
-                                    </div>
+                                        <div className={styles.email}>
+                                            <label htmlFor="email">{newsletterData.email_label}</label>
+                                            <input
+                                                value={email}
+                                                className="primaryParagraph"
+                                                type="text"
+                                                name="email"
+                                                id="email"
+                                                onChange={handleEmailChange}
+                                                onBlur={handleEmailBlur}
+                                            />
+                                            {emailError && (
+                                                <label htmlFor="email Error" className={styles.error}>
+                                                    {emailError}
+                                                </label>
+                                            )}
+                                        </div>
 
-                                    {renderSelect({
-                                        label: newsletterData.i_am_label,
-                                        options: iamOptions,
-                                        isMulti: false,
-                                        key: "i_am_label",
-                                        required: true,
-                                        defaultError: "I am is required"
-                                    })}
+                                        <div className={styles.name}>
+                                            <label htmlFor="first_name">{newsletterData.first_name_label}</label>
+                                            <input
+                                                value={firstName}
+                                                type="text"
+                                                name="first_name"
+                                                id="first_name"
+                                                onChange={handleFirstNameChange}
+                                                onBlur={handleFirstNameBlur}
+                                            />
+                                            {firstNameError && (
+                                                <label htmlFor="name Error" className={styles.error}>
+                                                    {firstNameError}
+                                                </label>
+                                            )}
+                                        </div>
 
-                                    {renderSelect({
-                                        label: newsletterData.country_label,
-                                        options: countries,
-                                        isMulti: false,
-                                        key: "country_label",
-                                        required: true,
-                                        defaultError: "Country is required"
-                                    })}
+                                        {renderSelect({
+                                            label: newsletterData.i_am_label,
+                                            options: iamOptions,
+                                            isMulti: false,
+                                            key: "i_am_label",
+                                            required: true,
+                                            defaultError: "I am is required"
+                                        })}
 
-                                    {renderSelect({
-                                        label: newsletterData.preferred_language_label,
-                                        options: languageOptions,
-                                        isMulti: true,
-                                        key: "preferred_language_label",
-                                        required: false
-                                    })}
+                                        {renderSelect({
+                                            label: newsletterData.country_label,
+                                            options: countries,
+                                            isMulti: false,
+                                            key: "country_label",
+                                            required: true,
+                                            defaultError: "Country is required"
+                                        })}
 
-                                    {renderSelect({
-                                        label: newsletterData.blockchain_familiarity_label,
-                                        options: blockchainOptions,
-                                        isMulti: false,
-                                        key: "blockchain_familiarity_label",
-                                        required: false
-                                    })}
+                                        {renderSelect({
+                                            label: newsletterData.preferred_language_label,
+                                            options: languageOptions,
+                                            isMulti: true,
+                                            key: "preferred_language_label",
+                                            required: false
+                                        })}
 
-                                    {renderSelect({
-                                        label: newsletterData.interests_label,
-                                        options: interestsOptions,
-                                        isMulti: true,
-                                        key: "interests_label",
-                                        required: false
-                                    })}
+                                        {renderSelect({
+                                            label: newsletterData.blockchain_familiarity_label,
+                                            options: blockchainOptions,
+                                            isMulti: false,
+                                            key: "blockchain_familiarity_label",
+                                            required: false
+                                        })}
 
-                                    <div className={styles.agreeBox}>
-                                        <div className={styles.agreeBox_checkbox}>
-                                            <input
-                                                type="checkbox"
-                                                id="checkbox"
-                                                className={styles.checkInput}
-                                                checked={agree}
-                                                onChange={handleAgreeChange}
-                                            />
-                                            <label
-                                                htmlFor="checkbox"
-                                                className={styles.checkbox}
-                                                tabIndex={0}
-                                                onKeyDown={handleCheckChange}
-                                            >
-                                                {icons.check}
-                                            </label>
+                                        {renderSelect({
+                                            label: newsletterData.interests_label,
+                                            options: interestsOptions,
+                                            isMulti: true,
+                                            key: "interests_label",
+                                            required: false
+                                        })}
 
-                                            <span className="primaryParagraph">{newsletterData.agree_label}</span>
-                                        </div>
-                                        {agreeError && (
-                                            <label htmlFor="Agree Error" className={styles.error}>
-                                                {agreeError}
-                                            </label>
-                                        )}
-                                    </div>
+                                        <div className={styles.agreeBox}>
+                                            <div className={styles.agreeBox_checkbox}>
+                                                <input
+                                                    type="checkbox"
+                                                    id="checkbox"
+                                                    className={styles.checkInput}
+                                                    checked={agree}
+                                                    onChange={handleAgreeChange}
+                                                />
+                                                <label
+                                                    htmlFor="checkbox"
+                                                    className={styles.checkbox}
+                                                    tabIndex={0}
+                                                    onKeyDown={handleCheckChange}
+                                                >
+                                                    {icons.check}
+                                                </label>
 
-                                    <div className={styles.description}>
-                                        <div
-                                            className={`${styles.paragraphContainer} secondaryParagraph`}
-                                            dangerouslySetInnerHTML={{ __html: newsletterData.description! }}
-                                        ></div>
-                                    </div>
-                                    <div>
-                                        <button type="button" className={`${styles.button} ${styles.primary}`} onClick={handleSubmit}>
-                                            <div className={`${styles.button_container} ${styles.primary_container}`}>
-                                                <p>{newsletterData.button_text}</p>
-                                                {icons.arrowRight}
+                                                <span className="primaryParagraph">{newsletterData.agree_label}</span>
                                             </div>
-                                        </button>
-                                    </div>
-                                </form>
+                                            {agreeError && (
+                                                <label htmlFor="Agree Error" className={styles.error}>
+                                                    {agreeError}
+                                                </label>
+                                            )}
+                                        </div>
+
+                                        <div className={styles.description}>
+                                            <div
+                                                className={`${styles.paragraphContainer} secondaryParagraph`}
+                                                dangerouslySetInnerHTML={{ __html: newsletterData.description! }}
+                                            ></div>
+                                        </div>
+                                        <div>
+                                            <button type="button" className={`${styles.button} ${styles.primary}`} onClick={handleSubmit}>
+                                                <div className={`${styles.button_container} ${styles.primary_container}`}>
+                                                    <p>{newsletterData.button_text}</p>
+                                                    {icons.arrowRight}
+                                                </div>
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                )}
-                <div className={styles.imgContainer}>
-                    <StaticImage src="../../../images/blank_ribbon_up.png" alt={"background ribbon"} className={styles.blank_ribbon_top} />
-                    <StaticImage
-                        src="../../../images/blank_ribbon.png"
-                        alt={"background ribbon"}
-                        className={styles.blank_ribbon_bottom}
-                    />{" "}
-                </div>
-            </Section>
-        </div>
+                    )}
+                    {!backgroundImage && (
+                        <div className={styles.imgContainer}>
+                            <StaticImage
+                                src="../../../images/blank_ribbon_up.png"
+                                alt={"background ribbon"}
+                                className={styles.blank_ribbon_top}
+                            />
+                            <StaticImage
+                                src="../../../images/blank_ribbon.png"
+                                alt={"background ribbon"}
+                                className={styles.blank_ribbon_bottom}
+                            />
+                        </div>
+                    )}
+                </Section>
+            </div>
+        </>
     );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 35eb8a3..0ca1b69 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -132,6 +132,15 @@ export const query = graphql`
                         preferred_language_label
                         blockchain_familiarity_label
                         interests_label
+                        gradient
+                        background_image {
+                            id
+                            imageFile {
+                                childImageSharp {
+                                    gatsbyImageData
+                                }
+                            }
+                        }
                     }
                 }
             }
diff --git a/src/stylesheets/_global.scss b/src/stylesheets/_global.scss
index f29935c..3050d6d 100644
--- a/src/stylesheets/_global.scss
+++ b/src/stylesheets/_global.scss
@@ -214,6 +214,14 @@ a {
         --gradient: 28deg, #2a5208 0%, #002008 52.6%, #000 89.06%, #000 97.4%;
         @include mixins.gradient_before(linear-gradient(53.9deg, #53e075 -0.61%, #a2eeb5 12.89%, #f4f4f4 51.69%));
     }
+    &.variant9 {
+        --gradient: 94.07deg, rgba(159, 44, 155, 0.8) 2.67%, rgb(0 9 148 / 70%) 29.84%, #000000 84.6%, #000000 92.52%;
+        @include mixins.gradient_before(linear-gradient(94deg, rgba(246, 34, 230, 0.45) 9.62%, rgba(67, 79, 242, 0.65) 52.95%, #fff 95.9%));
+    }
+    &.variant10 {
+        --gradient: 146.71deg, rgba(106, 35, 104, 1) 0.43%, rgb(36 41 104 / 90%) 42.97%, rgb(0, 0, 0) 85.81%, rgb(0, 0, 0) 94.61%;
+        @include mixins.gradient_before(linear-gradient(146.71deg, #e387e0db 0.43%, #747acde6 40.97%, #f4f4f4d4 85.81%, #f4f4f478 94.61%));
+    }
 }
 
 // Color
@@ -291,7 +299,13 @@ body.light {
             opacity: 1;
         }
     }
-
+    .variant9 {
+        &[class*="Hero"] {
+            &::after {
+                opacity: 0;
+            }
+        }
+    }
     p {
         strong {
             --casperYellow: var(--casperBlue);
@@ -551,13 +565,7 @@ body.light {
             --mainColor: #bcfc07;
         }
     }
-    .variant9 {
-        &[class*="Hero"] {
-            &::after {
-                opacity: 0;
-            }
-        }
-    }
+
     @media (max-width: 996px) {
         [class*="NavBarDropdown"] {
             border: none !important;