diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
index 44a482da..b0787e59 100644
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -5,11 +5,22 @@ import { Pattern } from '@/components/Pattern';
 export function Banner() {
   return (
     <section aria-label="Apply Banner" className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32">
-      <div className="overflow-hidden lg:relative">
+      <div className="relative overflow-hidden">
         <ContainerPattern size="md" className="relative grid grid-cols-1 items-end gap-y-12 lg:static lg:grid-cols-2 pt-24 pb-8 sm:py-10">
-          <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
-          <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
-          <div>
+          
+          {/* Add gradient mask that fades to right */}
+          <div 
+            className="absolute inset-0 overflow-hidden pointer-events-none"
+            style={{
+              maskImage: 'linear-gradient(to right, transparent 0%, black 20%, black 60%, transparent 100%)',
+              WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 20%, black 60%, transparent 100%)'
+            }}
+          >
+            <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
+            <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
+          </div>
+
+          <div className="relative z-10">
             <h2 className="font-mono text-5xl font-black tracking-tighter text-white dark:text-black sm:w-3/4 sm:text-5xl md:w-2/3 lg:w-auto">
               Launch into AOSSIE&apos;s open-source world through GSoC!
             </h2>
@@ -28,4 +39,4 @@ export function Banner() {
       </div>
     </section>
   );
-}
+}
\ No newline at end of file