diff --git a/prisma/seed.ts b/prisma/seed.ts
index 436a664ca..6f41bda93 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -140,6 +140,24 @@ async function seedContent() {
         parentId: folderId,
         commentsCount: 0,
       },
+      {
+        type: 'video',
+        title: 'test video 2 for week 1',
+        hidden: false,
+        thumbnail:
+          'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
+        parentId: folderId,
+        commentsCount: 0,
+      },
+      {
+        type: 'video',
+        title: 'test video-3 for week 1',
+        hidden: false,
+        thumbnail:
+          'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
+        parentId: folderId,
+        commentsCount: 0,
+      },
     ];
 
     const createdContent = await db.content.createMany({ data: contentData });
@@ -181,37 +199,147 @@ async function seedNotionMetadata() {
 
 async function seedVideoMetadata() {
   try {
-    await db.videoMetadata.create({
-      data: {
-        id: 1,
-        contentId: 3,
-        video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_1080p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_1080p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_1080p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_1080p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_1080p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_720p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_720p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_720p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_720p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_720p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_720p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_720p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_720p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_360p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_360p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_360p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_360p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_360p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        slides:
-          'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
-      },
+    await db.videoMetadata.createMany({
+      data: [
+        {
+          id: 1,
+          contentId: 3,
+          video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_1080p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_1080p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_1080p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_1080p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_1080p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_720p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_720p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_720p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_720p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_720p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_720p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_720p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_720p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_360p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_360p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_360p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_360p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_360p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          slides:
+            'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
+        },
+        {
+          id: 2,
+          contentId: 4,
+          video_1080p_mp4_1:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_1080p_mp4_2:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_1080p_mp4_3:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_1080p_mp4_4:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_1080p_1:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_1080p_2:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_1080p_3:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_1080p_4:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_720p_mp4_1:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_720p_mp4_2:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_720p_mp4_3:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_720p_mp4_4:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_720p_1:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_720p_2:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_720p_3:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_720p_4:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_360p_mp4_1:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_360p_mp4_2:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_360p_mp4_3:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_360p_mp4_4:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_360p_1:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_360p_2:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_360p_3:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          video_360p_4:
+            'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
+          slides:
+            'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
+        },
+        {
+          id: 3,
+          contentId: 5,
+          video_1080p_mp4_1:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_1080p_mp4_2:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_1080p_mp4_3:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_1080p_mp4_4:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_1080p_1:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_1080p_2:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_1080p_3:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_1080p_4:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_720p_mp4_1:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_720p_mp4_2:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_720p_mp4_3:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_720p_mp4_4:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_720p_1:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_720p_2:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_720p_3:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_720p_4:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_360p_mp4_1:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_360p_mp4_2:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_360p_mp4_3:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_360p_mp4_4:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_360p_1:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_360p_2:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_360p_3:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          video_360p_4:
+            'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+          slides:
+            'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
+        },
+      ],
     });
   } catch (error) {
     console.error('Error seeding video metadata:', error);
diff --git a/src/actions/videopreview/videoPreview.tsx b/src/actions/videopreview/videoPreview.tsx
index 3e0611227..86db32902 100644
--- a/src/actions/videopreview/videoPreview.tsx
+++ b/src/actions/videopreview/videoPreview.tsx
@@ -4,15 +4,24 @@ import db from '@/db';
 export default async function VideoPreview({
   contentId,
 }: {
-  contentId: number;
+  contentId: number | undefined;
 }) {
+  if (!contentId) return null;
   const videoMetadata = await db.videoMetadata.findFirst({
     where: { contentId },
-    select: { video_360p_1: true },
+    select: {
+      video_360p_1: true,
+      video_360p_2: true,
+      video_360p_3: true,
+      video_360p_4: true,
+    },
   });
+  if (!videoMetadata) return null;
+  const videoUrl =
+    videoMetadata.video_360p_1 ||
+    videoMetadata.video_360p_2 ||
+    videoMetadata.video_360p_3 ||
+    videoMetadata.video_360p_4;
 
-  if (videoMetadata) {
-    return videoMetadata.video_360p_1;
-  }
-  return null;
+  return videoUrl;
 }
diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
index b816c93ac..362e44743 100644
--- a/src/components/ContentCard.tsx
+++ b/src/components/ContentCard.tsx
@@ -70,7 +70,8 @@ export const ContentCard = ({
       {type === 'video' && (
         <div className="relative overflow-hidden rounded-md">
           <VideoThumbnail
-            contentId={contentId ?? 0}
+            //@ts-ignore
+            contentId={contentId}
             imageUrl={
               'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png'
             }
diff --git a/src/components/videothumbnail.tsx b/src/components/videothumbnail.tsx
index 5317e8d3a..eca28b9ad 100644
--- a/src/components/videothumbnail.tsx
+++ b/src/components/videothumbnail.tsx
@@ -1,6 +1,58 @@
-import React, { useState } from 'react';
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import videojs from 'video.js';
+import Player from 'video.js/dist/types/player';
+import 'video.js/dist/video-js.css';
+import 'videojs-contrib-eme';
+import 'videojs-mobile-ui/dist/videojs-mobile-ui.css';
 import VideoPreview from '@/actions/videopreview/videoPreview';
-import { useEffect } from 'react';
+
+export const VideoRender = ({ options, onReady }: any) => {
+  const videoRef = useRef<HTMLDivElement>(null);
+  const playerRef = useRef<Player | null>(null);
+
+  useEffect(() => {
+    if (!playerRef.current && videoRef.current) {
+      const videoElement = document.createElement('video-js');
+      videoElement.classList.add('vjs-big-play-centered');
+      videoRef.current.appendChild(videoElement);
+      const player: any = (playerRef.current = videojs(
+        videoElement,
+        {
+          ...options,
+        },
+        () => {
+          player.mobileUi(); // mobile ui #https://github.com/mister-ben/videojs-mobile-ui
+          player.eme(); // Initialize EME
+          player.on('loadedmetadata', () => {
+            if (onReady) {
+              onReady(player);
+            }
+          });
+        },
+      ));
+    }
+  }, [options, onReady]);
+
+  useEffect(() => {
+    const player = playerRef.current;
+    return () => {
+      if (player && !player.isDisposed()) {
+        player.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      data-vjs-player
+      className="mx-auto md:max-w-[calc(100vw-3rem)] 2xl:max-w-[calc(100vw-17rem)]"
+    >
+      <div ref={videoRef} />
+    </div>
+  );
+};
 
 const VideoThumbnail = ({
   imageUrl,
@@ -10,35 +62,80 @@ const VideoThumbnail = ({
   contentId: number;
 }) => {
   const [videoUrl, setVideoUrl] = useState<string | null>(null);
+  const [videoType, setVideoType] = useState<string | null>(null);
   const [hover, setHover] = useState(false);
-
+  const playerRef = useRef(null);
   useEffect(() => {
-    async function fetchVideoUrl() {
-      const url = await VideoPreview({ contentId });
-      setVideoUrl(url);
-    }
+    let isMounted = true;
+
+    const fetchVideoUrl = async () => {
+      if (contentId !== undefined) {
+        try {
+          const url = await VideoPreview({ contentId });
+          if (isMounted && url) {
+            setVideoUrl(url);
+            if (url.endsWith('.mpd')) {
+              setVideoType('application/dash+xml');
+            } else if (url.endsWith('.m3u8')) {
+              setVideoType('application/x-mpegURL');
+            } else if (url.endsWith('.mp4')) {
+              setVideoType('video/mp4');
+            } else {
+              setVideoType('application/dash+xml');
+            }
+          }
+        } catch (error) {
+          console.error('Failed to fetch video URL', error);
+        }
+      }
+    };
+
     fetchVideoUrl();
+
+    return () => {
+      isMounted = false;
+      setVideoUrl(null);
+    };
   }, [contentId]);
+  let hoverTimeout: any;
   const handleMouseEnter = () => {
+    hoverTimeout = setTimeout(() => {
+      setHover(true);
+    }, 500);
     setHover(true);
   };
 
   const handleMouseLeave = () => {
+    clearTimeout(hoverTimeout);
     setHover(false);
   };
+  const handlePlayerReady = async (player: Player) => {
+    //@ts-ignore
+    playerRef.current = player;
+  };
+  const videoJsOptions = {
+    sources: [
+      {
+        src: videoUrl,
+        type: videoType,
+      },
+    ],
+    muted: true,
+    autoplay: true,
+    controls: false,
+    preload: 'auto',
+    fluid: true,
+  };
+
   return (
-    <div
-      className="m relative max-h-[573px] max-w-[1053px]"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div className="relative h-full w-full">
+    <div className="max-h-[573px] max-w-[1053px] relative">
+      <div
+        className="w-full h-full relative"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
         {hover && videoUrl ? (
-          <div className="h-full w-full">
-            <video muted autoPlay width="100%" height="100%">
-              <source src={videoUrl} type="video/mp4" />
-            </video>
-          </div>
+          <VideoRender options={videoJsOptions} onReady={handlePlayerReady} />
         ) : (
           <img
             src={imageUrl}