diff --git a/video-gen-app/public/backimage.png b/video-gen-app/public/backimage.png
new file mode 100644
index 00000000..eff91718
Binary files /dev/null and b/video-gen-app/public/backimage.png differ
diff --git a/video-gen-app/src/pages/LoginPage.tsx b/video-gen-app/src/pages/LoginPage.tsx
index 9d3c3946..c143a2d5 100644
--- a/video-gen-app/src/pages/LoginPage.tsx
+++ b/video-gen-app/src/pages/LoginPage.tsx
@@ -283,10 +283,19 @@ const LoginPage: React.FC = () => {
     <div style={{
       minHeight: '100vh',
       display: 'flex',
-      background: 'linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 40%, #f0f0ff 70%, #f8f9ff 100%)',
+      backgroundImage: `url(/backimage.png)`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundAttachment: 'fixed',
       position: 'relative',
       overflow: 'hidden',
     }}>
+      <div style={{
+        position: 'absolute',
+        inset: 0,
+        background: 'linear-gradient(135deg, rgba(240,244,255,0.9) 0%, rgba(232,236,248,0.85) 40%, rgba(240,240,255,0.9) 70%, rgba(248,249,255,0.95) 100%)',
+      }} />
       <div style={{
         position: 'absolute',
         width: 500, height: 500, borderRadius: '50%',