diff --git a/documentation/src/refine-theme/landing-hero-animation.tsx b/documentation/src/refine-theme/landing-hero-animation.tsx
index 07c48ca096a9..83afacbbcd4f 100644
--- a/documentation/src/refine-theme/landing-hero-animation.tsx
+++ b/documentation/src/refine-theme/landing-hero-animation.tsx
@@ -293,11 +293,12 @@ export const LandingHeroAnimation = React.memo(function HeroAnimation() {
                         "-translate-x-1/2",
                         "translate-y-0",
                         "landing-lg:translate-y-16",
+                        "blur-sm",
                         "animate-landing-hero-beam-line",
                     )}
                     style={{
-                        fillOpacity: 0.2,
-                        filter: "drop-shadow(rgb(71, 235, 235) 0px 0px 3px) drop-shadow(rgb(71, 235, 235) 0px 0px 8px)",
+                        fillOpacity: 0,
+                        filter: "drop-shadow(rgba(71, 235, 235,0.1) 0px 0px 0px) drop-shadow(rgba(71, 235, 235,0.15) 0px 0px 10px)",
                     }}
                 />
                 <div
@@ -318,25 +319,12 @@ export const LandingHeroAnimation = React.memo(function HeroAnimation() {
                         className={clsx(
                             "relative",
                             "w-40",
-                            "h-px",
+                            "h-0.5",
+                            "-mt-px",
                             "bg-landing-hero-beam-bottom",
+                            "animate-landing-hero-beam-bottom",
                         )}
-                    >
-                        <div
-                            className={clsx(
-                                "animate-landing-hero-beam-bottom",
-                                "absolute",
-                                "-top-2",
-                                "-translate-x-1/2",
-                                "left-1/2",
-                                "w-full",
-                                "pb-[50%]",
-                                "rounded-full",
-                                "blur-[8px]",
-                                "bg-refine-cyan-alt",
-                            )}
-                        />
-                    </div>
+                    ></div>
                 </div>
             </div>
         </div>
diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js
index 697fdd58ce05..a670024e7327 100644
--- a/documentation/tailwind.config.js
+++ b/documentation/tailwind.config.js
@@ -601,7 +601,7 @@ module.exports = {
                         opacity: 0,
                     },
                     "50%": {
-                        opacity: 1,
+                        opacity: 0.5,
                     },
                     "100%": {
                         opacity: 0,
@@ -609,13 +609,13 @@ module.exports = {
                 },
                 "landing-hero-beam-bottom": {
                     "0%": {
-                        opacity: 0.25,
+                        transform: "scaleX(0.5)",
                     },
                     "50%": {
-                        opacity: 1,
+                        transform: "scaleX(1)",
                     },
                     "100%": {
-                        opacity: 0.25,
+                        transform: "scaleX(0.5)",
                     },
                 },
                 "showcase-bottom-fade-reveal": {