diff --git a/src/app/page.tsx b/src/app/page.tsx
index 34647a3..cad23d5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -42,9 +42,18 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="hero" data-section="hero">
-      <HeroCentered
-      background={{ variant: "gradient-bars" }}
+  <div id="hero" data-section="hero" className="relative">
+    <video 
+        src="https://videos.b2bpic.net/cafe-atmosphere.mp4" 
+        autoPlay 
+        loop 
+        muted 
+        playsInline 
+        className="absolute inset-0 w-full h-full object-cover -z-10"
+    />
+    <div className="absolute inset-0 bg-black/50 -z-10" />
+    <HeroCentered
+      background={{ variant: "plain" }}
       title="Aura Cafe: Artisanal Coffee Redefined"
       description="Where 3D-inspired precision meets the soulful warmth of hand-poured coffee. Step into an immersive sensory journey designed for the modern connoisseur."
       avatars={[
@@ -67,14 +76,6 @@ export default function LandingPage() {
         { type: "text", text: "Community Focused" },
       ]}
     />
-    <video 
-        src="https://videos.b2bpic.net/cafe-atmosphere.mp4" 
-        autoPlay 
-        loop 
-        muted 
-        playsInline 
-        className="fixed inset-0 w-full h-full object-cover opacity-20 pointer-events-none -z-10"
-    />
   </div>
 
   <div id="about" data-section="about">