diff --git a/web/src/app/_components/ray.tsx b/web/src/app/_components/ray.tsx
new file mode 100644
index 0000000..a478d58
--- /dev/null
+++ b/web/src/app/_components/ray.tsx
@@ -0,0 +1,44 @@
+export function Ray() {
+  return (
+    <svg
+      className="animate-spotlight pointer-events-none fixed -top-80 left-0 z-[99] h-[169%] w-[138%] opacity-0 md:-top-20 md:left-60 lg:w-[84%]"
+      viewBox="0 0 3787 2842"
+      fill="none"
+    >
+      <g filter="url(#filter)">
+        <ellipse
+          cx="1924.71"
+          cy="273.501"
+          rx="1924.71"
+          ry="273.501"
+          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
+          fill="white"
+          fillOpacity="0.21"
+        ></ellipse>
+      </g>
+      <defs>
+        <filter
+          id="filter"
+          x="0.860352"
+          y="0.838989"
+          width="3785.16"
+          height="2840.26"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          ></feBlend>
+          <feGaussianBlur
+            stdDeviation="151"
+            result="effect1_foregroundBlur_1065_8"
+          ></feGaussianBlur>
+        </filter>
+      </defs>
+    </svg>
+  );
+}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 959e42a..78ba24e 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -27,6 +27,8 @@ import { BentoGrid } from "~/components/magicui/bento-grid";
 import { FlickeringGrid } from "~/components/magicui/flickering-grid";
 import { Button } from "~/components/ui/button";
 
+import { Ray } from "./_components/ray";
+
 export default function HomePage() {
   return (
     <div className="flex flex-col items-center">
@@ -38,6 +40,7 @@ export default function HomePage() {
         <JoinCommunitySection />
       </main>
       <Footer />
+      <Ray />
     </div>
   );
 }
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 527758c..3bd5b31 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -18,6 +18,18 @@
       opacity: 1;
     }
   }
+
+  --animate-spotlight: spotlight 2s ease 0.75s 1 forwards;
+  @keyframes spotlight {
+    0% {
+      opacity: 0;
+      transform: translate(-72%, -62%) scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -40%) scale(1);
+    }
+  }
 }
 
 @theme inline {