diff --git a/api/fetch_auth_video.php b/api/fetch_auth_video.php
new file mode 100644
index 0000000..801e089
--- /dev/null
+++ b/api/fetch_auth_video.php
@@ -0,0 +1,36 @@
+<?php
+require_once __DIR__.'/../includes/pexels.php';
+// We'll try to find a video that combines these themes.
+// Since we can't easily find a single clip with everything, we'll pick the most descriptive one.
+$query = 'woman cooking kitchen grocery delivery';
+$url = 'https://api.pexels.com/videos/search?query=' . urlencode($query) . '&orientation=portrait&per_page=1&page=1';
+$data = pexels_get($url);
+
+if ($data && !empty($data['videos'])) {
+    $video = $data['videos'][0];
+    $bestFile = null;
+    foreach ($video['video_files'] as $file) {
+        if ($file['quality'] == 'hd' && ($file['width'] == 1080 || $file['width'] == 720)) {
+            $bestFile = $file;
+            break;
+        }
+    }
+    if (!$bestFile) $bestFile = $video['video_files'][0];
+
+    $src = $bestFile['link'];
+    $target = __DIR__ . '/../assets/images/auth-video.mp4';
+    
+    // Using curl for video as file_get_contents might be slow/limited for large files
+    $ch = curl_init($src);
+    $fp = fopen($target, 'wb');
+    curl_setopt($ch, CURLOPT_FILE, $fp);
+    curl_setopt($ch, CURLOPT_HEADER, 0);
+    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
+    curl_exec($ch);
+    curl_close($ch);
+    fclose($fp);
+    
+    echo "Success: Downloaded " . $target;
+} else {
+    echo "Error: Failed to fetch video info from Pexels.";
+}
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 54e2c37..4d482e1 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -376,11 +376,22 @@ footer {
 }
 
 .auth-image-container {
-    background-image: url('../images/auth-bg-new.jpg');
-    background-size: cover;
-    background-position: center;
     position: relative;
     overflow: hidden;
+    background-color: var(--brand-primary); /* Fallback */
+}
+
+.auth-background-video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    transform: translate(-50%, -50%);
+    object-fit: cover;
+    z-index: 0;
 }
 
 .auth-image-overlay {
@@ -388,6 +399,7 @@ footer {
     width: 100%;
     height: 100%;
     position: relative;
+    z-index: 1;
 }
 
 /* Animated decorative circles in background */
diff --git a/assets/images/auth-video.mp4 b/assets/images/auth-video.mp4
new file mode 100644
index 0000000..b1eed07
Binary files /dev/null and b/assets/images/auth-video.mp4 differ
diff --git a/index.php b/index.php
index e2e6c56..bc49d41 100644
--- a/index.php
+++ b/index.php
@@ -27,7 +27,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v10">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v11">
 
 </head>
 <body>
@@ -55,8 +55,11 @@
     <div id="guest-view" class="d-none auth-screen">
         <div class="container-fluid h-100 p-0">
             <div class="row h-100 g-0">
-                <!-- Left Column: Image & Description -->
+                <!-- Left Column: Video & Description -->
                 <div class="col-lg-6 d-none d-lg-block auth-image-container">
+                    <video autoplay muted loop playsinline class="auth-background-video">
+                        <source src="assets/images/auth-video.mp4" type="video/mp4">
+                    </video>
                     <div class="auth-image-overlay d-flex align-items-center justify-content-center p-5 text-white">
                         <div class="auth-branding-content position-relative overflow-hidden">
                             <!-- Floating decorative emojis with animation -->
