diff --git a/admin/components/VideoPlayer/index.tsx b/admin/components/VideoPlayer/index.tsx
new file mode 100644
index 0000000..117346d
--- /dev/null
+++ b/admin/components/VideoPlayer/index.tsx
@@ -0,0 +1,45 @@
+import { useState } from "react";
+import Image from "next/image";
+interface VideoPlayerProps {
+  src: string;
+  poster: string;
+  classes: string;
+}
+
+const VideoPlayer = ({ src, poster, classes }: VideoPlayerProps) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const handleVideoLoaded = () => {
+    setLoaded(true);
+  };
+
+  return (
+    <div className="h-full w-full">
+      {!loaded && (
+        <Image
+          src={poster}
+          alt="Video Thumbnail"
+          height={100}
+          width={100}
+          className={classes}
+        />
+      )}
+      <video
+        src={src}
+        loop
+        autoPlay
+        muted
+        playsInline
+        webkit-playsinline
+        className={`${classes} transition duration-500 ${
+          loaded ? "opacity-100" : "opacity-0"
+        }`}
+        onLoadedData={handleVideoLoaded}
+      >
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
+export default VideoPlayer;
diff --git a/admin/pages/dishes/add/index.tsx b/admin/pages/dishes/add/index.tsx
index e1bfe8e..44f34aa 100644
--- a/admin/pages/dishes/add/index.tsx
+++ b/admin/pages/dishes/add/index.tsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import supabase from "@/utils/supabase";
-import { FormEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { z } from "zod";
 import { useRouter } from "next/navigation";
 import { TagsInput } from "react-tag-input-component";
@@ -37,6 +37,17 @@ const AddDishPage = () => {
     previewName: string;
   }>;
 
+  const [thumbnailData, setThumbnail] = useState<any | null>(null);
+  let thumbnail: string | null = null;
+  const [previewThumbnailData, setPreviewThumbnailData] = useState(
+    {} as {
+      previewType: string;
+      previewUrl: string;
+      previewName: string;
+      isDragging: boolean;
+    }
+  );
+
   const [videoData, setVideo] = useState<any | null>(null);
   let video: string | null = null;
   const [previewVideoData, setPreviewVideoData] = useState(
@@ -63,11 +74,19 @@ const AddDishPage = () => {
         images: isImagesChecked
           ? z.array(z.string().min(10)).min(1, { message: "Image is required" })
           : z.null(),
+        video_thumbnail: isVideoChecked
+          ? z
+              .string({
+                required_error: "Video thumbnail is required",
+                invalid_type_error: "Invalid video thumbnail",
+              })
+              .min(10, { message: "Video thumbnail is required" })
+          : z.null(),
         video: isVideoChecked
           ? z
               .string({
                 required_error: "Video is required",
-                invalid_type_error: "Video is required",
+                invalid_type_error: "Invalid video",
               })
               .min(10, { message: "Video is required" })
           : z.null(),
@@ -94,6 +113,20 @@ const AddDishPage = () => {
         }
       } else if (videoData) {
         const currentDate = new Date();
+        const { data: imgData, error: imgErr } = await supabase.storage
+          .from("dishes")
+          .upload(
+            currentDate.getTime() + "-" + thumbnailData.name,
+            thumbnailData
+          );
+
+        if (imgErr) throw imgErr;
+
+        thumbnail =
+          process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
+          "/dishes/" +
+          imgData.path;
+
         const { data: videoStore, error: videoErr } = await supabase.storage
           .from("dishes")
           .upload(currentDate.getTime() + "-" + videoData.name, videoData);
@@ -113,6 +146,7 @@ const AddDishPage = () => {
         tags: tags,
         price: price,
         images: isVideoChecked ? null : images,
+        video_thumbnail: thumbnail,
         video: video,
       });
 
@@ -135,6 +169,7 @@ const AddDishPage = () => {
         price: price,
         description: description,
         images: isVideoChecked ? null : images,
+        video_thumbnail: thumbnail,
         video: video,
         tags: tags.map((tag) => tag.toLowerCase()),
       });
@@ -189,8 +224,12 @@ const AddDishPage = () => {
     setImagesData(files);
   };
 
-  const handleFileUploading = (file: any) => {
-    setVideo(file);
+  const handleThumbnailUploading = (file: any) => {
+    setThumbnail(file);
+  };
+
+  const handleVideoUploading = (video: any) => {
+    setVideo(video);
   };
 
   return (
@@ -539,14 +578,67 @@ const AddDishPage = () => {
               </MultipleFileUpload>
             </div>
           ) : (
-            <div>
+            <div className="flex gap-10">
+              <SingleImgPreview
+                accept="image/*"
+                uploadedFile={[previewThumbnailData, setPreviewThumbnailData]}
+                callback={handleThumbnailUploading}
+              >
+                {!previewThumbnailData || !previewThumbnailData.previewUrl ? (
+                  <div className="relative mb-5.5 flex w-36 h-55 cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray dark:bg-meta-4 items-center justify-center">
+                    <div className="flex flex-col items-center justify-center space-y-3">
+                      <span className="flex h-10 w-10 items-center justify-center rounded-full border border-stroke bg-white dark:border-strokedark dark:bg-boxdark">
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M1.99967 9.33337C2.36786 9.33337 2.66634 9.63185 2.66634 10V12.6667C2.66634 12.8435 2.73658 13.0131 2.8616 13.1381C2.98663 13.2631 3.1562 13.3334 3.33301 13.3334H12.6663C12.8431 13.3334 13.0127 13.2631 13.1377 13.1381C13.2628 13.0131 13.333 12.8435 13.333 12.6667V10C13.333 9.63185 13.6315 9.33337 13.9997 9.33337C14.3679 9.33337 14.6663 9.63185 14.6663 10V12.6667C14.6663 13.1971 14.4556 13.7058 14.0806 14.0809C13.7055 14.456 13.1968 14.6667 12.6663 14.6667H3.33301C2.80257 14.6667 2.29387 14.456 1.91879 14.0809C1.54372 13.7058 1.33301 13.1971 1.33301 12.6667V10C1.33301 9.63185 1.63148 9.33337 1.99967 9.33337Z"
+                            fill="#3C50E0"
+                          />
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M7.5286 1.52864C7.78894 1.26829 8.21106 1.26829 8.4714 1.52864L11.8047 4.86197C12.0651 5.12232 12.0651 5.54443 11.8047 5.80478C11.5444 6.06513 11.1223 6.06513 10.8619 5.80478L8 2.94285L5.13807 5.80478C4.87772 6.06513 4.45561 6.06513 4.19526 5.80478C3.93491 5.54443 3.93491 5.12232 4.19526 4.86197L7.5286 1.52864Z"
+                            fill="#3C50E0"
+                          />
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M7.99967 1.33337C8.36786 1.33337 8.66634 1.63185 8.66634 2.00004V10C8.66634 10.3682 8.36786 10.6667 7.99967 10.6667C7.63148 10.6667 7.33301 10.3682 7.33301 10V2.00004C7.33301 1.63185 7.63148 1.33337 7.99967 1.33337Z"
+                            fill="#3C50E0"
+                          />
+                        </svg>
+                      </span>
+                      <p className="text-primary">Click to upload</p>
+                      <p className="text-sm">video thumbnail</p>
+                      <p className="mt-1.5 text-xs">PNG, JPG or JPEG</p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center">
+                    <Image
+                      className="h-55 w-36 rounded-xl object-cover"
+                      src={previewThumbnailData.previewUrl as string}
+                      height={224}
+                      width={300}
+                      alt="thumbnail-image"
+                    />
+                  </div>
+                )}
+              </SingleImgPreview>
               <SingleImgPreview
                 accept="video/*"
                 uploadedFile={[previewVideoData, setPreviewVideoData]}
-                callback={handleFileUploading}
+                callback={handleVideoUploading}
               >
                 {!previewVideoData || !previewVideoData.previewUrl ? (
-                  <div className="relative block h-55 w-full cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray p-5 dark:bg-meta-4 sm:py-7.5">
+                  <div className="relative flex h-55 w-36 cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray dark:bg-meta-4 items-center justify-center">
                     <div className="flex flex-col items-center justify-center space-y-3">
                       <span className="flex h-10 w-10 items-center justify-center rounded-full border border-stroke bg-white dark:border-strokedark dark:bg-boxdark">
                         <svg
@@ -576,9 +668,7 @@ const AddDishPage = () => {
                           />
                         </svg>
                       </span>
-                      <p>
-                        <span className="text-primary">Click to upload</span>
-                      </p>
+                      <p className="text-primary">Click to upload</p>
                       <p>video for dish</p>
                       <p className="mt-1.5 text-xs">Video MP4</p>
                     </div>
@@ -589,7 +679,7 @@ const AddDishPage = () => {
                       autoPlay
                       loop
                       muted
-                      className="h-55 w-40 object-cover"
+                      className="h-55 w-36 rounded-xl object-cover"
                       key={previewVideoData.previewUrl}
                     >
                       <source
@@ -604,7 +694,8 @@ const AddDishPage = () => {
           )}
           <div className="mt-1 text-xs text-meta-1">
             {errors.find((error) => error.for === "images")?.message ||
-              errors.find((error) => error.for === "video")?.message}
+              errors.find((error) => error.for === "video")?.message ||
+              errors.find((error) => error.for === "video_thumbnail")?.message}
           </div>
           <div className="text-end">
             <button
diff --git a/admin/pages/dishes/edit/[id].tsx b/admin/pages/dishes/edit/[id].tsx
index 24aa481..89af29b 100644
--- a/admin/pages/dishes/edit/[id].tsx
+++ b/admin/pages/dishes/edit/[id].tsx
@@ -11,6 +11,12 @@ import SingleImgPreview from "@/components/ImagePreview/SingleImage";
 import { getFilenameFromURL } from "@/utils/image";
 import { getCookiesValue } from "@/utils/jwt-auth";
 
+interface PreviewData {
+  previewType: string;
+  previewUrl: string;
+  previewName: string;
+}
+
 const EditDishPage = () => {
   const router = useRouter();
   const { id } = router.query;
@@ -42,14 +48,15 @@ const EditDishPage = () => {
     }>
   >();
 
+  const [thumbnailData, setThumbnailData] = useState<any | null>(null);
+  const [thumbnail, setThumbnail] = useState<string | null>(null);
+  const [previewThumbnailData, setPreviewThumbnailData] =
+    useState<PreviewData | null>(null);
+
   const [videoData, setVideoData] = useState<any | null>(null);
   const [video, setVideo] = useState<string | null>(null);
-  const [previewVideoData, setPreviewVideoData] = useState(
-    {} as {
-      previewType: string;
-      previewUrl: string;
-      previewName: string;
-    }
+  const [previewVideoData, setPreviewVideoData] = useState<PreviewData | null>(
+    null
   );
 
   const handleEditDish = async (e: any) => {
@@ -57,6 +64,7 @@ const EditDishPage = () => {
     setIsLoading(true);
 
     try {
+      let new_video_thumbnail = thumbnail;
       let new_video = video;
 
       const mySchema = z.object({
@@ -68,6 +76,14 @@ const EditDishPage = () => {
         images: isImagesChecked
           ? z.array(z.string().min(10)).min(1, { message: "Image is required" })
           : z.null(),
+        video_thumbnail: isVideoChecked
+          ? z
+              .string({
+                required_error: "Video thumbnail is required",
+                invalid_type_error: "Video thumbnail is required",
+              })
+              .min(10, { message: "Video thumbnail is required" })
+          : z.null(),
         video: isVideoChecked
           ? z
               .string({
@@ -119,32 +135,66 @@ const EditDishPage = () => {
         }
 
         if (video) {
-          const { error } = await supabase.storage
+          if (thumbnail) {
+            const { error: thumbnailErr } = await supabase.storage
+              .from("dishes")
+              .remove([getFilenameFromURL(thumbnail)]);
+
+            if (thumbnailErr) throw thumbnailErr;
+          }
+
+          const { error: videoErr } = await supabase.storage
             .from("dishes")
             .remove([getFilenameFromURL(video)]);
 
-          if (error) throw error;
+          if (videoErr) throw videoErr;
         }
-      } else if (videoData) {
-        if (video) {
-          const { error } = await supabase.storage
+      } else {
+        const currentDate = new Date();
+        if (videoData) {
+          const { data: videoStore, error: videoErr } = await supabase.storage
             .from("dishes")
-            .remove([getFilenameFromURL(video)]);
+            .upload(currentDate.getTime() + "-" + videoData.name, videoData);
+
+          if (videoErr) throw videoErr;
+
+          new_video =
+            process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
+            "/dishes/" +
+            videoStore.path;
 
-          if (error) throw error;
+          if (video) {
+            const { error: videoErr } = await supabase.storage
+              .from("dishes")
+              .remove([getFilenameFromURL(video)]);
+
+            if (videoErr) throw videoErr;
+          }
         }
 
-        const currentDate = new Date();
-        const { data: videoStore, error: videoErr } = await supabase.storage
-          .from("dishes")
-          .upload(currentDate.getTime() + "-" + videoData.name, videoData);
+        if (thumbnailData) {
+          const { data: imgData, error: imgErr } = await supabase.storage
+            .from("dishes")
+            .upload(
+              currentDate.getTime() + "-" + thumbnailData.name,
+              thumbnailData
+            );
+
+          if (imgErr) throw imgErr;
 
-        if (videoErr) throw videoErr;
+          new_video_thumbnail =
+            process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
+            "/dishes/" +
+            imgData.path;
 
-        new_video =
-          process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
-          "/dishes/" +
-          videoStore.path;
+          if (thumbnail) {
+            const { error: thumbnailErr } = await supabase.storage
+              .from("dishes")
+              .remove([getFilenameFromURL(thumbnail)]);
+
+            if (thumbnailErr) throw thumbnailErr;
+          }
+        }
 
         if (images) {
           for (var i = 0; i < images.length; i++) {
@@ -165,6 +215,7 @@ const EditDishPage = () => {
         price: price,
         images: isVideoChecked ? null : new_images,
         video: isImagesChecked ? null : new_video,
+        video_thumbnail: isImagesChecked ? null : new_video_thumbnail,
       });
 
       if (!response.success) {
@@ -188,6 +239,7 @@ const EditDishPage = () => {
         description: description,
         images: isVideoChecked ? null : new_images,
         video: isImagesChecked ? null : new_video,
+        video_thumbnail: isImagesChecked ? null : new_video_thumbnail,
         tags: tags.map((tag) => tag.toLowerCase()),
       });
 
@@ -236,7 +288,7 @@ const EditDishPage = () => {
         const { data, error } = await supabase
           .from("dishes")
           .select(
-            "id, category_id, menu_id, name, description, price, images, video, tags"
+            "id, category_id, menu_id, name, description, price, tags, images, video, video_thumbnail"
           )
           .eq("id", id)
           .single();
@@ -249,6 +301,14 @@ const EditDishPage = () => {
         setCategoryOption(data.category_id);
         setPrice(data.price);
         setTags(data.tags);
+
+        setThumbnail(data.video_thumbnail);
+        setPreviewThumbnailData({
+          previewType: "",
+          previewUrl: data.video_thumbnail,
+          previewName: "",
+        });
+
         setVideo(data.video);
         setPreviewVideoData({
           previewType: "",
@@ -290,8 +350,12 @@ const EditDishPage = () => {
     setImagesData(files);
   };
 
-  const handleFileUploading = (file: any) => {
-    setVideoData(file);
+  const handleThumbnailUploading = (file: any) => {
+    setThumbnailData(file);
+  };
+
+  const handleVideoUploading = (video: any) => {
+    setVideoData(video);
   };
 
   return (
@@ -610,14 +674,67 @@ const EditDishPage = () => {
               </MultipleFileUpload>
             </div>
           ) : (
-            <div>
+            <div className="flex gap-10">
+              <SingleImgPreview
+                accept="image/*"
+                uploadedFile={[previewThumbnailData, setPreviewThumbnailData]}
+                callback={handleThumbnailUploading}
+              >
+                {!previewThumbnailData || !previewThumbnailData.previewUrl ? (
+                  <div className="relative flex h-55 w-36 cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray dark:bg-meta-4 items-center justify-center">
+                    <div className="flex flex-col items-center justify-center space-y-3">
+                      <span className="flex h-10 w-10 items-center justify-center rounded-full border border-stroke bg-white dark:border-strokedark dark:bg-boxdark">
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M1.99967 9.33337C2.36786 9.33337 2.66634 9.63185 2.66634 10V12.6667C2.66634 12.8435 2.73658 13.0131 2.8616 13.1381C2.98663 13.2631 3.1562 13.3334 3.33301 13.3334H12.6663C12.8431 13.3334 13.0127 13.2631 13.1377 13.1381C13.2628 13.0131 13.333 12.8435 13.333 12.6667V10C13.333 9.63185 13.6315 9.33337 13.9997 9.33337C14.3679 9.33337 14.6663 9.63185 14.6663 10V12.6667C14.6663 13.1971 14.4556 13.7058 14.0806 14.0809C13.7055 14.456 13.1968 14.6667 12.6663 14.6667H3.33301C2.80257 14.6667 2.29387 14.456 1.91879 14.0809C1.54372 13.7058 1.33301 13.1971 1.33301 12.6667V10C1.33301 9.63185 1.63148 9.33337 1.99967 9.33337Z"
+                            fill="#3C50E0"
+                          />
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M7.5286 1.52864C7.78894 1.26829 8.21106 1.26829 8.4714 1.52864L11.8047 4.86197C12.0651 5.12232 12.0651 5.54443 11.8047 5.80478C11.5444 6.06513 11.1223 6.06513 10.8619 5.80478L8 2.94285L5.13807 5.80478C4.87772 6.06513 4.45561 6.06513 4.19526 5.80478C3.93491 5.54443 3.93491 5.12232 4.19526 4.86197L7.5286 1.52864Z"
+                            fill="#3C50E0"
+                          />
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M7.99967 1.33337C8.36786 1.33337 8.66634 1.63185 8.66634 2.00004V10C8.66634 10.3682 8.36786 10.6667 7.99967 10.6667C7.63148 10.6667 7.33301 10.3682 7.33301 10V2.00004C7.33301 1.63185 7.63148 1.33337 7.99967 1.33337Z"
+                            fill="#3C50E0"
+                          />
+                        </svg>
+                      </span>
+                      <p className="text-primary">Click to upload</p>
+                      <p className="text-sm">video thumbnail</p>
+                      <p className="mt-1.5 text-xs">PNG, JPG or JPEG</p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center">
+                    <Image
+                      className="h-55 w-36 rounded-xl object-cover"
+                      src={previewThumbnailData.previewUrl as string}
+                      height={224}
+                      width={300}
+                      alt="thumbnail-image"
+                    />
+                  </div>
+                )}
+              </SingleImgPreview>
               <SingleImgPreview
                 accept="video/*"
                 uploadedFile={[previewVideoData, setPreviewVideoData]}
-                callback={handleFileUploading}
+                callback={handleVideoUploading}
               >
                 {!previewVideoData || !previewVideoData.previewUrl ? (
-                  <div className="relative block h-55 w-full cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray p-5 dark:bg-meta-4 sm:py-7.5">
+                  <div className="relative flex h-55 w-36 cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray dark:bg-meta-4 items-center justify-center">
                     <div className="flex flex-col items-center justify-center space-y-3">
                       <span className="flex h-10 w-10 items-center justify-center rounded-full border border-stroke bg-white dark:border-strokedark dark:bg-boxdark">
                         <svg
@@ -647,9 +764,7 @@ const EditDishPage = () => {
                           />
                         </svg>
                       </span>
-                      <p>
-                        <span className="text-primary">Click to upload</span>
-                      </p>
+                      <p className="text-primary">Click to upload</p>
                       <p>video for dish</p>
                       <p className="mt-1.5 text-xs">Video MP4</p>
                     </div>
@@ -660,7 +775,7 @@ const EditDishPage = () => {
                       autoPlay
                       loop
                       muted
-                      className="h-55 w-40 object-cover"
+                      className="h-55 w-36 rounded-xl object-cover"
                       key={previewVideoData.previewUrl}
                     >
                       <source
diff --git a/admin/pages/dishes/index.tsx b/admin/pages/dishes/index.tsx
index 00157be..b6308c2 100644
--- a/admin/pages/dishes/index.tsx
+++ b/admin/pages/dishes/index.tsx
@@ -7,6 +7,7 @@ import supabase from "@/utils/supabase";
 import PaginationPage from "@/components/pagination/PaginatedPage";
 import { getFilenameFromURL } from "@/utils/image";
 import { getCookiesValue } from "@/utils/jwt-auth";
+import VideoPlayer from "@/components/VideoPlayer";
 
 const DishesPage = () => {
   const [restaurantId, setRestaurantId] = useState<number>(0);
@@ -38,7 +39,9 @@ const DishesPage = () => {
 
       const { data: dishes, error } = await supabase
         .from("dishes")
-        .select(`id, name, images, video, price, menus(*), categories(name)`)
+        .select(
+          `id, name, images, video, video_thumbnail, price, menus(*), categories(name)`
+        )
         .range((page - 1) * pageSize, pageSize * page - 1)
         .in("menu_id", arrayOfIds);
 
@@ -207,14 +210,11 @@ const DishesPage = () => {
                         <div className="flex flex-col gap-4 pl-5 items-center">
                           <div className="h-25 w-17 rounded-md">
                             {dish.video ? (
-                              <video
-                                loop
-                                autoPlay
-                                muted
-                                className={` h-full w-full object-cover`}
-                              >
-                                <source src={dish.video} type="video/mp4" />
-                              </video>
+                              <VideoPlayer
+                                src={dish.video}
+                                poster={dish.video_thumbnail}
+                                classes={"h-full w-full object-cover"}
+                              />
                             ) : (
                               <Image
                                 src={dish.images[0]}
diff --git a/website/components/ItemCard/SingleItem.tsx b/website/components/ItemCard/SingleItem.tsx
index 1616adc..bfa5904 100644
--- a/website/components/ItemCard/SingleItem.tsx
+++ b/website/components/ItemCard/SingleItem.tsx
@@ -1,8 +1,10 @@
 import { ItemProps } from "@/types/card-item";
 import Image from "next/image";
+import VideoPlayer from "../VideoPlayer";
 
 const SingleItem = ({ item }: { item: ItemProps }) => {
-  const { name, description, image, video, price, menus } = item;
+  const { name, description, image, video, video_thumbnail, price, menus } =
+    item;
   return (
     <>
       <div
@@ -11,19 +13,12 @@ const SingleItem = ({ item }: { item: ItemProps }) => {
         data-wow-delay=".1s"
       >
         <div className="relative block h-[20rem] w-full">
-          {video ? (
-            <video
-              loop
-              autoPlay
-              muted
-              playsInline
-              webkit-playsinline
-              className={` w-full object-cover ${
-                video ? "h-[35rem]" : "h-full"
-              }`}
-            >
-              <source src={video} type="video/mp4" />
-            </video>
+          {video && video_thumbnail ? (
+            <VideoPlayer
+              src={video}
+              poster={video_thumbnail}
+              classes={"h-[35rem] w-full rounded-xl object-cover"}
+            />
           ) : (
             <Image
               src={image}
diff --git a/website/components/SkeletonPlaceholders/MenuDish.tsx b/website/components/SkeletonPlaceholders/MenuDish.tsx
new file mode 100644
index 0000000..696aee1
--- /dev/null
+++ b/website/components/SkeletonPlaceholders/MenuDish.tsx
@@ -0,0 +1,17 @@
+const MenuDish = ({ classes }: any) => {
+  return (
+    <div
+      className={`${classes} relative animate-pulse w-full bg-gray-200 dark:bg-gray-900 rounded-xl`}
+    >
+      <div className="absolute flex h-full w-full flex-col gap-3 p-5 pb-10">
+        <div className="flex flex-col justify-end h-full gap-5">
+          <p className="w-2/5 h-5 bg-gray-300 dark:bg-gray-700 rounded-xl"></p>
+          <p className="h-5 bg-gray-300 dark:bg-gray-700 rounded-xl"></p>
+          <p className="h-5 bg-gray-300 dark:bg-gray-700 rounded-xl"></p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MenuDish;
diff --git a/website/components/VideoPlayer/index.tsx b/website/components/VideoPlayer/index.tsx
new file mode 100644
index 0000000..117346d
--- /dev/null
+++ b/website/components/VideoPlayer/index.tsx
@@ -0,0 +1,45 @@
+import { useState } from "react";
+import Image from "next/image";
+interface VideoPlayerProps {
+  src: string;
+  poster: string;
+  classes: string;
+}
+
+const VideoPlayer = ({ src, poster, classes }: VideoPlayerProps) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const handleVideoLoaded = () => {
+    setLoaded(true);
+  };
+
+  return (
+    <div className="h-full w-full">
+      {!loaded && (
+        <Image
+          src={poster}
+          alt="Video Thumbnail"
+          height={100}
+          width={100}
+          className={classes}
+        />
+      )}
+      <video
+        src={src}
+        loop
+        autoPlay
+        muted
+        playsInline
+        webkit-playsinline
+        className={`${classes} transition duration-500 ${
+          loaded ? "opacity-100" : "opacity-0"
+        }`}
+        onLoadedData={handleVideoLoaded}
+      >
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
+export default VideoPlayer;
diff --git a/website/pages/category/restaurant.tsx b/website/pages/category/restaurant.tsx
index 194cdd7..80f5827 100644
--- a/website/pages/category/restaurant.tsx
+++ b/website/pages/category/restaurant.tsx
@@ -31,26 +31,13 @@ const Restaurant = ({
                 key={"may-like-" + item.id}
                 className="animated-fade-y group relative h-full cursor-pointer"
               >
-                {item.video ? (
-                  <video
-                    className="h-60 w-full border-b border-black object-cover pb-2 dark:border-white/40 sm:h-[30rem]"
-                    autoPlay
-                    loop
-                    muted
-                    playsInline
-                    webkit-playsinline
-                  >
-                    <source src={item.video} type="video/mp4" />
-                  </video>
-                ) : (
-                  <Image
-                    src={item.image as string}
-                    className="h-60 w-full border-b border-black object-cover pb-2 dark:border-white/40 sm:h-[30rem]"
-                    alt="item-image"
-                    height={100}
-                    width={100}
-                  />
-                )}
+                <Image
+                  src={item.image as string}
+                  className="h-60 w-full border-b border-black object-cover pb-2 dark:border-white/40 sm:h-[30rem]"
+                  alt="item-image"
+                  height={100}
+                  width={100}
+                />
                 <p className="absolute -mt-14 w-full bg-black bg-opacity-35 pb-2 pl-5 pt-2 text-xl font-extrabold capitalize text-white dark:border-white sm:text-2xl">
                   {item.name}
                 </p>
@@ -60,7 +47,7 @@ const Restaurant = ({
                 <div className="absolute bottom-0 flex w-full flex-col gap-2">
                   <div className="flex items-center justify-between font-extrabold">
                     {item.reviews > 0 ? (
-                      <p className="">
+                      <p>
                         {item.reviews}{" "}
                         <span className="text-sm font-normal"> Reviews</span>
                       </p>
diff --git a/website/pages/restaurants/[id]/index.tsx b/website/pages/restaurants/[id]/index.tsx
index dd0b997..e8a5b06 100644
--- a/website/pages/restaurants/[id]/index.tsx
+++ b/website/pages/restaurants/[id]/index.tsx
@@ -14,6 +14,8 @@ import { InView } from "react-intersection-observer";
 import { useRouter } from "next/router";
 import RootLayout from "@/pages/layout";
 import NotFound from "@/components/PageNotFound";
+import VideoPlayer from "@/components/VideoPlayer";
+import MenuDish from "@/components/SkeletonPlaceholders/MenuDish";
 
 const RestaurantMenu = () => {
   const router = useRouter();
@@ -21,6 +23,7 @@ const RestaurantMenu = () => {
   const suffix = id?.toString().substring(id?.lastIndexOf("-") + 1);
 
   const [isRestaurantLoading, setIsRestaurantLoading] = useState(true);
+  const [isDishesLoading, setIsDishesLoading] = useState(true);
   const [restaurantData, setRestaurantData] = useState<any | null>(null);
   const [menuData, setMenuData] = useState<any[]>([]);
 
@@ -59,7 +62,9 @@ const RestaurantMenu = () => {
             menusData.map(async (menu) => {
               const { data: dishData, error: dishError } = await supabase
                 .from("dishes")
-                .select("id, name, description, price, images, video")
+                .select(
+                  "id, name, description, price, images, video, video_thumbnail"
+                )
                 .eq("menu_id", menu.id);
 
               if (dishError) {
@@ -76,6 +81,8 @@ const RestaurantMenu = () => {
           setMenuData(dishes);
         } catch (error) {
           console.error("Error fetching dishes data:", error);
+        } finally {
+          setIsDishesLoading(false);
         }
       }
     };
@@ -178,70 +185,75 @@ const RestaurantMenu = () => {
                             <p className="border-b border-black/10 pb-2 text-3xl font-bold dark:border-white/30">
                               {item.name}
                             </p>
-                            <div className="grid h-full w-full grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                              {item.dishes.map((data: any) => (
-                                <div
-                                  key={"desktop-dish-" + data.id}
-                                  id={"desktop-dish-" + data.id}
-                                  className="animated-fade-y relative w-full"
-                                >
-                                  {data.video ? (
-                                    <video
-                                      loop
-                                      autoPlay
-                                      muted
-                                      playsInline
-                                      webkit-playsinline
-                                      className="h-[30rem] w-full rounded-xl object-cover"
-                                    >
-                                      <source
+                            {isDishesLoading ? (
+                              <div className="grid h-full w-full grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                                <MenuDish classes="h-[30rem]" />
+                                <MenuDish classes="h-[30rem]" />
+                                <MenuDish classes="h-[30rem]" />
+                                <MenuDish classes="h-[30rem]" />
+                              </div>
+                            ) : (
+                              <div className="grid h-full w-full grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                                {item.dishes.map((data: any) => (
+                                  <div
+                                    key={"desktop-dish-" + data.id}
+                                    id={"desktop-dish-" + data.id}
+                                    className="animated-fade-y relative w-full"
+                                  >
+                                    {data.video ? (
+                                      <VideoPlayer
                                         src={data.video}
-                                        type="video/mp4"
+                                        poster={data.video_thumbnail}
+                                        classes={
+                                          "h-[30rem] w-full rounded-xl object-cover"
+                                        }
                                       />
-                                    </video>
-                                  ) : (
-                                    <Swiper
-                                      modules={[Autoplay, EffectFade]}
-                                      slidesPerView={1}
-                                      loop={true}
-                                      autoplay={true}
-                                      effect="fade"
-                                      className="h-[30rem] w-full rounded-xl"
-                                    >
-                                      {data.images.map((data: any) => (
-                                        <div
-                                          key={"desktop-image-" + data}
-                                          id={"image-" + data}
-                                        >
-                                          <SwiperSlide>
-                                            <Image
-                                              src={data}
-                                              height={100}
-                                              width={100}
-                                              alt="menu-dish-image"
-                                              className="h-full w-full object-cover"
-                                            />
-                                          </SwiperSlide>
+                                    ) : (
+                                      <Swiper
+                                        modules={[Autoplay, EffectFade]}
+                                        slidesPerView={1}
+                                        loop={true}
+                                        autoplay={true}
+                                        effect="fade"
+                                        className="h-[30rem] w-full rounded-xl"
+                                      >
+                                        {data.images.map((data: any) => (
+                                          <div
+                                            key={"desktop-image-" + data}
+                                            id={"image-" + data}
+                                          >
+                                            <SwiperSlide>
+                                              <Image
+                                                src={data}
+                                                height={100}
+                                                width={100}
+                                                alt="menu-dish-image"
+                                                className="h-full w-full object-cover"
+                                              />
+                                            </SwiperSlide>
+                                          </div>
+                                        ))}
+                                      </Swiper>
+                                    )}
+                                    <div className="absolute top-0 z-[1] h-full w-full rounded-xl bg-gradient-to-t from-black/80 via-transparent to-transparent">
+                                      <div className="w-full absolute bottom-0 flex flex-col gap-2 px-4 pb-4 text-gray-200 dark:text-gray-300">
+                                        <div className="flex items-center justify-between gap-5 border-b border-gray-300 border-opacity-30 pb-1 text-xl font-bold">
+                                          <p className="min-w-2/5 text-white">
+                                            {data.name}
+                                          </p>
+                                          <p className="text-lg">
+                                            ₹{data.price}
+                                          </p>
                                         </div>
-                                      ))}
-                                    </Swiper>
-                                  )}
-                                  <div className="absolute top-0 z-[1] h-full w-full rounded-xl bg-gradient-to-t from-black/80 via-transparent to-transparent">
-                                    <div className="absolute bottom-0 flex flex-col gap-2 px-4 pb-4 text-gray-200 dark:text-gray-300">
-                                      <div className="flex items-center justify-between gap-5 border-b border-gray-300 border-opacity-30 pb-1 text-xl font-bold">
-                                        <p className="min-w-2/5 text-white">
-                                          {data.name}
+                                        <p className="text-xs">
+                                          {data.description}
                                         </p>
-                                        <p className="text-lg">₹{data.price}</p>
                                       </div>
-                                      <p className="text-xs">
-                                        {data.description}
-                                      </p>
                                     </div>
                                   </div>
-                                </div>
-                              ))}
-                            </div>
+                                ))}
+                              </div>
+                            )}
                           </div>
                         )}
                       </InView>
@@ -330,68 +342,71 @@ const RestaurantMenu = () => {
                   {menuData.map((item: any) =>
                     item.dishes.length > 0 ? (
                       <div key={"mobile-menu-" + item.id} className="reel">
-                        <div className="reelsContainer scrollbar-hidden h-full w-full">
-                          {item.dishes.map((data: any) => (
-                            <div
-                              key={"mobile-dish-" + data.id}
-                              className="reel relative w-full"
-                            >
-                              {data.video ? (
-                                <video
-                                  loop
-                                  autoPlay
-                                  muted
-                                  playsInline
-                                  webkit-playsinline
-                                  className="h-full w-full rounded-xl object-cover"
-                                >
-                                  <source src={data.video} type="video/mp4" />
-                                </video>
-                              ) : (
-                                <Swiper
-                                  modules={[Autoplay, EffectFade]}
-                                  slidesPerView={1}
-                                  loop={true}
-                                  autoplay={true}
-                                  effect="fade"
-                                  className="h-screen w-full"
-                                >
-                                  {data.images.map((data: any) => (
-                                    <div key={"mobile-image-" + data}>
-                                      <SwiperSlide>
-                                        <div
-                                          className="h-full"
-                                          style={{
-                                            backgroundImage: `url(${data})`,
-                                          }}
-                                        >
-                                          <div className="flex h-full w-full items-center bg-black bg-opacity-20 backdrop-blur-sm">
-                                            <Image
-                                              src={data}
-                                              height={100}
-                                              width={100}
-                                              alt="menu-dish-image"
-                                              className="w-full"
-                                            />
+                        {isDishesLoading ? (
+                          <div className="reelsContainer scrollbar-hidden h-full w-full">
+                            <MenuDish classes="reel" />
+                          </div>
+                        ) : (
+                          <div className="reelsContainer scrollbar-hidden h-full w-full">
+                            {item.dishes.map((data: any) => (
+                              <div
+                                key={"mobile-dish-" + data.id}
+                                className="reel relative w-full"
+                              >
+                                {data.video ? (
+                                  <VideoPlayer
+                                    src={data.video}
+                                    poster={data.video_thumbnail}
+                                    classes={
+                                      "h-full w-full rounded-xl object-cover"
+                                    }
+                                  />
+                                ) : (
+                                  <Swiper
+                                    modules={[Autoplay, EffectFade]}
+                                    slidesPerView={1}
+                                    loop={true}
+                                    autoplay={true}
+                                    effect="fade"
+                                    className="h-screen w-full"
+                                  >
+                                    {data.images.map((data: any) => (
+                                      <div key={"mobile-image-" + data}>
+                                        <SwiperSlide>
+                                          <div
+                                            className="h-full"
+                                            style={{
+                                              backgroundImage: `url(${data})`,
+                                            }}
+                                          >
+                                            <div className="flex h-full w-full items-center bg-black bg-opacity-20 backdrop-blur-sm">
+                                              <Image
+                                                src={data}
+                                                height={100}
+                                                width={100}
+                                                alt="menu-dish-image"
+                                                className="w-full"
+                                              />
+                                            </div>
                                           </div>
-                                        </div>
-                                      </SwiperSlide>
-                                    </div>
-                                  ))}
-                                </Swiper>
-                              )}
-                              <div className="absolute bottom-0 z-[1] flex h-full w-full flex-col gap-3 bg-gradient-to-t from-black/80 via-transparent to-black/60 p-5 pb-10 text-white">
-                                <div className="flex h-full items-end justify-between gap-5 border-b border-white/10 pb-2 text-xl font-bold">
-                                  <p className="min-w-2/5">{data.name}</p>
-                                  <p className="text-lg text-white/70">
-                                    ₹{data.price}
-                                  </p>
+                                        </SwiperSlide>
+                                      </div>
+                                    ))}
+                                  </Swiper>
+                                )}
+                                <div className="absolute bottom-0 z-[1] flex h-full w-full flex-col gap-3 bg-gradient-to-t from-black/80 via-transparent to-black/60 p-5 pb-10 text-white">
+                                  <div className="flex h-full items-end justify-between gap-5 border-b border-white/10 pb-2 text-xl font-bold">
+                                    <p className="min-w-2/5">{data.name}</p>
+                                    <p className="text-lg text-white/70">
+                                      ₹{data.price}
+                                    </p>
+                                  </div>
+                                  <p>{data.description}</p>
                                 </div>
-                                <p className="">{data.description}</p>
                               </div>
-                            </div>
-                          ))}
-                        </div>
+                            ))}
+                          </div>
+                        )}
                       </div>
                     ) : (
                       ""
diff --git a/website/types/card-item.ts b/website/types/card-item.ts
index a4fa2f4..a97ca98 100644
--- a/website/types/card-item.ts
+++ b/website/types/card-item.ts
@@ -5,6 +5,7 @@ export type ItemProps = {
   tags?: string[];
   image: string;
   video?: string;
+  video_thumbnail?: string;
   price: number;
   rating: number;
   menus: {