diff --git a/assets/pasted-20260415-150837-fa591359.png b/assets/pasted-20260415-150837-fa591359.png
deleted file mode 100644
index 6654b4c..0000000
Binary files a/assets/pasted-20260415-150837-fa591359.png and /dev/null differ
diff --git a/backend/src/config.js b/backend/src/config.js
index 19259af..fef0a57 100644
--- a/backend/src/config.js
+++ b/backend/src/config.js
@@ -69,7 +69,7 @@ const config = {
 
 config.pexelsKey = process.env.PEXELS_KEY || '';
 
-config.pexelsQuery = 'cozy home cinema tv popcorn';
+config.pexelsQuery = 'Neon-lit cinema hallway';
 config.host = process.env.NODE_ENV === "production" ? config.remote : "http://localhost";
 config.apiUrl = `${config.host}${config.port ? `:${config.port}` : ``}/api`;
 config.swaggerUrl = `${config.swaggerUI}${config.swaggerPort}`;
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index f3e5feb..da82ec2 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -20,7 +20,7 @@ import { findMe, loginUser, resetAction } from '../stores/authSlice';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 import Link from 'next/link';
 import {toast, ToastContainer} from "react-toastify";
-import { getPexelsImage } from '../helpers/pexels'
+import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
 
 export default function Login() {
   const router = useRouter();
@@ -28,13 +28,15 @@ export default function Login() {
   const textColor = useAppSelector((state) => state.style.linkColor);
   const iconsColor = useAppSelector((state) => state.style.iconsColor);
   const notify = (type, msg) => toast(msg, { type });
-  const [illustrationImage, setIllustrationImage] = useState({
-    src: undefined,
-    photographer: undefined,
-    photographer_url: undefined,
-  });
-  const contentPosition = 'left';
-  const [showPassword, setShowPassword] = useState(false);
+  const [ illustrationImage, setIllustrationImage ] = useState({
+      src: undefined,
+      photographer: undefined,
+      photographer_url: undefined,
+  })
+  const [ illustrationVideo, setIllustrationVideo ] = useState({video_files: []})
+    const [contentType, setContentType] = useState('video');
+    const [contentPosition, setContentPosition] = useState('left');
+    const [showPassword, setShowPassword] = useState(false);
   const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
     (state) => state.auth,
   );
@@ -44,14 +46,15 @@ export default function Login() {
 
   const title = 'Movies & TV Tracker'
 
-  // Fetch a single movie-themed illustration for the login page
-  useEffect(() => {
-    async function fetchData() {
-      const image = await getPexelsImage();
-      setIllustrationImage(image);
-    }
-
-    fetchData();
+  // Fetch Pexels image/video
+  useEffect( () => {
+      async function fetchData() {
+          const image = await getPexelsImage()
+          const video = await getPexelsVideo()
+          setIllustrationImage(image);
+          setIllustrationVideo(video);
+      }
+      fetchData();
   }, []);
   // Fetch user data
   useEffect(() => {
@@ -98,44 +101,46 @@ export default function Login() {
   };
 
   const imageBlock = (image) => (
-    <div
-      className="hidden md:flex relative flex-grow-0 flex-shrink-0 w-1/3 overflow-hidden"
-      style={{
-        backgroundImage: image?.src?.original
-          ? `linear-gradient(180deg, rgba(7, 8, 13, 0.18) 0%, rgba(7, 8, 13, 0.76) 100%), url(${image.src.original})`
-          : 'linear-gradient(135deg, #07080D 0%, #11131C 50%, #312E81 100%)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-      }}
-    >
-      <div className="relative z-10 flex h-full flex-col justify-between p-8 text-white">
-        <div className="max-w-xs">
-          <span className="inline-flex rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-white/80">
-            Movie Night Ready
-          </span>
-          <h1 className="mt-6 text-4xl font-semibold leading-tight">
-            Track every movie and series in one cinematic hub.
-          </h1>
-          <p className="mt-4 text-sm leading-6 text-white/75">
-            Save your watchlist, discover what to stream next, and keep your entertainment world organized.
-          </p>
-        </div>
-        <div className="rounded-2xl border border-white/10 bg-black/30 p-4 backdrop-blur-sm">
-          <p className="text-xs uppercase tracking-[0.25em] text-amber-300/90">Tonight&apos;s vibe</p>
-          <p className="mt-2 text-lg font-medium">Big screen energy with a premium streaming feel.</p>
-          <p className="mt-3 text-[10px] text-white/60">
-            Photo by{' '}
-            <a className="underline decoration-white/30 underline-offset-2" href={image?.photographer_url} target="_blank" rel="noreferrer">
-              {image?.photographer || 'Pexels'}
-            </a>
-            {' '}on Pexels
-          </p>
-        </div>
+      <div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
+           style={{
+               backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
+               backgroundSize: 'cover',
+               backgroundPosition: 'left center',
+               backgroundRepeat: 'no-repeat',
+           }}>
+          <div className="flex justify-center w-full bg-blue-300/20">
+              <a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
+                  by {image?.photographer} on Pexels</a>
+          </div>
       </div>
-    </div>
-  );
+  )
 
+  const videoBlock = (video) => {
+      if (video?.video_files?.length > 0) {
+          return (
+              <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
+                  <video
+                      className='absolute top-0 left-0 w-full h-full object-cover'
+                      autoPlay
+                      loop
+                      muted
+                  >
+                      <source src={video.video_files[0]?.link} type='video/mp4'/>
+                      Your browser does not support the video tag.
+                  </video>
+                  <div className='flex justify-center w-full bg-blue-300/20 z-10'>
+                      <a
+                          className='text-[8px]'
+                          href={video.user.url}
+                          target='_blank'
+                          rel='noreferrer'
+                      >
+                          Video by {video.user.name} on Pexels
+                      </a>
+                  </div>
+              </div>)
+      }
+  };
 
   return (
       <div style={contentPosition === 'background' ? {
@@ -154,7 +159,8 @@ export default function Login() {
 
         <SectionFullScreen bg='violet'>
           <div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
-            {contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
+            {contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
+            {contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
             <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
               
                 <CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>