migrate to typescript

49 files changed, 2974 insertions, 1644 deletions

diff --git a/components/anime/episode.js b/components/anime/episode.js
index 3650944..f35df10 100644
--- a/components/anime/episode.js
+++ b/components/anime/episode.js
@@ -6,29 +6,45 @@ import ThumbnailDetail from "./viewMode/thumbnailDetail";
 import ListMode from "./viewMode/listMode";
 import { toast } from "sonner";
 
-function allProvider(response, setMapProviders, setProviderId) {
-  const getMap = response.find((i) => i?.map === true);
-  let allProvider = response;
+const ITEMS_PER_PAGE = 13;
+const DEFAULT_VIEW = 3;
 
-  if (getMap) {
-    allProvider = response.filter((i) => {
+const fetchEpisodes = async (info, isDub, refresh = false) => {
+  const response = await fetch(
+    `/api/v2/episode/${info.id}?releasing=${
+      info.status === "RELEASING" ? "true" : "false"
+    }${isDub ? "&dub=true" : ""}${refresh ? "&refresh=true" : ""}`
+  ).then((res) => res.json());
+
+  const providers = filterProviders(response);
+
+  return providers;
+};
+
+const filterProviders = (response) => {
+  const providersWithMap = response.find((i) => i?.map === true);
+  let providers = response;
+
+  if (providersWithMap) {
+    providers = response.filter((i) => {
       if (i?.providerId === "gogoanime" && i?.map !== true) {
         return null;
       }
       return i;
     });
-    setMapProviders(getMap?.episodes);
   }
 
-  if (allProvider.length > 0) {
-    const defaultProvider = allProvider.find(
+  return providers;
+};
+
+const setDefaultProvider = (providers, setProviderId) => {
+  if (providers.length > 0) {
+    const defaultProvider = providers.find(
       (x) => x.providerId === "gogoanime" || x.providerId === "9anime"
     );
-    setProviderId(defaultProvider?.providerId || allProvider[0].providerId); // set to first provider id
+    setProviderId(defaultProvider?.providerId || providers[0].providerId);
   }
-
-  return allProvider;
-}
+};
 
 export default function AnimeEpisode({
   info,
@@ -48,20 +64,13 @@ export default function AnimeEpisode({
   const [isDub, setIsDub] = useState(false);
 
   const [providers, setProviders] = useState(null);
-  const [mapProviders, setMapProviders] = useState(null);
 
   useEffect(() => {
     setLoading(true);
     const fetchData = async () => {
-      const response = await fetch(
-        `/api/v2/episode/${info.id}?releasing=${
-          info.status === "RELEASING" ? "true" : "false"
-        }${isDub ? "&dub=true" : ""}`
-      ).then((res) => res.json());
-
-      const providers = allProvider(response, setMapProviders, setProviderId);
-
-      setView(Number(localStorage.getItem("view")) || 3);
+      const providers = await fetchEpisodes(info, isDub);
+      setDefaultProvider(providers, setProviderId);
+      setView(Number(localStorage.getItem("view")) || DEFAULT_VIEW);
       setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings")));
       setProviders(providers);
       setLoading(false);
@@ -71,20 +80,16 @@ export default function AnimeEpisode({
     return () => {
       setCurrentPage(1);
       setProviders(null);
-      setMapProviders(null);
     };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [info.id, isDub]);
+  }, [info.id, isDub]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   const episodes =
-    providers
-      ?.find((provider) => provider.providerId === providerId)
-      ?.episodes?.slice(0, mapProviders?.length) || [];
+    providers?.find((provider) => provider.providerId === providerId)
+      ?.episodes || [];
 
   const lastEpisodeIndex = currentPage * itemsPerPage;
   const firstEpisodeIndex = lastEpisodeIndex - itemsPerPage;
-  let currentEpisodes = episodes.slice(firstEpisodeIndex, lastEpisodeIndex);
+  let currentEpisodes = episodes?.slice(firstEpisodeIndex, lastEpisodeIndex);
 
   const totalPages = Math.ceil(episodes.length / itemsPerPage);
 
@@ -98,9 +103,10 @@ export default function AnimeEpisode({
 
   useEffect(() => {
     if (
-      !mapProviders ||
-      mapProviders?.every(
+      !currentEpisodes ||
+      currentEpisodes?.every(
         (item) =>
+          // item?.img?.includes("null") ||
           item?.img?.includes("https://s4.anilist.co/") ||
           item?.image?.includes("https://s4.anilist.co/") ||
           item?.img === null
@@ -173,67 +179,13 @@ export default function AnimeEpisode({
       setLoading(true);
       clearTimeout(debounceTimeout);
       debounceTimeout = setTimeout(async () => {
-        const res = await fetch(
-          `/api/v2/episode/${info.id}?releasing=${
-            info.status === "RELEASING" ? "true" : "false"
-          }${isDub ? "&dub=true" : ""}&refresh=true`
-        );
-        if (!res.ok) {
-          const json = await res.json();
-          if (res.status === 429) {
-            toast.error(json.error);
-            const resp = await fetch(
-              `/api/v2/episode/${info.id}?releasing=${
-                info.status === "RELEASING" ? "true" : "false"
-              }${isDub ? "&dub=true" : ""}`
-            ).then((res) => res.json());
-
-            if (resp) {
-              const providers = allProvider(
-                resp,
-                setMapProviders,
-                setProviderId
-              );
-              setProviders(providers);
-            }
-          } else {
-            toast.error("Something went wrong");
-            setProviders([]);
-          }
-          setLoading(false);
-        } else {
-          const remainingRequests = res.headers.get("X-RateLimit-Remaining");
-          toast.success("Remaining requests " + remainingRequests);
-
-          const data = await res.json();
-          const getMap = data.find((i) => i?.map === true) || data[0];
-          let allProvider = data;
-
-          if (getMap) {
-            allProvider = data.filter((i) => {
-              if (i?.providerId === "gogoanime" && i?.map !== true) {
-                return null;
-              }
-              return i;
-            });
-            setMapProviders(getMap?.episodes);
-          }
-
-          if (allProvider.length > 0) {
-            const defaultProvider = allProvider.find(
-              (x) => x.providerId === "gogoanime" || x.providerId === "9anime"
-            );
-            setProviderId(
-              defaultProvider?.providerId || allProvider[0].providerId
-            ); // set to first provider id
-          }
-
-          setView(Number(localStorage.getItem("view")) || 3);
-          setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings")));
-          setProviders(allProvider);
-          setLoading(false);
-        }
-      }, 1000);
+        const providers = await fetchEpisodes(info, isDub, true);
+        setDefaultProvider(providers, setProviderId);
+        setView(Number(localStorage.getItem("view")) || DEFAULT_VIEW);
+        setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings")));
+        setProviders(providers);
+        setLoading(false);
+      }, 5000);
     } catch (err) {
       console.log(err);
       toast.error("Something went wrong");
@@ -257,7 +209,7 @@ export default function AnimeEpisode({
                   onClick={() => {
                     handleRefresh();
                     setProviders(null);
-                    setMapProviders(null);
+                    // setMapProviders(null);
                   }}
                   className="relative flex flex-col items-center w-5 h-5 group"
                 >
@@ -376,7 +328,7 @@ export default function AnimeEpisode({
               view={view}
               setView={setView}
               episode={currentEpisodes}
-              map={mapProviders}
+              // map={mapProviders}
             />
           </div>
         </div>
@@ -395,9 +347,9 @@ export default function AnimeEpisode({
             {Array.isArray(providers) ? (
               providers.length > 0 ? (
                 currentEpisodes.map((episode, index) => {
-                  const mapData = mapProviders?.find(
-                    (i) => i.number === episode.number
-                  );
+                  // const mapData = mapProviders?.find(
+                  //   (i) => i.number === episode.number
+                  // );
 
                   return (
                     <Fragment key={index}>
@@ -406,7 +358,7 @@ export default function AnimeEpisode({
                           key={index}
                           index={index}
                           info={info}
-                          image={mapData?.img || mapData?.image}
+                          // image={mapData?.img || mapData?.image}
                           providerId={providerId}
                           episode={episode}
                           artStorage={artStorage}
@@ -417,9 +369,9 @@ export default function AnimeEpisode({
                       {view === 2 && (
                         <ThumbnailDetail
                           key={index}
-                          image={mapData?.img || mapData?.image}
-                          title={mapData?.title}
-                          description={mapData?.description}
+                          // image={mapData?.img || mapData?.image}
+                          // title={mapData?.title}
+                          // description={mapData?.description}
                           index={index}
                           epi={episode}
                           provider={providerId}
diff --git a/components/anime/mobile/reused/infoChip.js b/components/anime/mobile/reused/infoChip.tsx
index 41def85..80ebf83 100644
--- a/components/anime/mobile/reused/infoChip.js
+++ b/components/anime/mobile/reused/infoChip.tsx
@@ -1,7 +1,20 @@
-import React from "react";
-import { getFormat } from "../../../../utils/getFormat";
+import React, { CSSProperties, FC } from "react";
+import { getFormat } from "@/utils/getFormat";
 
-export default function InfoChip({ info, color, className }) {
+interface Info {
+  episodes?: number;
+  averageScore?: number;
+  format?: string;
+  status?: string;
+}
+
+interface InfoChipProps {
+  info: Info;
+  color: any;
+  className: string;
+}
+
+const InfoChip: FC<InfoChipProps> = ({ info, color, className }) => {
   return (
     <div
       className={`flex-wrap w-full justify-start md:pt-1 gap-4 ${className}`}
@@ -40,4 +53,6 @@ export default function InfoChip({ info, color, className }) {
       )}
     </div>
   );
-}
+};
+
+export default InfoChip;
diff --git a/components/anime/mobile/topSection.js b/components/anime/mobile/topSection.tsx
index 6780da5..2d28c66 100644
--- a/components/anime/mobile/topSection.js
+++ b/components/anime/mobile/topSection.tsx
@@ -11,26 +11,36 @@ import { convertSecondsToTime } from "@/utils/getTimes";
 import Link from "next/link";
 import InfoChip from "./reused/infoChip";
 import Description from "./reused/description";
-import { NewNavbar } from "@/components/shared/NavBar";
+import Skeleton from "react-loading-skeleton";
+import { AniListInfoTypes } from "types/info/AnilistInfoTypes";
+
+type DetailTopProps = {
+  info?: AniListInfoTypes | null;
+  statuses?: any;
+  handleOpen: () => void;
+  watchUrl: string | undefined;
+  progress?: number;
+  color?: string | null;
+};
 
 export default function DetailTop({
   info,
-  statuses,
+  statuses = undefined,
   handleOpen,
   watchUrl,
   progress,
   color,
-}) {
+}: DetailTopProps) {
   const router = useRouter();
   const [readMore, setReadMore] = useState(false);
 
   const [showAll, setShowAll] = useState(false);
 
-  const isAnime = info.type === "ANIME";
+  const isAnime = info?.type === "ANIME";
 
   useEffect(() => {
     setReadMore(false);
-  }, [info.id]);
+  }, [info?.id]);
 
   const handleShareClick = async () => {
     try {
@@ -51,78 +61,150 @@ export default function DetailTop({
 
   return (
     <div className="gap-6 w-full px-3 pt-4 md:pt-10 flex flex-col items-center justify-center">
-      <NewNavbar info={info} />
-
       {/* MAIN */}
       <div className="flex flex-col md:flex-row w-full items-center md:items-end gap-5 pt-12">
         <div className="shrink-0 w-[180px] h-[250px] rounded overflow-hidden">
-          <img
-            src={info?.coverImage?.extraLarge || info?.coverImage}
-            alt="poster anime"
-            width={300}
-            height={300}
-            className="w-full h-full object-cover"
-          />
+          {info ? (
+            <img
+              src={
+                info?.coverImage?.extraLarge?.toString() ??
+                info?.coverImage?.toString()
+              }
+              alt="poster anime"
+              width={300}
+              height={300}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <Skeleton className="h-full" />
+          )}
         </div>
         <div className="flex flex-col gap-4 items-center md:items-start justify-end w-full">
-          <div className="flex flex-col gap-1 text-center md:text-start">
+          <div className="flex flex-col gap-1 text-center md:text-start w-full">
             <h3 className="font-karla text-lg capitalize leading-none">
               {info?.season?.toLowerCase() || getMonth(info?.startDate?.month)}{" "}
-              {info.seasonYear || info?.startDate?.year}
+              {info?.seasonYear || info?.startDate?.year}
+              {!info && <Skeleton height={14} width={140} />}
             </h3>
             <h1 className="font-outfit font-extrabold text-2xl md:text-4xl line-clamp-2 text-white">
               {info?.title?.romaji || info?.title?.english}
+              {!info && <Skeleton height={35} width={340} className="" />}
             </h1>
             <h2 className="font-karla line-clamp-1 text-sm md:text-lg md:pb-2 font-light text-white/70">
-              {info.title?.english}
+              {info?.title?.english}
             </h2>
-            <InfoChip info={info} color={color} className="hidden md:flex" />
-            {info?.description && (
-              <Description
-                info={info}
-                readMore={readMore}
-                setReadMore={setReadMore}
-                className="md:block hidden"
-              />
+            {info && (
+              <InfoChip info={info} color={color} className="hidden md:flex" />
+            )}
+            {info ? (
+              info?.description && (
+                <Description
+                  info={info}
+                  readMore={readMore}
+                  setReadMore={setReadMore}
+                  className="md:block hidden"
+                />
+              )
+            ) : (
+              <div className="w-full md:px-0 md:block hidden">
+                <Skeleton className="h-[80px] w-[700px]" />
+              </div>
             )}
           </div>
         </div>
       </div>
 
       <div className="hidden md:flex gap-5 items-center justify-start w-full">
-        <button
-          type="button"
-          onClick={() => router.push(watchUrl)}
-          className={`${
-            !watchUrl ? "opacity-30 pointer-events-none" : ""
-          } w-[180px] flex-center text-lg font-karla font-semibold gap-2 border-black border-opacity-10 text-black rounded-full py-1 px-4 bg-white hover:opacity-80`}
-        >
-          {isAnime ? (
-            <PlayIcon className="w-5 h-5" />
-          ) : (
-            <BookOpenIcon className="w-5 h-5" />
-          )}
-          {progress > 0 ? (
-            statuses?.value === "COMPLETED" ? (
-              isAnime ? (
-                "Rewatch"
+        {info ? (
+          <button
+            type="button"
+            onClick={() => router.push(watchUrl ?? "#")}
+            className={`${
+              !watchUrl ? "opacity-30 pointer-events-none" : ""
+            } w-[180px] flex-center text-lg font-karla font-semibold gap-2 border-black border-opacity-10 text-black rounded-full py-1 px-4 bg-white hover:opacity-80`}
+          >
+            {isAnime ? (
+              <PlayIcon className="w-5 h-5" />
+            ) : (
+              <BookOpenIcon className="w-5 h-5" />
+            )}
+            {progress && progress > 0 ? (
+              statuses?.value === "COMPLETED" ? (
+                isAnime ? (
+                  "Rewatch"
+                ) : (
+                  "Reread"
+                )
+              ) : !watchUrl && info?.nextAiringEpisode ? (
+                <span>
+                  {convertSecondsToTime(info.nextAiringEpisode.timeUntilAiring)}{" "}
+                </span>
               ) : (
-                "Reread"
+                "Continue"
               )
-            ) : !watchUrl && info?.nextAiringEpisode ? (
-              <span>
-                {convertSecondsToTime(info.nextAiringEpisode.timeUntilAiring)}{" "}
-              </span>
+            ) : isAnime ? (
+              "Watch Now"
             ) : (
-              "Continue"
-            )
-          ) : isAnime ? (
-            "Watch Now"
+              "Read Now"
+            )}
+          </button>
+        ) : (
+          <div className="h-10 w-[180px] bg-secondary flex-center text-lg font-karla font-semibold gap-2 border-black border-opacity-10 text-black rounded-full" />
+        )}
+        <div className="flex gap-2">
+          {info ? (
+            <button
+              type="button"
+              className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
+              onClick={() => handleOpen()}
+            >
+              <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
+                Add to List
+              </span>
+              <PlusIcon className="w-5 h-5" />
+            </button>
           ) : (
-            "Read Now"
+            <div className="w-10 h-10 bg-secondary rounded-full" />
           )}
-        </button>
-        <div className="flex gap-2">
+          {info ? (
+            <button
+              type="button"
+              className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
+              onClick={handleShareClick}
+            >
+              <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
+                Share {isAnime ? "Anime" : "Manga"}
+              </span>
+              <ShareIcon className="w-5 h-5" />
+            </button>
+          ) : (
+            <div className="w-10 h-10 bg-secondary rounded-full" />
+          )}
+          {info ? (
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={`https://anilist.co/${info.type.toLowerCase()}/${info.id}`}
+              className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
+            >
+              <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
+                See on AniList
+              </span>
+              <Image
+                src="/svg/anilist-icon.svg"
+                alt="anilist_icon"
+                width={20}
+                height={20}
+              />
+            </a>
+          ) : (
+            <div className="w-10 h-10 bg-secondary rounded-full" />
+          )}
+        </div>
+      </div>
+
+      <div className="md:hidden flex gap-2 items-center justify-center w-[90%]">
+        {info ? (
           <button
             type="button"
             className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
@@ -133,6 +215,46 @@ export default function DetailTop({
             </span>
             <PlusIcon className="w-5 h-5" />
           </button>
+        ) : (
+          <div className="w-10 h-10 bg-secondary rounded-full" />
+        )}
+        {info ? (
+          <button
+            type="button"
+            onClick={() => router.push(watchUrl ?? "#")}
+            className={`${
+              !watchUrl ? "opacity-30 pointer-events-none" : ""
+            } flex items-center text-lg font-karla font-semibold gap-1 border-black border-opacity-10 text-black rounded-full py-2 px-4 bg-white`}
+          >
+            {isAnime ? (
+              <PlayIcon className="w-5 h-5" />
+            ) : (
+              <BookOpenIcon className="w-5 h-5" />
+            )}
+            {progress && progress > 0 ? (
+              statuses?.value === "COMPLETED" ? (
+                isAnime ? (
+                  "Rewatch"
+                ) : (
+                  "Reread"
+                )
+              ) : !watchUrl && info?.nextAiringEpisode ? (
+                <span>
+                  {convertSecondsToTime(info.nextAiringEpisode.timeUntilAiring)}{" "}
+                </span>
+              ) : (
+                "Continue"
+              )
+            ) : isAnime ? (
+              "Watch Now"
+            ) : (
+              "Read Now"
+            )}
+          </button>
+        ) : (
+          <div className="h-10 w-32 bg-secondary flex-center text-lg font-karla font-semibold gap-2 border-black border-opacity-10 text-black rounded-full" />
+        )}
+        {info ? (
           <button
             type="button"
             className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
@@ -143,81 +265,12 @@ export default function DetailTop({
             </span>
             <ShareIcon className="w-5 h-5" />
           </button>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href={`https://anilist.co/${info.type.toLowerCase()}/${info.id}`}
-            className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
-          >
-            <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
-              See on AniList
-            </span>
-            <Image
-              src="/svg/anilist-icon.svg"
-              alt="anilist_icon"
-              width={20}
-              height={20}
-            />
-          </a>
-        </div>
+        ) : (
+          <div className="w-10 h-10 bg-secondary rounded-full" />
+        )}
       </div>
 
-      <div className="md:hidden flex gap-2 items-center justify-center w-[90%]">
-        <button
-          type="button"
-          className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
-          onClick={() => handleOpen()}
-        >
-          <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
-            Add to List
-          </span>
-          <PlusIcon className="w-5 h-5" />
-        </button>
-        <button
-          type="button"
-          onClick={() => router.push(watchUrl)}
-          className={`${
-            !watchUrl ? "opacity-30 pointer-events-none" : ""
-          } flex items-center text-lg font-karla font-semibold gap-1 border-black border-opacity-10 text-black rounded-full py-2 px-4 bg-white`}
-        >
-          {isAnime ? (
-            <PlayIcon className="w-5 h-5" />
-          ) : (
-            <BookOpenIcon className="w-5 h-5" />
-          )}
-          {progress > 0 ? (
-            statuses?.value === "COMPLETED" ? (
-              isAnime ? (
-                "Rewatch"
-              ) : (
-                "Reread"
-              )
-            ) : !watchUrl && info?.nextAiringEpisode ? (
-              <span>
-                {convertSecondsToTime(info.nextAiringEpisode.timeUntilAiring)}{" "}
-              </span>
-            ) : (
-              "Continue"
-            )
-          ) : isAnime ? (
-            "Watch Now"
-          ) : (
-            "Read Now"
-          )}
-        </button>
-        <button
-          type="button"
-          className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
-          onClick={handleShareClick}
-        >
-          <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
-            Share {isAnime ? "Anime" : "Manga"}
-          </span>
-          <ShareIcon className="w-5 h-5" />
-        </button>
-      </div>
-
-      {info.nextAiringEpisode?.timeUntilAiring && (
+      {info && info.nextAiringEpisode?.timeUntilAiring && (
         <p className="md:hidden">
           Episode {info.nextAiringEpisode.episode} in{" "}
           <span className="font-bold">
@@ -226,7 +279,7 @@ export default function DetailTop({
         </p>
       )}
 
-      {info?.description && (
+      {info && info?.description && (
         <Description
           info={info}
           readMore={readMore}
@@ -235,13 +288,15 @@ export default function DetailTop({
         />
       )}
 
-      <InfoChip
-        info={info}
-        color={color}
-        className={`${readMore ? "flex" : "hidden"} md:hidden`}
-      />
+      {info && (
+        <InfoChip
+          info={info}
+          color={color}
+          className={`${readMore ? "flex" : "hidden"} md:hidden`}
+        />
+      )}
 
-      {info?.relations?.edges?.length > 0 && (
+      {info && info?.relations?.edges?.length > 0 && (
         <div className="w-screen md:w-full">
           <div className="flex justify-between items-center p-3 md:p-0">
             {info?.relations?.edges?.length > 0 && (
@@ -288,7 +343,7 @@ export default function DetailTop({
                       <div className="w-[90px] bg-image rounded-l-md shrink-0">
                         <Image
                           src={rel.coverImage.extraLarge}
-                          alt={rel.id}
+                          alt={rel.id.toString()}
                           height={500}
                           width={500}
                           className="object-cover h-full w-full shrink-0 rounded-l-md"
@@ -314,7 +369,7 @@ export default function DetailTop({
   );
 }
 
-function getMonth(month) {
+function getMonth(month: number | undefined) {
   if (!month) return "";
   const formattedMonth = new Date(0, month).toLocaleString("default", {
     month: "long",
diff --git a/components/anime/viewMode/thumbnailDetail.js b/components/anime/viewMode/thumbnailDetail.js
index d8cbfcc..f955fec 100644
--- a/components/anime/viewMode/thumbnailDetail.js
+++ b/components/anime/viewMode/thumbnailDetail.js
@@ -1,3 +1,4 @@
+import { parseImageProxy } from "@/utils/imageUtils";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -5,7 +6,7 @@ export default function ThumbnailDetail({
   index,
   epi,
   info,
-  image,
+  // image,
   title,
   description,
   provider,
@@ -18,10 +19,10 @@ export default function ThumbnailDetail({
   let prog = (time / duration) * 100;
   if (prog > 90) prog = 100;
 
-  const parsedImage = image
-    ? image?.includes("null")
+  const parsedImage = epi?.img
+    ? epi?.img?.includes("null")
       ? info.coverImage?.extraLarge
-      : image
+      : epi?.img
     : info.coverImage?.extraLarge || null;
 
   return (
@@ -36,7 +37,12 @@ export default function ThumbnailDetail({
         <div className="relative">
           {parsedImage && (
             <Image
-              src={parsedImage || ""}
+              src={
+                parseImageProxy(
+                  parsedImage,
+                  provider === "animepahe" ? "https://animepahe.ru" : undefined
+                ) || ""
+              }
               alt={`Episode ${epi?.number} Thumbnail`}
               width={520}
               height={236}
@@ -74,11 +80,11 @@ export default function ThumbnailDetail({
         className={`w-[70%] h-full select-none p-4 flex flex-col justify-center gap-3`}
       >
         <h1 className="font-karla font-bold text-base lg:text-lg xl:text-xl italic line-clamp-1">
-          {title || `Episode ${epi?.number || 0}`}
+          {epi?.title || `Episode ${epi?.number || 0}`}
         </h1>
-        {description && (
+        {epi?.description && (
           <p className="line-clamp-2 text-xs lg:text-md xl:text-lg italic font-outfit font-extralight">
-            {description}
+            {epi?.description}
           </p>
         )}
       </div>
diff --git a/components/anime/viewMode/thumbnailOnly.js b/components/anime/viewMode/thumbnailOnly.js
index c7fe674..06a92f5 100644
--- a/components/anime/viewMode/thumbnailOnly.js
+++ b/components/anime/viewMode/thumbnailOnly.js
@@ -1,9 +1,10 @@
 import Image from "next/image";
 import Link from "next/link";
+import { parseImageProxy } from "../../../utils/imageUtils";
 
 export default function ThumbnailOnly({
   info,
-  image,
+  // image,
   providerId,
   episode,
   artStorage,
@@ -15,10 +16,10 @@ export default function ThumbnailOnly({
   let prog = (time / duration) * 100;
   if (prog > 90) prog = 100;
 
-  const parsedImage = image
-    ? image?.includes("null")
+  const parsedImage = episode?.img
+    ? episode?.img?.includes("null")
       ? info.coverImage?.extraLarge
-      : image
+      : episode?.img
     : info.coverImage?.extraLarge || null;
   return (
     <Link
@@ -45,7 +46,12 @@ export default function ThumbnailOnly({
       {/* <div className="absolute inset-0 bg-black z-30 opacity-20" /> */}
       {parsedImage && (
         <Image
-          src={parsedImage || ""}
+          src={
+            parseImageProxy(
+              parsedImage,
+              providerId === "animepahe" ? "https://animepahe.ru" : undefined
+            ) || ""
+          }
           alt={`Episode ${episode?.number} Thumbnail`}
           width={500}
           height={500}
diff --git a/components/anime/viewSelector.js b/components/anime/viewSelector.js
index baa13b2..c2ca327 100644
--- a/components/anime/viewSelector.js
+++ b/components/anime/viewSelector.js
@@ -4,13 +4,14 @@ export default function ViewSelector({ view, setView, episode, map }) {
       <div
         className={
           episode?.length > 0
-            ? map?.every(
+            ? episode?.every(
                 (item) =>
                   item?.img === null ||
+                  item?.img?.includes("null") ||
                   item?.img?.includes("https://s4.anilist.co/") ||
                   item?.image?.includes("https://s4.anilist.co/") ||
                   item.title === null
-              ) || !map
+              ) || !episode
               ? "pointer-events-none"
               : "cursor-pointer"
             : "pointer-events-none"
@@ -32,13 +33,14 @@ export default function ViewSelector({ view, setView, episode, map }) {
             height="20"
             className={`${
               episode?.length > 0
-                ? map?.every(
+                ? episode?.every(
                     (item) =>
                       item?.img === null ||
+                      item?.img?.includes("null") ||
                       item?.img?.includes("https://s4.anilist.co/") ||
                       item?.image?.includes("https://s4.anilist.co/") ||
                       item.title === null
-                  ) || !map
+                  ) || !episode
                   ? "fill-[#1c1c22]"
                   : view === 1
                   ? "fill-action"
@@ -52,13 +54,14 @@ export default function ViewSelector({ view, setView, episode, map }) {
       <div
         className={
           episode?.length > 0
-            ? map?.every(
+            ? episode?.every(
                 (item) =>
                   item?.img === null ||
+                  item?.img?.includes("null") ||
                   item?.img?.includes("https://s4.anilist.co/") ||
                   item?.image?.includes("https://s4.anilist.co/") ||
                   item.title === null
-              ) || !map
+              ) || !episode
               ? "pointer-events-none"
               : "cursor-pointer"
             : "pointer-events-none"
@@ -75,13 +78,14 @@ export default function ViewSelector({ view, setView, episode, map }) {
           fill="none"
           className={`${
             episode?.length > 0
-              ? map?.every(
+              ? episode?.every(
                   (item) =>
                     item?.img === null ||
+                    item?.img?.includes("null") ||
                     item?.img?.includes("https://s4.anilist.co/") ||
                     item?.image?.includes("https://s4.anilist.co/") ||
                     item.title === null
-                ) || !map
+                ) || !episode
                 ? "fill-[#1c1c22]"
                 : view === 2
                 ? "fill-action"
diff --git a/components/disqus.js b/components/disqus.tsx
index b814851..dca03e2 100644
--- a/components/disqus.js
+++ b/components/disqus.tsx
@@ -1,6 +1,15 @@
 import { DiscussionEmbed } from "disqus-react";
 
-const DisqusComments = ({ post }) => {
+type DisqusCommentsProps = {
+  post: {
+    name: string;
+    url: string;
+    title: string;
+    episode: number;
+  };
+};
+
+const DisqusComments = ({ post }: DisqusCommentsProps) => {
   const disqusShortname = post.name || "your_disqus_shortname";
   const disqusConfig = {
     url: post.url,
diff --git a/components/home/content.js b/components/home/content.tsx
index d2498f6..b193381 100644
--- a/components/home/content.js
+++ b/components/home/content.tsx
@@ -15,6 +15,63 @@ import HistoryOptions from "./content/historyOptions";
 import { toast } from "sonner";
 import { truncateImgUrl } from "@/utils/imageUtils";
 
+type ContentProps = {
+  ids: string;
+  section: string;
+  data?: any;
+  userData?: UserDataTypes[];
+  og?: any;
+  userName?: string;
+  setRemoved?: any;
+  type?: string;
+};
+
+type UserDataTypes = {
+  id: string;
+  aniId?: string;
+  title?: string;
+  aniTitle?: string;
+  image?: string;
+  episode?: number;
+  timeWatched?: number;
+  duration?: number;
+  provider?: string;
+  nextId?: string;
+  nextNumber?: number;
+  dub?: boolean;
+  createdDate: string;
+  userProfileId: string;
+  watchId: string;
+};
+
+interface SlicedDataTypes {
+  id: string | number;
+  slug?: string;
+  nextAiringEpisode?: any;
+  currentEpisode?: number;
+  idMal: number;
+  status: string;
+  title: Title;
+  bannerImage: string;
+  coverImage: CoverImage | string;
+  image?: string;
+  episodeNumber?: number;
+  description: string;
+}
+
+interface Title {
+  romaji: string;
+  english: string;
+  native: string;
+}
+
+interface CoverImage {
+  extraLarge: string;
+  large: string;
+  medium: string;
+  color?: string;
+}
+
 export default function Content({
   ids,
   section,
@@ -24,12 +81,12 @@ export default function Content({
   userName,
   setRemoved,
   type = "anime",
-}) {
-  const router = useRouter();
-
-  const ref = useRef();
+}: ContentProps) {
+  const ref = useRef<HTMLElement>(null!);
   const { events } = useDraggable(ref);
 
+  const router = useRouter();
+
   const [clicked, setClicked] = useState(false);
 
   useEffect(() => {
@@ -45,19 +102,27 @@ export default function Content({
   const [scrollRight, setScrollRight] = useState(true);
 
   const slideLeft = () => {
-    ref.current.classList.add("scroll-smooth");
-    var slider = document.getElementById(ids);
-    slider.scrollLeft = slider.scrollLeft - 500;
-    ref.current.classList.remove("scroll-smooth");
+    if (ref.current) {
+      ref.current.classList.add("scroll-smooth");
+      var slider = document.getElementById(ids);
+      if (slider?.scrollLeft) {
+        slider.scrollLeft = slider.scrollLeft - 500;
+      }
+      ref.current.classList.remove("scroll-smooth");
+    }
   };
   const slideRight = () => {
-    ref.current.classList.add("scroll-smooth");
-    var slider = document.getElementById(ids);
-    slider.scrollLeft = slider.scrollLeft + 500;
-    ref.current.classList.remove("scroll-smooth");
+    if (ref.current) {
+      ref.current.classList.add("scroll-smooth");
+      var slider = document.getElementById(ids);
+      if (slider?.scrollLeft) {
+        slider.scrollLeft = slider.scrollLeft + 500;
+      }
+      ref.current.classList.remove("scroll-smooth");
+    }
   };
 
-  const handleScroll = (e) => {
+  const handleScroll = (e: any) => {
     const scrollLeft = e.target.scrollLeft > 31;
     const scrollRight =
       e.target.scrollLeft < e.target.scrollWidth - e.target.clientWidth;
@@ -65,10 +130,12 @@ export default function Content({
     setScrollRight(scrollRight);
   };
 
-  function handleAlert(e) {
+  function handleAlert(e: string) {
     if (localStorage.getItem("clicked")) {
       const existingDataString = localStorage.getItem("clicked");
-      const existingData = JSON.parse(existingDataString);
+      const existingData = existingDataString
+        ? JSON.parse(existingDataString)
+        : {};
 
       existingData[e] = true;
 
@@ -87,8 +154,8 @@ export default function Content({
   }
 
   const array = data;
-  let filteredData = array?.filter((item) => item !== null);
-  const slicedData =
+  let filteredData = array?.filter((item: any) => item !== null);
+  const slicedData: SlicedDataTypes[] =
     filteredData?.length > 15 ? filteredData?.slice(0, 15) : filteredData;
 
   const goToPage = () => {
@@ -112,7 +179,7 @@ export default function Content({
     }
   };
 
-  const removeItem = async (id, aniId) => {
+  const removeItem = async (id: string, aniId: string) => {
     if (userName) {
       // remove from database
       const res = await fetch(`/api/user/update/episode`, {
@@ -131,7 +198,7 @@ export default function Content({
       if (id) {
         // remove from local storage
         const artplayerSettings =
-          JSON.parse(localStorage.getItem("artplayer_settings")) || {};
+          JSON.parse(localStorage.getItem("artplayer_settings") || "{}") || {};
         if (artplayerSettings[id]) {
           delete artplayerSettings[id];
           localStorage.setItem(
@@ -142,9 +209,9 @@ export default function Content({
       }
       if (aniId) {
         const currentData =
-          JSON.parse(localStorage.getItem("artplayer_settings")) || {};
+          JSON.parse(localStorage.getItem("artplayer_settings") || "{}") || {};
 
-        const updatedData = {};
+        const updatedData: { [key: string]: any } = {};
 
         for (const key in currentData) {
           const item = currentData[key];
@@ -166,7 +233,7 @@ export default function Content({
       if (id) {
         // remove from local storage
         const artplayerSettings =
-          JSON.parse(localStorage.getItem("artplayer_settings")) || {};
+          JSON.parse(localStorage.getItem("artplayer_settings") || "{}") || {};
         if (artplayerSettings[id]) {
           delete artplayerSettings[id];
           localStorage.setItem(
@@ -178,10 +245,10 @@ export default function Content({
       }
       if (aniId) {
         const currentData =
-          JSON.parse(localStorage.getItem("artplayer_settings")) || {};
+          JSON.parse(localStorage.getItem("artplayer_settings") || "{}") || {};
 
         // Create a new object to store the updated data
-        const updatedData = {};
+        const updatedData: { [key: string]: any } = {};
 
         // Iterate through the current data and copy items with different aniId to the updated object
         for (const key in currentData) {
@@ -223,11 +290,22 @@ export default function Content({
           className="flex h-full w-full select-none overflow-x-scroll overflow-y-hidden scrollbar-hide lg:gap-8 gap-4 lg:p-10 py-8 px-5 z-30"
           onScroll={handleScroll}
           {...events}
-          ref={ref}
+          ref={ref as React.RefObject<HTMLDivElement>}
         >
           {ids !== "recentlyWatched"
             ? slicedData?.map((anime) => {
-                const progress = og?.find((i) => i.mediaId === anime.id);
+                const progress = og?.find((i: any) => i.mediaId === anime.id);
+
+                let image;
+                if (typeof anime.coverImage === "string") {
+                  image = truncateImgUrl(anime.coverImage);
+                } else if (anime.coverImage) {
+                  image = anime.coverImage.extraLarge || anime.coverImage.large;
+                }
+
+                if (!image && anime.image) {
+                  image = anime.image;
+                }
 
                 return (
                   <div
@@ -238,6 +316,14 @@ export default function Content({
                       href={
                         ids === "listManga"
                           ? `/en/manga/${anime.id}`
+                          : ids === "recentAdded"
+                          ? anime?.slug
+                            ? `/en/anime/watch/${
+                                anime.id
+                              }/gogoanime?id=${encodeURIComponent(
+                                anime?.slug
+                              )}&num=${anime.currentEpisode}`
+                            : `/en/${type}/${anime.id}`
                           : `/en/${type}/${anime.id}`
                       }
                       className="hover:scale-105 hover:shadow-lg duration-300 ease-out group relative"
@@ -255,7 +341,7 @@ export default function Content({
                               )}
                             {checkProgress(progress) && (
                               <div
-                                onClick={() => handleAlert(anime.id)}
+                                onClick={() => handleAlert(String(anime.id))}
                                 className="group-hover:visible invisible absolute top-0 bg-black bg-opacity-20 w-full h-full z-20 text-center"
                               >
                                 <h1 className="text-[12px] lg:text-sm pt-28 lg:pt-44 font-bold opacity-100">
@@ -282,31 +368,20 @@ export default function Content({
                         {ids === "recentAdded" && (
                           <div className="absolute bg-gradient-to-b from-black/30 to-transparent from-5% to-30% top-0 z-30 w-full h-full rounded" />
                         )}
-                        <Image
-                          draggable={false}
-                          src={
-                            anime.image ||
-                            anime.coverImage?.extraLarge ||
-                            anime.coverImage?.large ||
-                            truncateImgUrl(anime?.coverImage) ||
-                            "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
-                          }
-                          alt={
-                            anime.title.romaji ||
-                            anime.title.english ||
-                            "coverImage"
-                          }
-                          width={500}
-                          height={300}
-                          placeholder="blur"
-                          blurDataURL={
-                            anime.image ||
-                            anime.coverImage?.extraLarge ||
-                            anime.coverImage?.large ||
-                            "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
-                          }
-                          className="z-20 h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] object-cover rounded-md brightness-90"
-                        />
+                        {image && (
+                          <Image
+                            draggable={false}
+                            src={image}
+                            alt={
+                              anime.title.romaji ||
+                              anime.title.english ||
+                              "coverImage"
+                            }
+                            width={500}
+                            height={300}
+                            className="z-20 h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] object-cover rounded-md brightness-90"
+                          />
+                        )}
                       </div>
                       {ids === "recentAdded" && (
                         <Fragment>
@@ -356,7 +431,7 @@ export default function Content({
                 .map((i) => {
                   const time = i.timeWatched;
                   const duration = i.duration;
-                  let prog = (time / duration) * 100;
+                  let prog = time && duration ? (time / duration) * 100 : 0;
                   if (prog > 90) prog = 100;
 
                   return (
@@ -378,9 +453,11 @@ export default function Content({
                               router.push(
                                 `/en/anime/watch/${i.aniId}/${
                                   i.provider
-                                }?id=${encodeURIComponent(i?.nextId)}&num=${
-                                  i?.nextNumber
-                                }${i?.dub ? `&dub=${i?.dub}` : ""}`
+                                }?id=${encodeURIComponent(
+                                  i?.nextId || ""
+                                )}&num=${i?.nextNumber}${
+                                  i?.dub ? `&dub=${i?.dub}` : ""
+                                }`
                               );
                             }}
                           >
@@ -404,11 +481,11 @@ export default function Content({
                           <PlayIcon className="w-5 h-5 shrink-0" />
                           <h1
                             className="font-semibold font-karla line-clamp-1"
-                            title={i?.title || i.anititle}
+                            title={i?.title || i?.aniTitle}
                           >
                             {i?.title === i.aniTitle
                               ? `Episode ${i.episode}`
-                              : i?.title || i.anititle}
+                              : i?.title || i?.aniTitle}
                           </h1>
                         </div>
                         <span
@@ -456,7 +533,8 @@ export default function Content({
                     </div>
                   );
                 })}
-          {userData?.filter((i) => i.aniId !== null)?.length >= 10 &&
+          {userData &&
+            userData?.filter((i) => i.aniId !== null)?.length >= 10 &&
             section !== "Recommendations" && (
               <div
                 key={section}
@@ -498,7 +576,7 @@ export default function Content({
   );
 }
 
-function convertSecondsToTime(sec) {
+function convertSecondsToTime(sec: number) {
   let days = Math.floor(sec / (3600 * 24));
   let hours = Math.floor((sec % (3600 * 24)) / 3600);
   let minutes = Math.floor((sec % 3600) / 60);
@@ -516,7 +594,7 @@ function convertSecondsToTime(sec) {
   return time.trim();
 }
 
-function checkProgress(entry) {
+function checkProgress(entry: { progress: any; media: any }) {
   const { progress, media } = entry;
   const { episodes, nextAiringEpisode } = media;
 
diff --git a/components/home/recommendation.js b/components/home/recommendation.js
index 842932c..b643456 100644
--- a/components/home/recommendation.js
+++ b/components/home/recommendation.js
@@ -1,13 +1,22 @@
 import Image from "next/image";
 // import data from "../../assets/dummyData.json";
-import { BookOpenIcon, PlayIcon } from "@heroicons/react/24/solid";
+import {
+  BookOpenIcon as BookOpenSolid,
+  PlayIcon,
+} from "@heroicons/react/24/solid";
 import { useDraggable } from "react-use-draggable-scroll";
 import { useRef } from "react";
 import Link from "next/link";
+import {
+  BookOpenIcon as BookOpenOutline,
+  PlayCircleIcon,
+} from "@heroicons/react/24/outline";
 
 export default function UserRecommendation({ data }) {
-  const ref = useRef(null);
-  const { events } = useDraggable(ref);
+  const mobileRef = useRef(null);
+  const desktopRef = useRef(null);
+  const { events: mobileEvent } = useDraggable(mobileRef);
+  const { events: desktopEvent } = useDraggable(desktopRef);
 
   const uniqueRecommendationIds = new Set();
 
@@ -25,10 +34,13 @@ export default function UserRecommendation({ data }) {
   });
 
   return (
-    <div className="flex flex-col bg-tersier relative rounded overflow-hidden">
-      <div className="flex lg:gap-5 z-50">
+    <div className="flex flex-col lg:bg-tersier relative rounded overflow-hidden">
+      <div className="hidden lg:flex lg:gap-5 z-50">
         <div className="flex flex-col items-start justify-center gap-3 lg:gap-7 lg:w-[50%] pl-5 lg:px-10">
-          <h2 className="font-bold text-3xl text-white">
+          <h2
+            className="font-inter font-bold text-3xl text-white line-clamp-2"
+            title={data[0].title.userPreferred}
+          >
             {data[0].title.userPreferred}
           </h2>
           <p
@@ -37,53 +49,128 @@ export default function UserRecommendation({ data }) {
             }}
             className="font-roboto font-light line-clamp-3 lg:line-clamp-3"
           />
-          <button
-            type="button"
+          <Link
+            href={`/en/${data[0].type.toLowerCase()}/${data[0].id}`}
             className="border border-white/70 py-1 px-2 lg:py-2 lg:px-4 rounded-full flex items-center gap-2 text-white font-bold"
           >
             {data[0].type === "ANIME" ? (
               <PlayIcon className="w-5 h-5 text-white" />
             ) : (
-              <BookOpenIcon className="w-5 h-5 text-white" />
+              <BookOpenSolid className="w-5 h-5 text-white" />
             )}
             {data[0].type === "ANIME" ? "Watch" : "Read"} Now
-          </button>
+          </Link>
         </div>
         <div
           id="recommendation-list"
           className="flex gap-5 overflow-x-scroll scrollbar-none px-5 py-7 lg:py-10"
-          ref={ref}
-          {...events}
+          ref={desktopRef}
+          {...desktopEvent}
         >
           {filteredData.slice(0, 9).map((i) => (
             <Link
-              key={i.id}
+              key={`desktop-${i.id}`}
               href={`/en/${i.type.toLowerCase()}/${i.id}`}
-              className="relative snap-start shrink-0 group hover:bg-white/20 p-1 rounded"
+              className="relative flex-center snap-start shrink-0 group rounded"
             >
+              <span className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] rounded absolute bg-gradient-to-b from-black/50 from-5% to-30% to-transparent z-40" />
+              <span className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] rounded absolute group-hover:bg-gradient-to-t from-black/90 to-transparent z-40 opacity-0 group-hover:opacity-100 transition-all duration-200 ease" />
+              <span
+                title={i.title.userPreferred}
+                className="absolute bottom-5 text-center line-clamp-2 font-karla font-semibold opacity-0 group-hover:opacity-100 w-[70%] z-50 transition-all duration-200 ease"
+              >
+                {i.title.userPreferred}
+              </span>
+              <div className="absolute top-0 right-0 z-40 font-karla font-bold">
+                {i.type === "ANIME" ? (
+                  <span className="flex items-center px-2 py-1 gap-1 text-sm text-white">
+                    <PlayCircleIcon className="w-5 h-5" />
+                  </span>
+                ) : (
+                  <span className="flex items-center px-2 py-1 gap-1 text-sm text-white">
+                    <BookOpenOutline className="w-5 h-5" />
+                  </span>
+                )}
+              </div>
               <Image
                 src={i.coverImage.extraLarge}
                 alt={i.title.userPreferred}
                 width={190}
                 height={256}
-                className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] rounded-md object-cover overflow-hidden transition-all duration-150 ease-in-out"
+                className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] brightness-[90%] rounded-md object-cover overflow-hidden transition-all duration-150 ease-in-out"
               />
-              <span className="absolute rounded pointer-events-none w-[240px] h-[50%] transition-all duration-150 ease-in transform translate-x-[75%] group-hover:translate-x-[80%] top-0 left-0 bg-secondary opacity-0 group-hover:opacity-100 flex flex-col z-50">
+              {/* <span className="absolute rounded pointer-events-none w-[240px] h-[50%] transition-all duration-150 ease-in transform group-hover:translate-x-[80%] top-0 left-0 bg-secondary opacity-0 group-hover:opacity-100 flex flex-col z-50">
                 <div className="">{i.title.userPreferred}</div>
                 <div>a</div>
-              </span>
+              </span> */}
             </Link>
           ))}
         </div>
       </div>
-      <div className="absolute top-0 left-0 z-40 bg-gradient-to-r from-transparent from-30% to-80% to-tersier w-[80%] lg:w-[60%] h-full" />
+      <div className="flex lg:hidden">
+        <div
+          id="recommendation-list"
+          className="flex gap-5 overflow-x-scroll scrollbar-none px-5 py-5 lg:py-10"
+          ref={mobileRef}
+          {...mobileEvent}
+        >
+          {filteredData.slice(0, 9).map((i) => (
+            <div key={`mobile-${i.id}`} className="flex flex-col gap-2">
+              <Link
+                title={i.title.userPreferred}
+                href={`/en/${i.type.toLowerCase()}/${i.id}`}
+                className="relative flex-center snap-start shrink-0 group rounded scale-100 hover:scale-105 duration-300 ease-out"
+              >
+                <span className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] rounded absolute bg-gradient-to-b from-black/50 from-5% to-30% to-transparent z-40" />
+                <div className="absolute top-0 right-0 z-40 font-karla font-bold">
+                  {i.type === "ANIME" ? (
+                    <span className="flex items-center px-2 py-1 gap-1 text-sm text-white">
+                      <PlayCircleIcon className="w-5 h-5" />
+                    </span>
+                  ) : (
+                    <span className="flex items-center px-2 py-1 gap-1 text-sm text-white">
+                      <BookOpenOutline className="w-5 h-5" />
+                    </span>
+                  )}
+                </div>
+                <Image
+                  src={i.coverImage.extraLarge}
+                  alt={i.title.userPreferred}
+                  width={190}
+                  height={256}
+                  className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] shrink-0 brightness-[90%] rounded-md object-cover overflow-hidden transition-all duration-150 ease-in-out"
+                />
+              </Link>
+              <Link
+                href={
+                  i.type === "MANGA"
+                    ? `/en/manga/${i.id}`
+                    : `/en/${i.type.toLowerCase()}/${i.id}`
+                }
+                className="w-[135px] lg:w-[185px] line-clamp-2"
+                title={i.title.romaji}
+              >
+                <h1 className="font-karla font-semibold xl:text-base text-[15px]">
+                  {i.status === "RELEASING" ? (
+                    <span className="dots bg-green-500" />
+                  ) : i.status === "NOT_YET_RELEASED" ? (
+                    <span className="dots bg-red-500" />
+                  ) : null}
+                  {i.title.userPreferred}
+                </h1>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="hidden lg:block absolute top-0 left-0 z-40 bg-gradient-to-r from-transparent from-30% to-80% to-tersier w-[80%] lg:w-[60%] h-full" />
       {data[0]?.bannerImage && (
         <Image
           src={data[0]?.bannerImage}
           alt={data[0].title.userPreferred}
           width={500}
           height={500}
-          className="absolute top-0 left-0 z-30 w-[60%] h-full object-cover opacity-30"
+          className="hidden lg:block absolute top-0 left-0 z-30 w-[60%] h-full object-cover opacity-30"
         />
       )}
     </div>
diff --git a/components/home/schedule.js b/components/home/schedule.js
index bb35d08..19260c2 100644
--- a/components/home/schedule.js
+++ b/components/home/schedule.js
@@ -4,7 +4,7 @@ import { convertUnixToTime } from "../../utils/getTimes";
 import { PlayIcon } from "@heroicons/react/20/solid";
 import { BackwardIcon, ForwardIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
-import { useCountdown } from "../../utils/useCountdownSeconds";
+import { useCountdown } from "../../lib/hooks/useCountdownSeconds";
 
 export default function Schedule({ data, scheduleData, anime, update }) {
   let now = new Date();
@@ -13,7 +13,7 @@ export default function Schedule({ data, scheduleData, anime, update }) {
     "Schedule";
   currentDay = currentDay.replace("Schedule", "");
 
-  const [day, hours, minutes, seconds] = useCountdown(
+  const { day, hours, minutes, seconds } = useCountdown(
     anime[0]?.airingSchedule.nodes[0]?.airingAt * 1000 || Date.now(),
     update
   );
diff --git a/components/listEditor.js b/components/listEditor.tsx
index 7d30835..2e180a1 100644
--- a/components/listEditor.js
+++ b/components/listEditor.tsx
@@ -1,26 +1,37 @@
-import { useState } from "react";
+import { useState, FormEvent } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
+import { AniListInfoTypes } from "@/types/info/AnilistInfoTypes";
 
-const ListEditor = ({
+interface ListEditorProps {
+  animeId: number;
+  session: any; // replace 'any' with the appropriate type
+  stats?: string;
+  prg?: number;
+  max?: number;
+  info?: AniListInfoTypes; // replace 'any' with the appropriate type
+  close: () => void;
+}
+
+const ListEditor: React.FC<ListEditorProps> = ({
   animeId,
   session,
-  stats,
-  prg,
+  stats = "CURRENT",
+  prg = 0,
   max,
-  info = null,
+  info = undefined,
   close,
 }) => {
-  const [status, setStatus] = useState(stats ?? "CURRENT");
-  const [progress, setProgress] = useState(prg ?? 0);
-  const isAnime = info?.type === "ANIME";
+  const [status, setStatus] = useState<string>(stats ?? "CURRENT");
+  const [progress, setProgress] = useState<number>(prg ?? 0);
+  const isAnime: boolean = info?.type === "ANIME";
 
   const router = useRouter();
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    console.log("Submitting", status?.name, progress);
+    // console.log("Submitting", status?.name, progress);
     try {
       const response = await fetch("https://graphql.anilist.co/", {
         method: "POST",
@@ -109,7 +120,7 @@ const ListEditor = ({
                 <select
                   name="status"
                   id="status"
-                  value={status?.value}
+                  value={status || "CURRENT"}
                   onChange={(e) => setStatus(e.target.value)}
                   className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base"
                 >
@@ -137,7 +148,7 @@ const ListEditor = ({
                   id="progress"
                   value={progress}
                   max={max}
-                  onChange={(e) => setProgress(e.target.value)}
+                  onChange={(e) => setProgress(Number(e.target.value))}
                   className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base"
                   min="0"
                 />
diff --git a/components/manga/ChaptersComponent.js b/components/manga/ChaptersComponent.js
new file mode 100644
index 0000000..d031c3b
--- /dev/null
+++ b/components/manga/ChaptersComponent.js
@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import ChapterSelector from "./chapters";
+import axios from "axios";
+import pls from "@/utils/request";
+
+export default function ChaptersComponent({
+  info,
+  mangaId,
+  aniId,
+  setWatch,
+  chapter,
+  setChapter,
+  loading,
+  setLoading,
+  notFound,
+  setNotFound,
+}) {
+  useEffect(() => {
+    setLoading(true);
+  }, [aniId]);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        // console.log(mangaId);
+
+        if (mangaId) {
+          const Chapters = await pls.get(
+            `https://api.anify.tv/chapters/${mangaId}`
+          );
+          //   console.log("clean this balls");
+
+          if (!Chapters) {
+            setLoading(false);
+            setNotFound(true);
+          } else {
+            setChapter(Chapters);
+            setLoading(false);
+          }
+        }
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [mangaId]);
+
+  return (
+    <div>
+      {!loading ? (
+        notFound ? (
+          <div className="h-[20vh] lg:w-full flex-center flex-col gap-5">
+            <p className="text-center font-karla font-bold lg:text-lg">
+              Oops!<br></br> It looks like this manga is not available.
+            </p>
+          </div>
+        ) : info && chapter && chapter.length > 0 ? (
+          <ChapterSelector
+            chaptersData={chapter}
+            mangaId={mangaId}
+            data={info}
+            setWatch={setWatch}
+          />
+        ) : (
+          <div className="flex justify-center">
+            <div className="lds-ellipsis">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+        )
+      ) : (
+        <div className="flex justify-center">
+          <div className="lds-ellipsis">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/manga/chapters.js b/components/manga/chapters.js
index 2150686..4e7e42e 100644
--- a/components/manga/chapters.js
+++ b/components/manga/chapters.js
@@ -89,7 +89,7 @@ const ChapterSelector = ({ chaptersData, data, setWatch, mangaId }) => {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chapters]);
+  }, [chapters, mangaId]);
 
   return (
     <div className="flex flex-col gap-2 px-3">
diff --git a/components/manga/leftBar.js b/components/manga/leftBar.js
index 5a98115..5485cd2 100644
--- a/components/manga/leftBar.js
+++ b/components/manga/leftBar.js
@@ -93,7 +93,7 @@ export function LeftBar({
                             onClick={() => setSeekPage(index)}
                           >
                             <Image
-                              src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
+                              src={`https://aoi.moopa.live/utils/image-proxy?url=${encodeURIComponent(
                                 x.url
                               )}${
                                 x?.headers?.Referer
diff --git a/components/manga/mobile/bottomBar.js b/components/manga/mobile/bottomBar.js
index 5b28de4..1cde8ed 100644
--- a/components/manga/mobile/bottomBar.js
+++ b/components/manga/mobile/bottomBar.js
@@ -108,7 +108,7 @@ export default function BottomBar({
                       onClick={() => setSeekPage(x.index)}
                     >
                       <Image
-                        src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
+                        src={`https://aoi.moopa.live/utils/image-proxy?url=${encodeURIComponent(
                           x.url
                         )}${
                           x?.headers?.Referer
diff --git a/components/manga/panels/firstPanel.js b/components/manga/panels/firstPanel.js
index 596fa58..8470fd0 100644
--- a/components/manga/panels/firstPanel.js
+++ b/components/manga/panels/firstPanel.js
@@ -141,7 +141,7 @@ export default function FirstPanel({
               ref={(el) => (imageRefs.current[index] = el)}
             >
               <Image
-                src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
+                src={`https://aoi.moopa.live/utils/image-proxy?url=${encodeURIComponent(
                   i.url
                 )}${
                   i?.headers?.Referer
diff --git a/components/manga/panels/secondPanel.js b/components/manga/panels/secondPanel.js
index fa158b2..23a9da0 100644
--- a/components/manga/panels/secondPanel.js
+++ b/components/manga/panels/secondPanel.js
@@ -136,7 +136,7 @@ export default function SecondPanel({
                   width={500}
                   height={500}
                   className="w-1/2 h-screen object-contain"
-                  src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
+                  src={`https://aoi.moopa.live/utils/image-proxy?url=${encodeURIComponent(
                     image[image.length - index - 2]?.url
                   )}${
                     image[image.length - index - 2]?.headers?.Referer
@@ -157,7 +157,7 @@ export default function SecondPanel({
                 width={500}
                 height={500}
                 className="w-1/2 h-screen object-contain"
-                src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
+                src={`https://aoi.moopa.live/utils/image-proxy?url=${encodeURIComponent(
                   image[image.length - index - 1]?.url
                 )}${
                   image[image.length - index - 1]?.headers?.Referer
diff --git a/components/manga/panels/thirdPanel.js b/components/manga/panels/thirdPanel.js
index f13b49d..77bb132 100644
--- a/components/manga/panels/thirdPanel.js
+++ b/components/manga/panels/thirdPanel.js
@@ -127,7 +127,7 @@ export default function ThirdPanel({
                 height={500}
                 className="w-full h-screen object-contain"
                 onClick={() => setMobileVisible(!mobileVisible)}
-                src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
+                src={`https://aoi.moopa.live/utils/image-proxy?url=${encodeURIComponent(
                   image[image.length - index - 1]?.url
                 )}${
                   image[image.length - index - 1]?.headers?.Referer
diff --git a/components/modal.js b/components/modal.tsx
index 5d6d0cc..6865560 100644
--- a/components/modal.js
+++ b/components/modal.tsx
@@ -1,4 +1,10 @@
-export default function Modal({ open, onClose, children }) {
+type ModalProps = {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+export default function Modal({ open, onClose, children }: ModalProps) {
   return (
     <div
       onClick={onClose}
diff --git a/components/search/searchByImage.js b/components/search/searchByImage.tsx
index f61418f..2041871 100644
--- a/components/search/searchByImage.js
+++ b/components/search/searchByImage.tsx
@@ -3,15 +3,22 @@ import { useRouter } from "next/router";
 import React, { useEffect } from "react";
 import { toast } from "sonner";
 
+type SearchByImageProps = {
+  searchPalette?: boolean;
+  setIsOpen?: (isOpen: boolean) => void;
+  setData?: any; // Replace 'any' with the actual data type
+  setMedia?: (media: any) => void; // Replace 'any' with the actual media type
+};
+
 export default function SearchByImage({
   searchPalette = false,
   setIsOpen,
-  setData,
-  setMedia,
-}) {
+  setData = () => {},
+  setMedia = () => {},
+}: SearchByImageProps) {
   const router = useRouter();
 
-  async function findImage(formData) {
+  async function findImage(formData: FormData) {
     const response = new Promise((resolve, reject) => {
       fetch("https://api.trace.moe/search?anilistInfo", {
         method: "POST",
@@ -32,14 +39,16 @@ export default function SearchByImage({
     });
 
     response
-      .then((data) => {
-        if (data?.result?.length > 0) {
+      .then((data: any) => {
+        if (data && data?.result?.length > 0) {
           const id = data.result[0].anilist.id;
-          const datas = data.result.filter((i) => i.anilist.isAdult === false);
+          const datas = data.result.filter(
+            (i: any) => i.anilist.isAdult === false
+          );
           if (setData) setData(datas);
           if (searchPalette) router.push(`/en/anime/${id}`);
           if (setIsOpen) setIsOpen(false);
-          if (setMedia) setMedia();
+          if (setMedia) setMedia({});
         }
       })
       .catch((error) => {
@@ -47,7 +56,7 @@ export default function SearchByImage({
       });
   }
 
-  const handleImageSelect = async (e) => {
+  const handleImageSelect = async (e: any) => {
     const selectedImage = e.target.files[0];
 
     if (selectedImage) {
@@ -64,7 +73,7 @@ export default function SearchByImage({
 
   useEffect(() => {
     // Add a global event listener for the paste event
-    const handlePaste = async (e) => {
+    const handlePaste = async (e: any) => {
       // e.preventDefault();
 
       const items = e.clipboardData.items;
@@ -117,3 +126,35 @@ export default function SearchByImage({
     </div>
   );
 }
+
+export interface TraceMoeDataTypes {
+  frameCount: number;
+  error: string;
+  result: TraceMoeResultTypes[];
+}
+
+export interface TraceMoeResultTypes {
+  anilist: Anilist;
+  filename: string;
+  episode: any;
+  from: number;
+  to: number;
+  similarity: number;
+  video: string;
+  image: string;
+  hovered?: boolean;
+}
+
+interface Anilist {
+  id: number;
+  idMal: number;
+  title: Title;
+  synonyms: string[];
+  isAdult: boolean;
+}
+
+interface Title {
+  native: string;
+  romaji: string;
+  english: any;
+}
diff --git a/components/search/selection.js b/components/search/selection.ts
index 767361d..767361d 100644
--- a/components/search/selection.js
+++ b/components/search/selection.ts
diff --git a/components/searchPalette.js b/components/searchPalette.tsx
index b450423..b253f59 100644
--- a/components/searchPalette.js
+++ b/components/searchPalette.tsx
@@ -1,39 +1,65 @@
 import { Fragment, useEffect, useRef, useState } from "react";
 import { Combobox, Dialog, Menu, Transition } from "@headlessui/react";
-import useDebounce from "../lib/hooks/useDebounce";
+import useDebounce from "@/lib/hooks/useDebounce";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { useSearch } from "../lib/context/isOpenState";
+import { useSearch } from "@/lib/context/isOpenState";
 import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 import { BookOpenIcon, PlayIcon } from "@heroicons/react/20/solid";
-import { useAniList } from "../lib/anilist/useAnilist";
-import { getFormat } from "../utils/getFormat";
+import { useAniList } from "@/lib/anilist/useAnilist";
+import { getFormat } from "@/utils/getFormat";
 import SearchByImage from "./search/searchByImage";
 
+type SearchType = "ANIME" | "MANGA";
+
+export interface DataTypes {
+  id: number;
+  title: Title;
+  coverImage: CoverImage;
+  type: string;
+  format: string;
+  bannerImage?: string;
+  isLicensed: boolean;
+  genres: string[];
+  startDate: StartDate;
+}
+
+interface Title {
+  userPreferred: string;
+}
+
+interface CoverImage {
+  medium: string;
+}
+
+interface StartDate {
+  year: number;
+}
+
 export default function SearchPalette() {
   const { isOpen, setIsOpen } = useSearch();
   const { quickSearch } = useAniList();
 
-  const [query, setQuery] = useState("");
-  const [data, setData] = useState(null);
+  const [query, setQuery] = useState<string>("");
+  const [data, setData] = useState<DataTypes[] | null>(null);
   const debounceSearch = useDebounce(query, 500);
-  const [loading, setLoading] = useState(false);
-  const [type, setType] = useState("ANIME");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [type, setType] = useState<SearchType>("ANIME");
 
-  const [nextPage, setNextPage] = useState(false);
+  const [nextPage, setNextPage] = useState<boolean>(false);
 
-  let focusInput = useRef(null);
+  let focusInput = useRef<HTMLInputElement>(null);
   const router = useRouter();
 
   function closeModal() {
     setIsOpen(false);
   }
 
-  function handleChange(event) {
+  function handleChange(event: string): void {
     router.push(`/en/${type.toLowerCase()}/${event}`);
   }
 
-  async function advance() {
+  async function advance(): Promise<void> {
     setLoading(true);
     const res = await quickSearch({
       search: debounceSearch,
@@ -50,11 +76,11 @@ export default function SearchPalette() {
   }, [debounceSearch, type]);
 
   useEffect(() => {
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e: any) => {
       if (e.code === "KeyS" && e.ctrlKey) {
         // do your stuff
         e.preventDefault();
-        setIsOpen((prev) => !prev);
+        setIsOpen((prev: boolean) => !prev);
         setData(null);
         setQuery("");
       }
@@ -103,7 +129,7 @@ export default function SearchPalette() {
                 <Combobox
                   as="div"
                   className="max-w-2xl mx-auto rounded-lg shadow-2xl relative flex flex-col"
-                  onChange={(e) => {
+                  onChange={(e: any) => {
                     handleChange(e);
                     setData(null);
                     setIsOpen(false);
@@ -202,7 +228,7 @@ export default function SearchPalette() {
                   >
                     {!loading ? (
                       <Fragment>
-                        {data?.length > 0
+                        {data && data?.length > 0
                           ? data?.map((i) => (
                               <Combobox.Option
                                 key={i.id}
diff --git a/components/shared/MobileNav.js b/components/shared/MobileNav.tsx
index d0f29c2..7d6dfd6 100644
--- a/components/shared/MobileNav.js
+++ b/components/shared/MobileNav.tsx
@@ -5,8 +5,12 @@ import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 
-export default function MobileNav({ hideProfile = false }) {
-  const { data: sessions } = useSession();
+type MobileNavProps = {
+  hideProfile?: boolean;
+};
+
+export default function MobileNav({ hideProfile = false }: MobileNavProps) {
+  const { data: sessions }: { data: any } = useSession();
   const [isVisible, setIsVisible] = useState(false);
 
   const handleShowClick = () => {
@@ -48,11 +52,11 @@ export default function MobileNav({ hideProfile = false }) {
       >
         {isVisible && sessions && !hideProfile && (
           <Link
-            href={`/en/profile/${sessions?.user.name}`}
+            href={`/en/profile/${sessions?.user?.name}`}
             className="fixed lg:hidden bottom-[100px] w-[60px] h-[60px] flex items-center justify-center right-[20px] rounded-full z-50 bg-[#17171f]"
           >
             <Image
-              src={sessions?.user.image.large}
+              src={sessions?.user?.image?.large}
               alt="user avatar"
               width={60}
               height={60}
@@ -99,7 +103,7 @@ export default function MobileNav({ hideProfile = false }) {
               </button>
               {sessions ? (
                 <button
-                  onClick={() => signOut("AniListProvider")}
+                  onClick={() => signOut({ redirect: true })}
                   className="group flex gap-[1.5px] flex-col items-center "
                 >
                   <div>
diff --git a/components/shared/NavBar.js b/components/shared/NavBar.tsx
index 8cfdfc1..6e8812e 100644
--- a/components/shared/NavBar.js
+++ b/components/shared/NavBar.tsx
@@ -7,14 +7,31 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { AniListInfoTypes } from "types/info/AnilistInfoTypes";
 
-const getScrollPosition = (el = window) => ({
-  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
-  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
-});
+const getScrollPosition = (el: Window | Element = window) => {
+  if (el instanceof Window) {
+    return { x: el.pageXOffset, y: el.pageYOffset };
+  } else {
+    return { x: el.scrollLeft, y: el.scrollTop };
+  }
+};
 
-export function NewNavbar({
-  info,
+type NavbarProps = {
+  info?: AniListInfoTypes | null;
+  scrollP?: number;
+  toTop?: boolean;
+  withNav?: boolean;
+  paddingY?: string;
+  home?: boolean;
+  back?: boolean;
+  manga?: boolean;
+  shrink?: boolean;
+  bgHover?: boolean;
+};
+
+export function Navbar({
+  info = null,
   scrollP = 200,
   toTop = false,
   withNav = false,
@@ -23,10 +40,13 @@ export function NewNavbar({
   back = false,
   manga = false,
   shrink = false,
-}) {
-  const { data: session } = useSession();
+  bgHover = false,
+}: NavbarProps) {
+  const { data: session }: { data: any } = useSession();
   const router = useRouter();
-  const [scrollPosition, setScrollPosition] = useState();
+  const [scrollPosition, setScrollPosition] = useState<
+    { x: number; y: number } | undefined
+  >();
   const { setIsOpen } = useSearch();
 
   const year = new Date().getFullYear();
@@ -48,8 +68,10 @@ export function NewNavbar({
   return (
     <>
       <nav
-        className={`${home ? "" : "fixed"} z-[200] top-0 px-5 w-full ${
-          scrollPosition?.y >= scrollP
+        className={`${home ? "" : "fixed"} ${
+          bgHover ? "hover:bg-tersier" : ""
+        } z-[200] top-0 px-5 w-full ${
+          scrollPosition?.y ?? 0 >= scrollP
             ? home
               ? ""
               : `bg-tersier shadow-tersier shadow-sm ${
@@ -86,7 +108,7 @@ export function NewNavbar({
 
                 <span
                   className={`font-inter font-semibold w-[50%] line-clamp-1 select-none ${
-                    scrollPosition?.y >= scrollP + 80
+                    scrollPosition?.y ?? 0 >= scrollP + 80
                       ? "opacity-100"
                       : "opacity-0"
                   } transition-all duration-200 ease-linear`}
@@ -160,7 +182,7 @@ export function NewNavbar({
               {session && (
                 <li className="text-center">
                   <Link
-                    href={`/en/profile/${session?.user.name}`}
+                    href={`/en/profile/${session?.user?.name}`}
                     className="hover:text-action/80 transition-all duration-150 ease-linear"
                   >
                     My List
@@ -202,28 +224,28 @@ export function NewNavbar({
                 <button
                   type="button"
                   onClick={() =>
-                    router.push(`/en/profile/${session?.user.name}`)
+                    router.push(`/en/profile/${session?.user?.name}`)
                   }
-                  className="rounded-full bg-white/30 overflow-hidden"
+                  className="rounded-full w-7 h-7 bg-white/30 overflow-hidden"
                 >
                   <Image
-                    src={session?.user.image.large}
+                    src={session?.user?.image?.large}
                     alt="avatar"
                     width={50}
                     height={50}
-                    className="w-full h-full object-cover"
+                    className="w-7 h-7 object-cover"
                   />
                 </button>
                 <div className="hidden absolute z-50 w-28 text-center -bottom-20 text-white shadow-2xl opacity-0 bg-secondary p-1 py-2 rounded-md font-karla font-light invisible group-hover:visible group-hover:opacity-100 duration-300 transition-all md:grid place-items-center gap-1">
                   <Link
-                    href={`/en/profile/${session?.user.name}`}
+                    href={`/en/profile/${session?.user?.name}`}
                     className="hover:text-action"
                   >
                     Profile
                   </Link>
                   <button
                     type="button"
-                    onClick={() => signOut("AniListProvider")}
+                    onClick={() => signOut({ redirect: true })}
                     className="hover:text-action"
                   >
                     Log out
@@ -254,7 +276,7 @@ export function NewNavbar({
             });
           }}
           className={`${
-            scrollPosition?.y >= 180
+            scrollPosition?.y ?? 0 >= 180
               ? "-translate-x-6 opacity-100"
               : "translate-x-[100%] opacity-0"
           } transform transition-all duration-300 ease-in-out fixed bottom-24 lg:bottom-14 right-0 z-[500]`}
diff --git a/components/shared/bugReport.js b/components/shared/bugReport.tsx
index f6bd9f1..5c1e3f4 100644
--- a/components/shared/bugReport.js
+++ b/components/shared/bugReport.tsx
@@ -10,7 +10,12 @@ const severityOptions = [
   { id: 4, name: "Critical" },
 ];
 
-const BugReportForm = ({ isOpen, setIsOpen }) => {
+interface BugReportFormProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+const BugReportForm: React.FC<BugReportFormProps> = ({ isOpen, setIsOpen }) => {
   const [bugDescription, setBugDescription] = useState("");
   const [severity, setSeverity] = useState(severityOptions[0]);
 
@@ -20,7 +25,7 @@ const BugReportForm = ({ isOpen, setIsOpen }) => {
     setSeverity(severityOptions[0]);
   }
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async (e: any) => {
     e.preventDefault();
 
     const bugReport = {
@@ -44,7 +49,7 @@ const BugReportForm = ({ isOpen, setIsOpen }) => {
       const json = await res.json();
       toast.success(json.message);
       closeModal();
-    } catch (err) {
+    } catch (err: any) {
       console.log(err);
       toast.error("Something went wrong: " + err.message);
     }
@@ -94,7 +99,7 @@ const BugReportForm = ({ isOpen, setIsOpen }) => {
                           <textarea
                             id="bugDescription"
                             name="bugDescription"
-                            rows="4"
+                            rows={4}
                             className={`w-full bg-image text-txt rounded-md border border-txt focus:ring-action focus:border-action transition duration-300 focus:outline-none py-2 px-3`}
                             placeholder="Describe the bug you encountered..."
                             value={bugDescription}
diff --git a/components/shared/changelogs.tsx b/components/shared/changelogs.tsx
new file mode 100644
index 0000000..a7b0436
--- /dev/null
+++ b/components/shared/changelogs.tsx
@@ -0,0 +1,265 @@
+import { Dialog, Transition } from "@headlessui/react";
+import Link from "next/link";
+import { Fragment, useEffect, useRef, useState } from "react";
+
+const web = {
+  version: "v4.3.1",
+};
+
+const logs = [
+  {
+    version: "v4.3.1",
+    pre: true,
+    notes: null,
+    highlights: true,
+    changes: [
+      "Fix: Auto Next Episode forcing to play sub even if dub is selected",
+      "Fix: Episode metadata not showing after switching to dub",
+      "Fix: Profile picture weirdly cropped",
+      "Fix: Weird padding on the navbar in profile page",
+    ],
+  },
+  {
+    version: "v4.3.0",
+    pre: true,
+    notes: null,
+    highlights: false,
+    changes: [
+      "Added changelogs section",
+      "Added recommendations based on user lists",
+      "New Player!",
+      "And other minor bug fixes!",
+    ],
+  },
+];
+
+export default function ChangeLogs() {
+  let [isOpen, setIsOpen] = useState(false);
+  let completeButtonRef = useRef(null);
+
+  function closeModal() {
+    localStorage.setItem("version", web.version);
+    setIsOpen(false);
+  }
+
+  function getVersion() {
+    let version = localStorage.getItem("version");
+    if (version !== web.version) {
+      setIsOpen(true);
+    }
+  }
+
+  useEffect(() => {
+    getVersion();
+  }, []);
+
+  return (
+    <>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog
+          as="div"
+          className="relative z-50"
+          onClose={closeModal}
+          initialFocus={completeButtonRef}
+        >
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black/25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded bg-secondary p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-gray-100"
+                  >
+                    <div className="flex justify-between items-center gap-2">
+                      <p className="text-xl">Changelogs</p>
+                      <div className="flex gap-2 items-center">
+                        {/* Github Icon */}
+                        <Link
+                          href="/github"
+                          className="w-5 h-5 hover:opacity-75"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="#fff"
+                            viewBox="0 0 20 20"
+                          >
+                            <g>
+                              <g
+                                fill="none"
+                                fillRule="evenodd"
+                                stroke="none"
+                                strokeWidth="1"
+                              >
+                                <g
+                                  fill="#fff"
+                                  transform="translate(-140 -7559)"
+                                >
+                                  <g transform="translate(56 160)">
+                                    <path d="M94 7399c5.523 0 10 4.59 10 10.253 0 4.529-2.862 8.371-6.833 9.728-.507.101-.687-.219-.687-.492 0-.338.012-1.442.012-2.814 0-.956-.32-1.58-.679-1.898 2.227-.254 4.567-1.121 4.567-5.059 0-1.12-.388-2.034-1.03-2.752.104-.259.447-1.302-.098-2.714 0 0-.838-.275-2.747 1.051a9.396 9.396 0 00-2.505-.345 9.375 9.375 0 00-2.503.345c-1.911-1.326-2.751-1.051-2.751-1.051-.543 1.412-.2 2.455-.097 2.714-.639.718-1.03 1.632-1.03 2.752 0 3.928 2.335 4.808 4.556 5.067-.286.256-.545.708-.635 1.371-.57.262-2.018.715-2.91-.852 0 0-.529-.985-1.533-1.057 0 0-.975-.013-.068.623 0 0 .655.315 1.11 1.5 0 0 .587 1.83 3.369 1.21.005.857.014 1.665.014 1.909 0 .271-.184.588-.683.493-3.974-1.355-6.839-5.199-6.839-9.729 0-5.663 4.478-10.253 10-10.253"></path>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
+                          </svg>
+                        </Link>
+                        {/* Discord Icon */}
+                        <Link
+                          href="/discord"
+                          className="w-6 h-6 hover:opacity-75"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            preserveAspectRatio="xMidYMid"
+                            viewBox="0 -28.5 256 256"
+                          >
+                            <path
+                              fill="#fff"
+                              d="M216.856 16.597A208.502 208.502 0 00164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0079.735 175.3a136.413 136.413 0 01-21.846-10.632 108.636 108.636 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 005.355 4.237 136.07 136.07 0 01-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"
+                            ></path>
+                          </svg>
+                        </Link>
+                      </div>
+                    </div>
+                  </Dialog.Title>
+                  <div className="mt-4">
+                    <p className="text-sm text-gray-400">
+                      Hi! Welcome to the new changelogs section. Here you can
+                      see a lists of the latest changes and updates to the site.
+                    </p>
+                    <p className="inline-block text-sm italic my-2 text-gray-400">
+                      *This update is still in it's pre-release state, please
+                      expect to see some bugs. If you find any, please report
+                      them.
+                    </p>
+                  </div>
+
+                  {logs.map((x) => (
+                    <ChangelogsVersions
+                      notes={x.notes}
+                      version={x.version}
+                      pre={x.pre}
+                      key={x.version}
+                    >
+                      {x.changes.map((i, index) => (
+                        <p key={index}>- {i}</p>
+                      ))}
+                    </ChangelogsVersions>
+                  ))}
+
+                  {/* <div className="my-2 flex items-center justify-evenly">
+                    <div className="w-full h-[1px] bg-gradient-to-r from-white/5 to-white/40" />
+                    <p className="relative flex flex-1 whitespace-nowrap font-bold mx-2 font-inter">
+                      v4.3.0
+                      <span className="flex text-xs font-light font-roboto ml-1 italic">
+                        pre
+                      </span>
+                    </p>
+                    <div className="w-full h-[1px] bg-gradient-to-l from-white/5 to-white/40" />
+                  </div>
+
+                  <div className="flex flex-col gap-2 text-sm text-gray-200">
+                    <div>
+                      <p className="inline-block italic mb-2 text-gray-400">
+                        *This update is still in it's pre-release state, please
+                        expect to see some bugs. If you find any, please report
+                        them.
+                      </p>
+
+                      <p>- Added changelogs section</p>
+                      <p>- Added recommendations based on user lists</p>
+                      <p>- New Player!</p>
+                      <p>- And other minor bug fixes!</p>
+                    </div>
+                  </div> */}
+
+                  <div className="mt-2 text-gray-400 text-sm">
+                    <p>
+                      see more changelogs{" "}
+                      <Link href="/changelogs" className="text-blue-500">
+                        here
+                      </Link>
+                    </p>
+                  </div>
+
+                  <div className="flex items-center gap-2 mt-4">
+                    <div className="flex-1" />
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-action/10 px-4 py-2 text-sm font-medium text-action/90 hover:bg-action/20 focus:outline-none"
+                      onClick={closeModal}
+                      ref={completeButtonRef}
+                    >
+                      Got it, thanks!
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}
+
+type ChangelogsVersionsProps = {
+  version?: string;
+  pre: boolean;
+  notes?: string | null;
+  highlights?: boolean;
+  children: React.ReactNode;
+};
+
+export function ChangelogsVersions({
+  version,
+  pre,
+  notes,
+  highlights,
+  children,
+}: ChangelogsVersionsProps) {
+  return (
+    <>
+      <div className="my-2 flex items-center justify-evenly">
+        <div className="w-full h-[1px] bg-gradient-to-r from-white/5 to-white/40" />
+        <p className="relative flex flex-1 whitespace-nowrap font-bold mx-2 font-inter">
+          {version}
+          {pre && (
+            <span className="flex text-xs font-light font-roboto ml-1 italic">
+              pre
+            </span>
+          )}
+        </p>
+        <div className="w-full h-[1px] bg-gradient-to-l from-white/5 to-white/40" />
+      </div>
+
+      <div className="flex flex-col gap-2 text-sm py-2 text-gray-200">
+        <div>
+          {notes && (
+            <p className="inline-block italic mb-2 text-gray-400">*{notes}</p>
+          )}
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/shared/footer.js b/components/shared/footer.tsx
index a29a3d3..2a513a3 100644
--- a/components/shared/footer.js
+++ b/components/shared/footer.tsx
@@ -76,10 +76,7 @@ function Footer() {
           </p>
           <div className="flex items-center gap-5">
             {/* Github Icon */}
-            <Link
-              href="https://github.com/Ani-Moopa/Moopa"
-              className="w-5 h-5 hover:opacity-75"
-            >
+            <Link href="/github" className="w-5 h-5 hover:opacity-75">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="#fff"
@@ -102,10 +99,7 @@ function Footer() {
               </svg>
             </Link>
             {/* Discord Icon */}
-            <Link
-              href="https://discord.gg/v5fjSdKwr2"
-              className="w-6 h-6 hover:opacity-75"
-            >
+            <Link href="/discord" className="w-6 h-6 hover:opacity-75">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 preserveAspectRatio="xMidYMid"
diff --git a/components/shared/hamburgerMenu.js b/components/shared/hamburgerMenu.js
deleted file mode 100644
index 7e4bdf1..0000000
--- a/components/shared/hamburgerMenu.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import { signIn, signOut, useSession } from "next-auth/react";
-import Image from "next/image";
-import Link from "next/link";
-import React, { useState } from "react";
-
-export default function HamburgerMenu() {
-  const { data: session } = useSession();
-  const [isVisible, setIsVisible] = useState(false);
-  const [fade, setFade] = useState(false);
-
-  const handleShowClick = () => {
-    setIsVisible(true);
-    setFade(true);
-  };
-
-  const handleHideClick = () => {
-    setIsVisible(false);
-    setFade(false);
-  };
-
-  return (
-    <React.Fragment>
-      {/* Mobile Hamburger */}
-      {!isVisible && (
-        <button
-          onClick={handleShowClick}
-          className="fixed bottom-[30px] right-[20px] z-[100] flex h-[51px] w-[50px] cursor-pointer items-center justify-center rounded-[8px] bg-[#17171f] shadow-lg lg:hidden"
-          id="bars"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-[42px] w-[61.5px] text-[#8BA0B2] fill-orange-500"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </button>
-      )}
-      <div className={`z-50`}>
-        {isVisible && (
-          <div className="fixed bottom-[30px] right-[20px] z-50 flex h-[51px] w-[300px] items-center justify-center gap-8 rounded-[8px] text-[11px] bg-[#17171f] shadow-lg lg:hidden">
-            <div className="grid grid-cols-4 place-items-center gap-6">
-              <button className="group flex flex-col items-center">
-                <Link href={`/en/`} className="">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={1.5}
-                    stroke="currentColor"
-                    className="w-6 h-6 group-hover:stroke-action"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-                    />
-                  </svg>
-                </Link>
-                <Link
-                  href={`/en/`}
-                  className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
-                >
-                  home
-                </Link>
-              </button>
-              <button className="group flex flex-col items-center">
-                <Link href={`/en/about`}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={1.5}
-                    stroke="currentColor"
-                    className="w-6 h-6 group-hover:stroke-action"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
-                    />
-                  </svg>
-                </Link>
-                <Link
-                  href={`/en/about`}
-                  className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
-                >
-                  about
-                </Link>
-              </button>
-              <button className="group flex gap-[1.5px] flex-col items-center ">
-                <div>
-                  <Link href={`/en/search/anime`}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth={1.5}
-                      stroke="currentColor"
-                      className="w-6 h-6 group-hover:stroke-action"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-                      />
-                    </svg>
-                  </Link>
-                </div>
-                <Link
-                  href={`/en/search/anime`}
-                  className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
-                >
-                  search
-                </Link>
-              </button>
-              {session ? (
-                <button
-                  onClick={() => signOut("AniListProvider")}
-                  className="group flex gap-[1.5px] flex-col items-center "
-                >
-                  <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 96 960 960"
-                      className="group-hover:fill-action w-6 h-6 fill-txt"
-                    >
-                      <path d="M186.666 936q-27 0-46.833-19.833T120 869.334V282.666q0-27 19.833-46.833T186.666 216H474v66.666H186.666v586.668H474V936H186.666zm470.668-176.667l-47-48 102-102H370v-66.666h341.001l-102-102 46.999-48 184 184-182.666 182.666z"></path>
-                    </svg>
-                  </div>
-                  <h1 className="font-karla font-bold text-[#8BA0B2] group-hover:text-action">
-                    logout
-                  </h1>
-                </button>
-              ) : (
-                <button
-                  onClick={() => signIn("AniListProvider")}
-                  className="group flex gap-[1.5px] flex-col items-center "
-                >
-                  <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 96 960 960"
-                      className="group-hover:fill-action w-6 h-6 fill-txt mr-2"
-                    >
-                      <path d="M486 936v-66.666h287.334V282.666H486V216h287.334q27 0 46.833 19.833T840 282.666v586.668q0 27-19.833 46.833T773.334 936H486zm-78.666-176.667l-47-48 102-102H120v-66.666h341l-102-102 47-48 184 184-182.666 182.666z"></path>
-                    </svg>
-                  </div>
-                  <h1 className="font-karla font-bold text-[#8BA0B2] group-hover:text-action">
-                    login
-                  </h1>
-                </button>
-              )}
-            </div>
-            <button onClick={handleHideClick}>
-              <svg
-                width="20"
-                height="21"
-                className="fill-orange-500"
-                viewBox="0 0 20 21"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  x="2.44043"
-                  y="0.941467"
-                  width="23.5842"
-                  height="3.45134"
-                  rx="1.72567"
-                  transform="rotate(45 2.44043 0.941467)"
-                />
-                <rect
-                  x="19.1172"
-                  y="3.38196"
-                  width="23.5842"
-                  height="3.45134"
-                  rx="1.72567"
-                  transform="rotate(135 19.1172 3.38196)"
-                />
-              </svg>
-            </button>
-          </div>
-        )}
-      </div>
-    </React.Fragment>
-  );
-}
diff --git a/components/shared/loading.js b/components/shared/loading.js
deleted file mode 100644
index 4620645..0000000
--- a/components/shared/loading.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Image from "next/image";
-
-export default function Loading() {
-  return (
-    <>
-      <div className="flex flex-col gap-5 items-center justify-center w-full z-[800]">
-        {/* <Image
-          src="/wait-animation.gif"
-          width="0"
-          height="0"
-          className="w-[30%] h-[30%]"
-        /> */}
-        <div className="flex flex-col items-center font-karla gap-2">
-          <p>Please Wait...</p>
-          <div className="loader"></div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/components/shared/loading.tsx b/components/shared/loading.tsx
new file mode 100644
index 0000000..902b6f9
--- /dev/null
+++ b/components/shared/loading.tsx
@@ -0,0 +1,16 @@
+export default function Loading() {
+  return (
+    <div className="flex-center flex-col font-karla z-40 gap-2">
+      {/* <div className="flex flex-col gap-5 items-center justify-center w-full z-50"> */}
+      {/* <Image
+          src="/wait-animation.gif"
+          width="0"
+          height="0"
+          className="w-[30%] h-[30%]"
+        /> */}
+      <p>Please Wait...</p>
+      <div className="loader"></div>
+      {/* </div> */}
+    </div>
+  );
+}
diff --git a/components/watch/new-player/components/bufferingIndicator.tsx b/components/watch/new-player/components/bufferingIndicator.tsx
new file mode 100644
index 0000000..4793d55
--- /dev/null
+++ b/components/watch/new-player/components/bufferingIndicator.tsx
@@ -0,0 +1,15 @@
+import { Spinner } from "@vidstack/react";
+
+export default function BufferingIndicator() {
+  return (
+    <div className="pointer-events-none absolute inset-0 z-50 flex h-full w-full items-center justify-center">
+      <Spinner.Root
+        className="text-white opacity-0 transition-opacity duration-200 ease-linear media-buffering:animate-spin media-buffering:opacity-100"
+        size={84}
+      >
+        <Spinner.Track className="opacity-25" width={8} />
+        <Spinner.TrackFill className="opacity-75" width={8} />
+      </Spinner.Root>
+    </div>
+  );
+}
diff --git a/components/watch/new-player/components/buttons.tsx b/components/watch/new-player/components/buttons.tsx
new file mode 100644
index 0000000..18c2b42
--- /dev/null
+++ b/components/watch/new-player/components/buttons.tsx
@@ -0,0 +1,277 @@
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
+import {
+  CaptionButton,
+  FullscreenButton,
+  isTrackCaptionKind,
+  MuteButton,
+  PIPButton,
+  PlayButton,
+  Tooltip,
+  useMediaState,
+  type TooltipPlacement,
+  useMediaRemote,
+  useMediaStore,
+} from "@vidstack/react";
+import {
+  ClosedCaptionsIcon,
+  ClosedCaptionsOnIcon,
+  FullscreenExitIcon,
+  FullscreenIcon,
+  MuteIcon,
+  PauseIcon,
+  PictureInPictureExitIcon,
+  PictureInPictureIcon,
+  PlayIcon,
+  ReplayIcon,
+  TheatreModeExitIcon,
+  TheatreModeIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+} from "@vidstack/react/icons";
+import { useRouter } from "next/router";
+import { Navigation } from "../player";
+
+export interface MediaButtonProps {
+  tooltipPlacement: TooltipPlacement;
+  navigation?: Navigation;
+  host?: boolean;
+}
+
+export const buttonClass =
+  "group ring-media-focus relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4";
+
+export const tooltipClass =
+  "animate-out fade-out slide-out-to-bottom-2 data-[visible]:animate-in data-[visible]:fade-in data-[visible]:slide-in-from-bottom-4 z-10 rounded-sm bg-black/90 px-2 py-0.5 text-sm font-medium text-white parent-data-[open]:hidden";
+
+export function Play({ tooltipPlacement }: MediaButtonProps) {
+  const isPaused = useMediaState("paused"),
+    ended = useMediaState("ended"),
+    tooltipText = isPaused ? "Play" : "Pause",
+    Icon = ended ? ReplayIcon : isPaused ? PlayIcon : PauseIcon;
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <PlayButton className={buttonClass}>
+          <Icon className="w-8 h-8" />
+        </PlayButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+        {tooltipText}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
+
+export function MobilePlayButton({ tooltipPlacement, host }: MediaButtonProps) {
+  const isPaused = useMediaState("paused"),
+    ended = useMediaState("ended"),
+    Icon = ended ? ReplayIcon : isPaused ? PlayIcon : PauseIcon;
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <PlayButton
+          className={`${
+            host ? "" : "pointer-events-none"
+          } group ring-media-focus relative inline-flex h-16 w-16 media-paused:cursor-pointer cursor-default items-center justify-center rounded-full outline-none`}
+        >
+          <Icon className="w-10 h-10" />
+        </PlayButton>
+      </Tooltip.Trigger>
+      {/* <Tooltip.Content
+        className="animate-out fade-out slide-out-to-bottom-2 data-[visible]:animate-in data-[visible]:fade-in data-[visible]:slide-in-from-bottom-4 z-10 rounded-sm bg-black/90 px-2 py-0.5 text-sm font-medium text-white parent-data-[open]:hidden"
+        placement={tooltipPlacement}
+      >
+        {tooltipText}
+      </Tooltip.Content> */}
+    </Tooltip.Root>
+  );
+}
+
+export function Mute({ tooltipPlacement }: MediaButtonProps) {
+  const volume = useMediaState("volume"),
+    isMuted = useMediaState("muted");
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <MuteButton className={buttonClass}>
+          {isMuted || volume == 0 ? (
+            <MuteIcon className="w-8 h-8" />
+          ) : volume < 0.5 ? (
+            <VolumeLowIcon className="w-8 h-8" />
+          ) : (
+            <VolumeHighIcon className="w-8 h-8" />
+          )}
+        </MuteButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+        {isMuted ? "Unmute" : "Mute"}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
+
+export function Caption({ tooltipPlacement }: MediaButtonProps) {
+  const track = useMediaState("textTrack"),
+    isOn = track && isTrackCaptionKind(track);
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <CaptionButton className={buttonClass}>
+          {isOn ? (
+            <ClosedCaptionsOnIcon className="w-8 h-8" />
+          ) : (
+            <ClosedCaptionsIcon className="w-8 h-8" />
+          )}
+        </CaptionButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+        {isOn ? "Closed-Captions On" : "Closed-Captions Off"}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
+
+export function TheaterButton({ tooltipPlacement }: MediaButtonProps) {
+  const playerState = useMediaState("currentTime"),
+    isPlaying = useMediaState("playing");
+
+  const { setPlayerState, setTheaterMode, theaterMode } = useWatchProvider();
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          type="button"
+          className={buttonClass}
+          onClick={() => {
+            setPlayerState((prev: any) => ({
+              ...prev,
+              currentTime: playerState,
+              isPlaying: isPlaying,
+            }));
+            setTheaterMode((prev: any) => !prev);
+          }}
+        >
+          {!theaterMode ? (
+            <TheatreModeIcon className="w-8 h-8" />
+          ) : (
+            <TheatreModeExitIcon className="w-8 h-8" />
+          )}
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+        Theatre Mode
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
+
+export function PIP({ tooltipPlacement }: MediaButtonProps) {
+  const isActive = useMediaState("pictureInPicture");
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <PIPButton className={buttonClass}>
+          {isActive ? (
+            <PictureInPictureExitIcon className="w-8 h-8" />
+          ) : (
+            <PictureInPictureIcon className="w-8 h-8" />
+          )}
+        </PIPButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+        {isActive ? "Exit PIP" : "Enter PIP"}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
+
+export function PlayNextButton({
+  tooltipPlacement,
+  navigation,
+}: MediaButtonProps) {
+  // const remote = useMediaRemote();
+  const router = useRouter();
+  const { dataMedia, track } = useWatchProvider();
+  return (
+    <button
+      title="next-button"
+      type="button"
+      onClick={() => {
+        if (navigation?.next) {
+          router.push(
+            `/en/anime/watch/${dataMedia.id}/${track.provider}?id=${
+              navigation?.next?.id
+            }&num=${navigation?.next?.number}${
+              track?.isDub ? `&dub=${track?.isDub}` : ""
+            }`
+          );
+        }
+      }}
+      className="next-button hidden"
+    >
+      Next Episode
+    </button>
+  );
+}
+
+export function SkipOpButton({ tooltipPlacement }: MediaButtonProps) {
+  const remote = useMediaRemote();
+  const { track } = useWatchProvider();
+  const op = track?.skip?.find((item: any) => item.text === "Opening");
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        remote.seek(op?.endTime);
+      }}
+      className="op-button hidden hover:bg-white/80 bg-white px-4 py-2 text-primary font-karla font-semibold rounded-md"
+    >
+      Skip Opening
+    </button>
+  );
+}
+
+export function SkipEdButton({ tooltipPlacement }: MediaButtonProps) {
+  const remote = useMediaRemote();
+  const { duration } = useMediaStore();
+  const { track } = useWatchProvider();
+  const ed = track?.skip?.find((item: any) => item.text === "Ending");
+
+  const endTime =
+    Math.round(duration) === ed?.endTime ? ed?.endTime - 1 : ed?.endTime;
+
+  // console.log(endTime);
+
+  return (
+    <button
+      title="ed-button"
+      type="button"
+      onClick={() => remote.seek(endTime)}
+      className="ed-button hidden cursor-pointer hover:bg-white/80 bg-white px-4 py-2 text-primary font-karla font-semibold rounded-md"
+    >
+      Skip Ending
+    </button>
+  );
+}
+
+export function Fullscreen({ tooltipPlacement }: MediaButtonProps) {
+  const isActive = useMediaState("fullscreen");
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <FullscreenButton className={buttonClass}>
+          {isActive ? (
+            <FullscreenExitIcon className="w-8 h-8" />
+          ) : (
+            <FullscreenIcon className="w-8 h-8" />
+          )}
+        </FullscreenButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+        {isActive ? "Exit Fullscreen" : "Enter Fullscreen"}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
diff --git a/components/watch/new-player/components/chapter-title.tsx b/components/watch/new-player/components/chapter-title.tsx
new file mode 100644
index 0000000..779f826
--- /dev/null
+++ b/components/watch/new-player/components/chapter-title.tsx
@@ -0,0 +1,11 @@
+import { ChapterTitle, type ChapterTitleProps } from "@vidstack/react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@vidstack/react/icons";
+
+export function ChapterTitleComponent() {
+  return (
+    <span className="inline-block flex-1 overflow-hidden text-ellipsis whitespace-nowrap px-2 text-sm font-medium text-white">
+      <span className="mr-1 text-txt">&#8226;</span>
+      <ChapterTitle className="ml-1" />
+    </span>
+  );
+}
diff --git a/components/watch/new-player/components/layouts/captions.module.css b/components/watch/new-player/components/layouts/captions.module.css
new file mode 100644
index 0000000..338b96e
--- /dev/null
+++ b/components/watch/new-player/components/layouts/captions.module.css
@@ -0,0 +1,80 @@
+.captions {
+  @apply font-roboto font-medium;
+  /* Recommended settings in the WebVTT spec (https://www.w3.org/TR/webvtt1). */
+  /* --cue-color: var(--media-cue-color, white); */
+  /* --cue-color: white; */
+  /* z-index: 20; */
+  /* --cue-bg-color: var(--media-cue-bg, rgba(0, 0, 0, 0.7)); */
+
+  /* bg color white */
+  --cue-bg-color: rgba(255, 255, 255, 0.9);
+  --cue-font-size: calc(var(--overlay-height) / 100 * 5);
+  --cue-line-height: calc(var(--cue-font-size) * 1.2);
+  --cue-padding-x: 0.5em;
+  --cue-padding-y: 0.1em;
+
+  /* remove background blur */
+
+  /* --cue-text-shadow: 0 0 5px black; */
+
+  font-size: var(--cue-font-size);
+  word-spacing: normal;
+  text-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
+  /* contain: layout style; */
+}
+
+.captions[data-dir="rtl"] :global([data-part="cue-display"]) {
+  direction: rtl;
+}
+
+.captions[aria-hidden="true"] {
+  display: none;
+}
+
+/*************************************************************************************************
+ * Cue Display
+ *************************************************************************************************/
+
+/*
+* Most of the cue styles are set automatically by our [media-captions](https://github.com/vidstack/media-captions)
+* library via CSS variables. They are inferred from the VTT, SRT, or SSA file cue settings. You're
+* free to ignore them and style the captions as desired, but we don't recommend it unless the
+* captions file contains no cue settings. Otherwise, you might be breaking accessibility.
+*/
+.captions :global([data-part="cue-display"]) {
+  position: absolute;
+  direction: ltr;
+  overflow: visible;
+  contain: content;
+  top: var(--cue-top);
+  left: var(--cue-left);
+  right: var(--cue-right);
+  bottom: var(--cue-bottom);
+  width: var(--cue-width, auto);
+  height: var(--cue-height, auto);
+  transform: var(--cue-transform);
+  text-align: var(--cue-text-align);
+  writing-mode: var(--cue-writing-mode, unset);
+  white-space: pre-line;
+  unicode-bidi: plaintext;
+  min-width: min-content;
+  min-height: min-content;
+}
+
+.captions :global([data-part="cue"]) {
+  display: inline-block;
+  contain: content;
+  /* border-radius: 2px; */
+  /* backdrop-filter: unset; */
+  padding: var(--cue-padding-y) var(--cue-padding-x);
+  line-height: var(--cue-line-height);
+  /* background-color: var(--cue-bg-color); */
+  color: var(--cue-color);
+  white-space: pre-wrap;
+  outline: var(--cue-outline);
+  text-shadow: var(--cue-text-shadow);
+}
+
+.captions :global([data-part="cue-display"][data-vertical] [data-part="cue"]) {
+  padding: var(--cue-padding-x) var(--cue-padding-y);
+}
diff --git a/components/watch/new-player/components/layouts/video-layout.module.css b/components/watch/new-player/components/layouts/video-layout.module.css
new file mode 100644
index 0000000..14540f6
--- /dev/null
+++ b/components/watch/new-player/components/layouts/video-layout.module.css
@@ -0,0 +1,13 @@
+.controls {
+  /*
+   * These CSS variables are supported out of the box to easily apply offsets to all popups.
+   * You can also offset via props on `Tooltip.Content`, `Menu.Content`, and slider previews.
+   */
+  --media-tooltip-y-offset: 30px;
+  --media-menu-y-offset: 30px;
+}
+
+.controls :global(.volume-slider) {
+  --media-slider-preview-offset: 30px;
+  margin-left: 1.5px;
+}
diff --git a/components/watch/new-player/components/layouts/video-layout.tsx b/components/watch/new-player/components/layouts/video-layout.tsx
new file mode 100644
index 0000000..fa1f6c3
--- /dev/null
+++ b/components/watch/new-player/components/layouts/video-layout.tsx
@@ -0,0 +1,173 @@
+import captionStyles from "./captions.module.css";
+import styles from "./video-layout.module.css";
+
+import {
+  Captions,
+  Controls,
+  Gesture,
+  Spinner,
+  useMediaState,
+} from "@vidstack/react";
+
+import * as Buttons from "../buttons";
+import * as Menus from "../menus";
+import * as Sliders from "../sliders";
+import { TimeGroup } from "../time-group";
+import { Title } from "../title";
+import { ChapterTitleComponent } from "../chapter-title";
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
+import { Navigation } from "../../player";
+import BufferingIndicator from "../bufferingIndicator";
+import { useEffect, useState } from "react";
+
+export interface VideoLayoutProps {
+  thumbnails?: string;
+  navigation?: Navigation;
+  host?: boolean;
+}
+
+function isMobileDevice() {
+  if (typeof window !== "undefined") {
+    return (
+      typeof window.orientation !== "undefined" ||
+      navigator.userAgent.indexOf("IEMobile") !== -1
+    );
+  }
+  return false;
+}
+
+export function VideoLayout({
+  thumbnails,
+  navigation,
+  host = true,
+}: VideoLayoutProps) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  const { track } = useWatchProvider();
+  const isFullscreen = useMediaState("fullscreen");
+
+  useEffect(() => {
+    setIsMobile(isMobileDevice());
+  }, []);
+
+  return (
+    <>
+      <Gestures host={host} />
+      <Captions
+        className={`${captionStyles.captions} media-preview:opacity-0 media-controls:bottom-[85px] media-captions:opacity-100 absolute inset-0 bottom-2 z-10 select-none break-words opacity-0 transition-[opacity,bottom] duration-300`}
+      />
+      <Controls.Root
+        className={`${styles.controls} media-paused:bg-black/10 duration-200 media-controls:opacity-100 absolute inset-0 z-10 flex h-full w-full flex-col bg-gradient-to-t from-black/30 via-transparent to-black/30 opacity-0 transition-opacity`}
+      >
+        <Controls.Group className="flex justify-between items-center w-full px-2 pt-2">
+          <Title navigation={navigation} />
+          <div className="flex-1" />
+          {/* <Menus.Episodes placement="left start" /> */}
+        </Controls.Group>
+        <div className="flex-1" />
+
+        {/* {isPaused && ( */}
+        <Controls.Group
+          className={`media-paused:opacity-100 media-paused:scale-100 backdrop-blur-sm scale-[160%] opacity-0 duration-200 ease-out flex shadow bg-white/10 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}
+        >
+          <Buttons.MobilePlayButton tooltipPlacement="top center" host={host} />
+        </Controls.Group>
+        {/* )} */}
+
+        <div className="pointer-events-none absolute inset-0 z-50 flex h-full w-full items-center justify-center">
+          <Spinner.Root
+            className="text-white opacity-0 transition-opacity duration-200 ease-linear media-buffering:animate-spin media-buffering:opacity-100"
+            size={84}
+          >
+            <Spinner.Track className="opacity-25" width={8} />
+            <Spinner.TrackFill className="opacity-75" width={8} />
+          </Spinner.Root>
+        </div>
+        {/* </Controls.Group> */}
+
+        <Controls.Group className="flex px-4">
+          <div className="flex-1" />
+          {host && (
+            <>
+              <Buttons.SkipOpButton tooltipPlacement="top end" />
+              <Buttons.SkipEdButton tooltipPlacement="top end" />
+              <Buttons.PlayNextButton
+                navigation={navigation}
+                tooltipPlacement="top end"
+              />
+            </>
+          )}
+        </Controls.Group>
+
+        <Controls.Group className="flex w-full items-center px-2">
+          <Sliders.Time thumbnails={thumbnails} host={host} />
+        </Controls.Group>
+        <Controls.Group className="-mt-0.5 flex w-full items-center px-2 pb-2">
+          <Buttons.Play tooltipPlacement="top start" />
+          <Buttons.Mute tooltipPlacement="top" />
+          <Sliders.Volume />
+          <TimeGroup />
+          <ChapterTitleComponent />
+          <div className="flex-1" />
+          {track?.subtitles && <Buttons.Caption tooltipPlacement="top" />}
+          <Menus.Settings placement="top end" tooltipPlacement="top" />
+          {!isMobile && !isFullscreen && (
+            <Buttons.TheaterButton tooltipPlacement="top" />
+          )}
+          <Buttons.PIP tooltipPlacement="top" />
+          <Buttons.Fullscreen tooltipPlacement="top end" />
+        </Controls.Group>
+      </Controls.Root>
+    </>
+  );
+}
+
+function Gestures({ host }: { host?: boolean }) {
+  const isMobile = isMobileDevice();
+  return (
+    <>
+      {isMobile ? (
+        <>
+          {host && (
+            <Gesture
+              className="absolute inset-0 z-10"
+              event="dblpointerup"
+              action="toggle:paused"
+            />
+          )}
+          <Gesture
+            className="absolute inset-0"
+            event="pointerup"
+            action="toggle:controls"
+          />
+        </>
+      ) : (
+        <>
+          {host && (
+            <Gesture
+              className="absolute inset-0"
+              event="pointerup"
+              action="toggle:paused"
+            />
+          )}
+          <Gesture
+            className="absolute inset-0 z-10"
+            event="dblpointerup"
+            action="toggle:fullscreen"
+          />
+        </>
+      )}
+
+      <Gesture
+        className="absolute top-0 left-0 w-1/5 h-full z-20"
+        event="dblpointerup"
+        action="seek:-10"
+      />
+      <Gesture
+        className="absolute top-0 right-0 w-1/5 h-full z-20"
+        event="dblpointerup"
+        action="seek:10"
+      />
+    </>
+  );
+}
diff --git a/components/watch/new-player/components/menus.tsx b/components/watch/new-player/components/menus.tsx
new file mode 100644
index 0000000..de2b302
--- /dev/null
+++ b/components/watch/new-player/components/menus.tsx
@@ -0,0 +1,387 @@
+// @ts-nocheck
+
+import type { ReactElement } from "react";
+
+// import EpiDataDummy from "@/components/test/episodeDummy.json";
+
+import {
+  Menu,
+  Tooltip,
+  useCaptionOptions,
+  type MenuPlacement,
+  type TooltipPlacement,
+  useVideoQualityOptions,
+  useMediaState,
+  usePlaybackRateOptions,
+} from "@vidstack/react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClosedCaptionsIcon,
+  SettingsMenuIcon,
+  RadioButtonIcon,
+  RadioButtonSelectedIcon,
+  SettingsIcon,
+  // EpisodesIcon,
+  SettingsSwitchIcon,
+  // PlaybackSpeedCircleIcon,
+  OdometerIcon,
+} from "@vidstack/react/icons";
+
+import { buttonClass, tooltipClass } from "./buttons";
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
+import React from "react";
+
+export interface SettingsProps {
+  placement: MenuPlacement;
+  tooltipPlacement: TooltipPlacement;
+}
+
+export const menuClass =
+  "fixed bottom-0 animate-out fade-out slide-out-to-bottom-2 data-[open]:animate-in data-[open]:fade-in data-[open]:slide-in-from-bottom-4 flex h-[var(--menu-height)] max-h-[200px] lg:max-h-[400px] min-w-[260px] flex-col overflow-y-auto overscroll-y-contain rounded-md border border-white/10 bg-black/95 p-2.5 font-sans text-[15px] font-medium outline-none backdrop-blur-sm transition-[height] duration-300 will-change-[height] data-[resizing]:overflow-hidden";
+
+export const submenuClass =
+  "hidden w-full flex-col items-start justify-center outline-none data-[keyboard]:mt-[3px] data-[open]:inline-block";
+
+export const contentMenuClass =
+  "flex cust-scroll h-[var(--menu-height)] max-h-[180px] lg:max-h-[400px] min-w-[260px] flex-col overflow-y-auto overscroll-y-contain rounded-md border border-white/10 bg-secondary p-2 font-sans text-[15px] font-medium outline-none backdrop-blur-sm transition-[height] duration-300 will-change-[height] data-[resizing]:overflow-hidden";
+
+export function Settings({ placement, tooltipPlacement }: SettingsProps) {
+  const { track } = useWatchProvider();
+  const isSubtitleAvailable = track?.epiData?.subtitles?.length > 0;
+
+  return (
+    <Menu.Root className="parent">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Menu.Button className={buttonClass}>
+            <SettingsIcon className="h-8 w-8 transform transition-transform duration-200 ease-out group-data-[open]:rotate-90" />
+          </Menu.Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+          Settings
+        </Tooltip.Content>
+      </Tooltip.Root>
+      {/* <Menu.Content className={menuClass} placement={placement}>
+        {isSubtitleAvailable && <CaptionSubmenu />}
+        <QualitySubmenu />
+      </Menu.Content> */}
+      <Menu.Content className={contentMenuClass} placement={placement}>
+        <AutoPlay />
+        <AutoNext />
+        <SpeedSubmenu />
+        {isSubtitleAvailable && <CaptionSubmenu />}
+        <QualitySubmenu />
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+// export function Episodes({ placement }: { placement: MenuPlacement }) {
+//   return (
+//     <Menu.Root className="parent">
+//       <Tooltip.Root>
+//         <Tooltip.Trigger asChild>
+//           <Menu.Button className={buttonClass}>
+//             <EpisodesIcon className="w-10 h-10" />
+//           </Menu.Button>
+//         </Tooltip.Trigger>
+//       </Tooltip.Root>
+//       <Menu.Content
+//         className={`bg-secondary/95 border border-white/10 max-h-[240px] overflow-y-scroll cust-scroll rounded overflow-hidden z-30 -translate-y-5 -translate-x-2`}
+//         placement={placement}
+//       >
+//         <EpisodeSubmenu />
+//       </Menu.Content>
+//     </Menu.Root>
+//   );
+// }
+
+function SpeedSubmenu() {
+  const options = usePlaybackRateOptions(),
+    hint =
+      options.selectedValue === "1" ? "Normal" : options.selectedValue + "x";
+  return (
+    <Menu.Root>
+      <SubmenuButton
+        label="Playback Rate"
+        hint={hint}
+        icon={OdometerIcon}
+        disabled={options.disabled}
+      >
+        Speed ({hint})
+      </SubmenuButton>
+      <Menu.Content className={submenuClass}>
+        <Menu.RadioGroup
+          className="w-full flex flex-col"
+          value={options.selectedValue}
+        >
+          {options.map(({ label, value, select }) => (
+            <Radio value={value} onSelect={select} key={value}>
+              {label}
+            </Radio>
+          ))}
+        </Menu.RadioGroup>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+function CaptionSubmenu() {
+  const options = useCaptionOptions(),
+    hint = options.selectedTrack?.label ?? "Off";
+  return (
+    <Menu.Root>
+      <SubmenuButton
+        label="Captions"
+        hint={hint}
+        disabled={options.disabled}
+        icon={ClosedCaptionsIcon}
+      />
+      <Menu.Content className={submenuClass}>
+        <Menu.RadioGroup
+          className="w-full flex flex-col"
+          value={options.selectedValue}
+        >
+          {options.map(({ label, value, select }) => (
+            <Radio value={value} onSelect={select} key={value}>
+              {label}
+            </Radio>
+          ))}
+        </Menu.RadioGroup>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+// function EpisodeSubmenu() {
+//   return (
+//     // <div className="h-full w-[320px]">
+//     <div className="flex flex-col h-full w-[360px] font-karla">
+//       {/* {EpiDataDummy.map((epi, index) => ( */}
+//         <div
+//           key={index}
+//           className={`flex gap-1 hover:bg-secondary px-3 py-2 ${
+//             index === 0
+//               ? "pt-4"
+//               // : index === EpiDataDummy.length - 1
+//               ? "pb-4"
+//               : ""
+//           }`}
+//         >
+//           <Image
+//             src={epi.img}
+//             alt="thumbnail"
+//             width={100}
+//             height={100}
+//             className="object-cover w-[120px] h-[64px] rounded-md"
+//           />
+//           <div className="flex flex-col pl-2">
+//             <h1 className="font-semibold">{epi.title}</h1>
+//             <p className="line-clamp-2 text-sm font-light">
+//               {epi?.description}
+//             </p>
+//           </div>
+//         </div>
+//       ))}
+//     </div>
+//     // </div>
+//   );
+// }
+
+function AutoPlay() {
+  const [options, setOptions] = React.useState([
+    {
+      label: "On",
+      value: "on",
+      selected: false,
+    },
+    {
+      label: "Off",
+      value: "off",
+      selected: true,
+    },
+  ]);
+
+  const { autoplay, setAutoPlay } = useWatchProvider();
+
+  // console.log({ autoplay });
+
+  return (
+    <Menu.Root>
+      <SubmenuButton
+        label="Autoplay Video"
+        hint={
+          autoplay
+            ? options.find((option) => option.value === autoplay)?.value
+            : options.find((option) => option.selected)?.value
+        }
+        icon={SettingsSwitchIcon}
+      />
+      <Menu.Content className={submenuClass}>
+        <Menu.RadioGroup
+          className="w-full flex flex-col"
+          value={
+            autoplay
+              ? options.find((option) => option.value === autoplay)?.value
+              : options.find((option) => option.selected)?.value
+          }
+          onChange={(value) => {
+            setOptions((options) =>
+              options.map((option) =>
+                option.value === value
+                  ? { ...option, selected: true }
+                  : { ...option, selected: false }
+              )
+            );
+            setAutoPlay(value);
+            localStorage.setItem("autoplay", value);
+          }}
+        >
+          {options.map((option) => (
+            <Radio key={option.value} value={option.value}>
+              {option.label}
+            </Radio>
+          ))}
+        </Menu.RadioGroup>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+function AutoNext() {
+  const [options, setOptions] = React.useState([
+    {
+      label: "On",
+      value: "on",
+      selected: false,
+    },
+    {
+      label: "Off",
+      value: "off",
+      selected: true,
+    },
+  ]);
+
+  const { autoNext, setAutoNext } = useWatchProvider();
+
+  return (
+    <Menu.Root>
+      <SubmenuButton
+        label="Autoplay Next"
+        hint={
+          autoNext
+            ? options.find((option) => option.value === autoNext)?.value
+            : options.find((option) => option.selected)?.value
+        }
+        icon={SettingsSwitchIcon}
+      />
+      <Menu.Content className={submenuClass}>
+        <Menu.RadioGroup
+          className="w-full flex flex-col"
+          value={
+            autoNext
+              ? options.find((option) => option.value === autoNext)?.value
+              : options.find((option) => option.selected)?.value
+          }
+          onChange={(value) => {
+            setOptions((options) =>
+              options.map((option) =>
+                option.value === value
+                  ? { ...option, selected: true }
+                  : { ...option, selected: false }
+              )
+            );
+            setAutoNext(value);
+            localStorage.setItem("autoNext", value);
+          }}
+        >
+          {options.map((option) => (
+            <Radio key={option.value} value={option.value}>
+              {option.label}
+            </Radio>
+          ))}
+        </Menu.RadioGroup>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+function QualitySubmenu() {
+  const options = useVideoQualityOptions({ sort: "descending" }),
+    autoQuality = useMediaState("autoQuality"),
+    currentQualityText = options.selectedQuality?.height + "p" ?? "",
+    hint = !autoQuality ? currentQualityText : `Auto (${currentQualityText})`;
+
+  // console.log({ options });
+
+  return (
+    <Menu.Root>
+      <SubmenuButton
+        label="Quality"
+        hint={hint}
+        disabled={options.disabled}
+        icon={SettingsMenuIcon}
+      />
+      <Menu.Content className={submenuClass}>
+        <Menu.RadioGroup
+          className="w-full flex flex-col"
+          value={options.selectedValue}
+        >
+          {options.map(({ label, value, bitrateText, select }) => (
+            <Radio value={value} onSelect={select} key={value}>
+              {label}
+            </Radio>
+          ))}
+        </Menu.RadioGroup>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+export interface RadioProps extends Menu.RadioProps {}
+
+function Radio({ children, ...props }: RadioProps) {
+  return (
+    <Menu.Radio
+      className="ring-media-focus group relative flex w-full cursor-pointer select-none items-center justify-start rounded-sm p-2.5 outline-none data-[hocus]:bg-white/10 data-[focus]:ring-[3px]"
+      {...props}
+    >
+      <RadioButtonIcon className="h-4 w-4 text-white group-data-[checked]:hidden" />
+      <RadioButtonSelectedIcon
+        className="text-media-brand hidden h-4 w-4 group-data-[checked]:block"
+        type="radio-button-selected"
+      />
+      <span className="ml-2">{children}</span>
+    </Menu.Radio>
+  );
+}
+
+export interface SubmenuButtonProps {
+  label: string;
+  hint: string;
+  disabled?: boolean;
+  icon: ReactElement;
+}
+
+function SubmenuButton({
+  label,
+  hint,
+  icon: Icon,
+  disabled,
+}: SubmenuButtonProps) {
+  return (
+    <Menu.Button
+      className="ring-media-focus data-[open]:bg-secondary parent left-0 z-10 flex w-full cursor-pointer select-none items-center justify-start rounded-sm p-2.5 outline-none ring-inset data-[open]:sticky data-[open]:-top-2.5 data-[hocus]:bg-white/10 data-[focus]:ring-[3px]"
+      disabled={disabled}
+    >
+      <ChevronLeftIcon className="parent-data-[open]:block -ml-0.5 mr-1.5 hidden h-[18px] w-[18px]" />
+      <div className="contents parent-data-[open]:hidden">
+        <Icon className="w-5 h-5" />
+      </div>
+      <span className="ml-1.5 parent-data-[open]:ml-0">{label}</span>
+      <span className="ml-auto text-sm text-white/50">{hint}</span>
+      <ChevronRightIcon className="parent-data-[open]:hidden ml-0.5 h-[18px] w-[18px] text-sm text-white/50" />
+    </Menu.Button>
+  );
+}
diff --git a/components/watch/new-player/components/sliders.tsx b/components/watch/new-player/components/sliders.tsx
new file mode 100644
index 0000000..f31e28a
--- /dev/null
+++ b/components/watch/new-player/components/sliders.tsx
@@ -0,0 +1,73 @@
+import { TimeSlider, VolumeSlider } from "@vidstack/react";
+
+export function Volume() {
+  return (
+    <VolumeSlider.Root className="volume-slider group relative mx-[7.5px] inline-flex h-10 w-full max-w-[80px] cursor-pointer touch-none select-none items-center outline-none aria-hidden:hidden">
+      <VolumeSlider.Track className="relative ring-media-focus z-0 h-[5px] w-full rounded-sm bg-white/30 group-data-[focus]:ring-[3px]">
+        <VolumeSlider.TrackFill className="bg-white absolute h-full w-[var(--slider-fill)] rounded-sm will-change-[width]" />
+      </VolumeSlider.Track>
+
+      <VolumeSlider.Preview
+        className="flex flex-col items-center opacity-0 transition-opacity duration-200 data-[visible]:opacity-100"
+        noClamp
+      >
+        <VolumeSlider.Value className="rounded-sm bg-black px-2 py-px text-[13px] font-medium" />
+      </VolumeSlider.Preview>
+      <VolumeSlider.Thumb className="absolute left-[var(--slider-fill)] top-1/2 z-20 h-[15px] w-[15px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-[#cacaca] bg-white opacity-0 ring-white/40 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:ring-4 will-change-[left]" />
+    </VolumeSlider.Root>
+  );
+}
+
+export interface TimeSliderProps {
+  thumbnails?: string;
+  host?: boolean;
+}
+
+export function Time({ thumbnails, host }: TimeSliderProps) {
+  return (
+    <TimeSlider.Root
+      className={`${
+        host ? "" : "pointer-events-none"
+      } time-slider group relative mx-[7.5px] inline-flex h-10 w-full cursor-pointer touch-none select-none items-center outline-none`}
+    >
+      <TimeSlider.Chapters className="relative flex h-full w-full items-center rounded-[1px]">
+        {(cues, forwardRef) =>
+          cues.map((cue) => (
+            <div
+              className="last-child:mr-0 group/slider relative mr-0.5 flex h-full w-full items-center rounded-[1px]"
+              style={{ contain: "layout style" }}
+              key={cue.startTime}
+              ref={forwardRef}
+            >
+              <TimeSlider.Track className="relative ring-media-focus z-0 h-[5px] group-hover/slider:h-[10px] transition-all duration-100 w-full rounded-sm bg-white/30 group-data-[focus]:ring-[3px]">
+                <TimeSlider.TrackFill className="bg-white absolute h-full w-[var(--chapter-fill)] rounded-sm will-change-[width]" />
+                <TimeSlider.Progress className="absolute z-10 h-full w-[var(--chapter-progress)] rounded-sm bg-white/50 will-change-[width]" />
+              </TimeSlider.Track>
+            </div>
+          ))
+        }
+      </TimeSlider.Chapters>
+      {/* <TimeSlider.Track className="relative ring-media-focus z-0 h-[5px] w-full rounded-sm bg-white/30 group-data-[focus]:ring-[3px]">
+        <TimeSlider.TrackFill className="bg-white absolute h-full w-[var(--slider-fill)] rounded-sm will-change-[width]" />
+        <TimeSlider.Progress className="absolute z-10 h-full w-[var(--slider-progress)] rounded-sm bg-white/40 will-change-[width]" />
+      </TimeSlider.Track> */}
+
+      <TimeSlider.Thumb className="absolute left-[var(--slider-fill)] top-1/2 z-20 h-[15px] w-[15px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-[#cacaca] bg-white opacity-0 ring-white/40 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:ring-4 will-change-[left]" />
+
+      <TimeSlider.Preview className="flex flex-col items-center opacity-0 transition-opacity duration-200 data-[visible]:opacity-100 pointer-events-none">
+        {thumbnails ? (
+          <TimeSlider.Thumbnail.Root
+            src={thumbnails}
+            className="block h-[var(--thumbnail-height)] max-h-[160px] min-h-[80px] w-[var(--thumbnail-width)] min-w-[120px] max-w-[180px] overflow-hidden border border-white bg-black"
+          >
+            <TimeSlider.Thumbnail.Img />
+          </TimeSlider.Thumbnail.Root>
+        ) : null}
+
+        <TimeSlider.ChapterTitle className="mt-2 text-sm" />
+
+        <TimeSlider.Value className="text-[13px]" />
+      </TimeSlider.Preview>
+    </TimeSlider.Root>
+  );
+}
diff --git a/components/watch/new-player/components/time-group.tsx b/components/watch/new-player/components/time-group.tsx
new file mode 100644
index 0000000..45fc795
--- /dev/null
+++ b/components/watch/new-player/components/time-group.tsx
@@ -0,0 +1,11 @@
+import { Time } from "@vidstack/react";
+
+export function TimeGroup() {
+  return (
+    <div className="ml-1.5 flex items-center text-sm font-medium">
+      <Time className="time" type="current" />
+      <div className="mx-1 text-white/80">/</div>
+      <Time className="time" type="duration" />
+    </div>
+  );
+}
diff --git a/components/watch/new-player/components/title.tsx b/components/watch/new-player/components/title.tsx
new file mode 100644
index 0000000..6233061
--- /dev/null
+++ b/components/watch/new-player/components/title.tsx
@@ -0,0 +1,35 @@
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
+import { useMediaRemote } from "@vidstack/react";
+import { ChevronLeftIcon } from "@vidstack/react/icons";
+import { Navigation } from "../player";
+
+type TitleProps = {
+  navigation?: Navigation;
+};
+
+export function Title({ navigation }: TitleProps) {
+  const { dataMedia } = useWatchProvider();
+  const remote = useMediaRemote();
+
+  return (
+    <div className="media-fullscreen:flex hidden text-start flex-1 text-sm font-medium text-white">
+      {/* <p className="pt-4 h-full">
+      </p> */}
+      <button
+        type="button"
+        className="flex items-center gap-2 text-sm font-karla w-full"
+        onClick={() => remote.toggleFullscreen()}
+      >
+        <ChevronLeftIcon className="font-extrabold w-7 h-7" />
+        <span className="max-w-[75%] text-base xl:text-2xl font-semibold whitespace-nowrap overflow-hidden text-ellipsis">
+          {dataMedia?.title?.romaji}
+        </span>
+        <span className="text-base xl:text-2xl font-normal">/</span>
+        <span className="text-base xl:text-2xl font-normal">
+          Episode {navigation?.playing.number}
+        </span>
+        {/* <span className="absolute top-5 left-[1s0%] w-[24%] h-[1px] bg-white" /> */}
+      </button>
+    </div>
+  );
+}
diff --git a/components/watch/new-player/player.module.css b/components/watch/new-player/player.module.css
new file mode 100644
index 0000000..f2f5b39
--- /dev/null
+++ b/components/watch/new-player/player.module.css
@@ -0,0 +1,50 @@
+.player {
+  --media-brand: #f5f5f5;
+  --media-focus-ring-color: #4e9cf6;
+  --media-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
+
+  --media-tooltip-y-offset: 30px;
+  --media-menu-y-offset: 30px;
+
+  background-color: black;
+  border-radius: var(--media-border-radius);
+  color: #f5f5f5;
+  contain: layout;
+  font-family: sans-serif;
+  overflow: hidden;
+}
+
+.player[data-focus]:not([data-playing]) {
+  box-shadow: var(--media-focus-ring);
+}
+
+.player video {
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.player video,
+.poster {
+  border-radius: var(--media-border-radius);
+}
+
+.poster {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.poster[data-visible] {
+  opacity: 1;
+}
+
+.poster img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
diff --git a/components/watch/new-player/player.tsx b/components/watch/new-player/player.tsx
new file mode 100644
index 0000000..b98ff79
--- /dev/null
+++ b/components/watch/new-player/player.tsx
@@ -0,0 +1,471 @@
+import "@vidstack/react/player/styles/base.css";
+
+import { useEffect, useRef, useState } from "react";
+
+import style from "./player.module.css";
+
+import {
+  MediaPlayer,
+  MediaProvider,
+  useMediaStore,
+  useMediaRemote,
+  type MediaPlayerInstance,
+  Track,
+  MediaTimeUpdateEventDetail,
+  MediaTimeUpdateEvent,
+} from "@vidstack/react";
+import { VideoLayout } from "./components/layouts/video-layout";
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
+import { useRouter } from "next/router";
+import { Subtitle } from "types/episodes/TrackData";
+import useWatchStorage from "@/lib/hooks/useWatchStorage";
+import { Sessions } from "types/episodes/Sessions";
+import { useAniList } from "@/lib/anilist/useAnilist";
+
+export interface Navigation {
+  prev: Prev;
+  playing: Playing;
+  next: Next;
+}
+
+export interface Prev {
+  id: string;
+  title: string;
+  img: string;
+  number: number;
+  description: string;
+}
+
+export interface Playing {
+  id: string;
+  title: string;
+  description: string;
+  img: string;
+  number: number;
+}
+
+export interface Next {
+  id: string;
+  title: string;
+  description: string;
+  img: string;
+  number: number;
+}
+
+type VidStackProps = {
+  id: string;
+  navigation: Navigation;
+  userData: UserData;
+  sessions: Sessions;
+};
+
+export type UserData = {
+  id?: string;
+  userProfileId?: string;
+  aniId: string;
+  watchId: string;
+  title: string;
+  aniTitle: string;
+  image: string;
+  episode: number;
+  duration: number;
+  timeWatched: number;
+  provider: string;
+  nextId: string;
+  nextNumber: number;
+  dub: boolean;
+  createdAt: string;
+};
+
+type SkipData = {
+  startTime: number;
+  endTime: number;
+  text: string;
+};
+
+export default function VidStack({
+  id,
+  navigation,
+  userData,
+  sessions,
+}: VidStackProps) {
+  let player = useRef<MediaPlayerInstance>(null);
+
+  const {
+    aspectRatio,
+    setAspectRatio,
+    track,
+    playerState,
+    dataMedia,
+    autoNext,
+  } = useWatchProvider();
+
+  const { qualities, duration } = useMediaStore(player);
+
+  const [getSettings, updateSettings] = useWatchStorage();
+  const { marked, setMarked } = useWatchProvider();
+
+  const { markProgress } = useAniList(sessions);
+
+  const remote = useMediaRemote(player);
+
+  const { defaultQuality = null } = track ?? {};
+
+  const [chapters, setChapters] = useState<string>("");
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (qualities.length > 0) {
+      const sourceQuality = qualities.reduce(
+        (max, obj) => (obj.height > max.height ? obj : max),
+        qualities[0]
+      );
+      const aspectRatio = calculateAspectRatio(
+        sourceQuality.width,
+        sourceQuality.height
+      );
+
+      setAspectRatio(aspectRatio);
+    }
+  }, [qualities]);
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  let interval: any;
+
+  useEffect(() => {
+    const plyr = player.current;
+
+    function handlePlay() {
+      // console.log("Player is playing");
+      setIsPlaying(true);
+    }
+
+    function handlePause() {
+      // console.log("Player is paused");
+      setIsPlaying(false);
+    }
+
+    function handleEnd() {
+      // console.log("Player ended");
+      setIsPlaying(false);
+    }
+
+    plyr?.addEventListener("play", handlePlay);
+    plyr?.addEventListener("pause", handlePause);
+    plyr?.addEventListener("ended", handleEnd);
+
+    return () => {
+      plyr?.removeEventListener("play", handlePlay);
+      plyr?.removeEventListener("pause", handlePause);
+      plyr?.removeEventListener("ended", handleEnd);
+    };
+  }, [id, duration]);
+
+  useEffect(() => {
+    if (isPlaying) {
+      interval = setInterval(async () => {
+        const currentTime = player.current?.currentTime
+          ? Math.round(player.current?.currentTime)
+          : 0;
+
+        const parsedImage = navigation?.playing?.img?.includes("null")
+          ? dataMedia?.coverImage?.extraLarge
+          : navigation?.playing?.img;
+
+        if (sessions?.user?.name) {
+          // console.log("updating user data");
+          await fetch("/api/user/update/episode", {
+            method: "PUT",
+            body: JSON.stringify({
+              name: sessions?.user?.name,
+              id: String(dataMedia?.id),
+              watchId: navigation?.playing?.id,
+              title:
+                navigation.playing?.title ||
+                dataMedia.title?.romaji ||
+                dataMedia.title?.english,
+              aniTitle: dataMedia.title?.romaji || dataMedia.title?.english,
+              image: parsedImage,
+              number: Number(navigation.playing?.number),
+              duration: duration,
+              timeWatched: currentTime,
+              provider: track?.provider,
+              nextId: navigation?.next?.id,
+              nextNumber: Number(navigation?.next?.number),
+              dub: track?.isDub ? true : false,
+            }),
+          });
+        }
+
+        updateSettings(navigation?.playing?.id, {
+          aniId: String(dataMedia.id),
+          watchId: navigation?.playing?.id,
+          title:
+            navigation.playing?.title ||
+            dataMedia.title?.romaji ||
+            dataMedia.title?.english,
+          aniTitle: dataMedia.title?.romaji || dataMedia.title?.english,
+          image: parsedImage,
+          episode: Number(navigation.playing?.number),
+          duration: duration,
+          timeWatched: currentTime, // update timeWatched with currentTime
+          provider: track?.provider,
+          nextId: navigation?.next?.id,
+          nextNumber: navigation?.next?.number,
+          dub: track?.isDub ? true : false,
+          createdAt: new Date().toISOString(),
+        });
+        // console.log("update");
+      }, 5000);
+    } else {
+      clearInterval(interval);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isPlaying, sessions?.user?.name, track?.isDub, duration]);
+
+  useEffect(() => {
+    const autoplay = localStorage.getItem("autoplay") || "off";
+
+    return player.current!.subscribe(({ canPlay }) => {
+      // console.log("can play?", "->", canPlay);
+      if (canPlay) {
+        if (autoplay === "on") {
+          if (playerState?.currentTime === 0) {
+            remote.play();
+          } else {
+            if (playerState?.isPlaying) {
+              remote.play();
+            } else {
+              remote.pause();
+            }
+          }
+        } else {
+          if (playerState?.isPlaying) {
+            remote.play();
+          } else {
+            remote.pause();
+          }
+        }
+        remote.seek(playerState?.currentTime);
+      }
+    });
+  }, [playerState?.currentTime, playerState?.isPlaying]);
+
+  useEffect(() => {
+    const chapter = track?.skip,
+      videoDuration = Math.round(duration);
+
+    let vtt = "WEBVTT\n\n";
+
+    let lastEndTime = 0;
+
+    if (chapter && chapter?.length > 0) {
+      chapter.forEach((item: SkipData) => {
+        let startMinutes = Math.floor(item.startTime / 60);
+        let startSeconds = item.startTime % 60;
+        let endMinutes = Math.floor(item.endTime / 60);
+        let endSeconds = item.endTime % 60;
+
+        let start = `${startMinutes.toString().padStart(2, "0")}:${startSeconds
+          .toString()
+          .padStart(2, "0")}`;
+        let end = `${endMinutes.toString().padStart(2, "0")}:${endSeconds
+          .toString()
+          .padStart(2, "0")}`;
+
+        vtt += `${start} --> ${end}\n${item.text}\n\n`;
+        if (item.endTime > lastEndTime) {
+          lastEndTime = item.endTime;
+        }
+      });
+
+      if (lastEndTime < videoDuration) {
+        let startMinutes = Math.floor(lastEndTime / 60);
+        let startSeconds = lastEndTime % 60;
+        let endMinutes = Math.floor(videoDuration / 60);
+        let endSeconds = videoDuration % 60;
+
+        let start = `${startMinutes.toString().padStart(2, "0")}:${startSeconds
+          .toString()
+          .padStart(2, "0")}`;
+        let end = `${endMinutes.toString().padStart(2, "0")}:${endSeconds
+          .toString()
+          .padStart(2, "0")}`;
+
+        vtt += `${start} --> ${end}\n\n\n`;
+      }
+
+      const vttBlob = new Blob([vtt], { type: "text/vtt" });
+      const vttUrl = URL.createObjectURL(vttBlob);
+
+      setChapters(vttUrl);
+    }
+    return () => {
+      setChapters("");
+    };
+  }, [track?.skip, duration]);
+
+  useEffect(() => {
+    return () => {
+      if (player.current) {
+        player.current.destroy();
+      }
+    };
+  }, []);
+
+  function onEnded() {
+    if (!navigation?.next?.id) return;
+    if (autoNext === "on") {
+      const nextButton = document.querySelector(".next-button");
+
+      let timeoutId: ReturnType<typeof setTimeout>;
+
+      const stopTimeout = () => {
+        clearTimeout(timeoutId);
+        nextButton?.classList.remove("progress");
+      };
+
+      nextButton?.classList.remove("hidden");
+      nextButton?.classList.add("progress");
+
+      timeoutId = setTimeout(() => {
+        console.log("time is up!");
+        if (navigation?.next) {
+          router.push(
+            `/en/anime/watch/${dataMedia.id}/${track.provider}?id=${
+              navigation?.next?.id
+            }&num=${navigation?.next?.number}${
+              track?.isDub ? `&dub=${track?.isDub}` : ""
+            }`
+          );
+        }
+      }, 7000);
+
+      nextButton?.addEventListener("mouseover", stopTimeout);
+    }
+  }
+
+  function onLoadedMetadata() {
+    const seek: any = getSettings(navigation?.playing?.id);
+    if (playerState?.currentTime !== 0) return;
+    const seekTime = seek?.timeWatched;
+    const percentage = duration !== 0 ? seekTime / Math.round(duration) : 0;
+    const percentagedb =
+      duration !== 0 ? userData?.timeWatched / Math.round(duration) : 0;
+
+    if (percentage >= 0.9 || percentagedb >= 0.9) {
+      remote.seek(0);
+      console.log("Video started from the beginning");
+    } else if (userData?.timeWatched) {
+      remote.seek(userData?.timeWatched);
+    } else {
+      remote.seek(seekTime);
+    }
+  }
+
+  let mark = 0;
+  function onTimeUpdate(detail: MediaTimeUpdateEventDetail) {
+    if (sessions) {
+      let currentTime = detail.currentTime;
+      const percentage = currentTime / duration;
+
+      if (percentage >= 0.9) {
+        // use >= instead of >
+        if (mark < 1 && marked < 1) {
+          mark = 1;
+          setMarked(1);
+          console.log("marking progress");
+          markProgress(dataMedia.id, navigation.playing.number);
+        }
+      }
+    }
+
+    const opButton = document.querySelector(".op-button");
+    const edButton = document.querySelector(".ed-button");
+
+    const op: SkipData = track?.skip.find(
+        (item: SkipData) => item.text === "Opening"
+      ),
+      ed = track?.skip.find((item: SkipData) => item.text === "Ending");
+
+    if (
+      op &&
+      detail.currentTime > op.startTime &&
+      detail.currentTime < op.endTime
+    ) {
+      opButton?.classList.remove("hidden");
+    } else {
+      opButton?.classList.add("hidden");
+    }
+
+    if (
+      ed &&
+      detail.currentTime > ed.startTime &&
+      detail.currentTime < ed.endTime
+    ) {
+      edButton?.classList.remove("hidden");
+    } else {
+      edButton?.classList.add("hidden");
+    }
+  }
+
+  function onSeeked(currentTime: number) {
+    const nextButton = document.querySelector(".next-button");
+    // console.log({ currentTime, duration });
+    if (currentTime !== duration) {
+      nextButton?.classList.add("hidden");
+    }
+  }
+
+  return (
+    <MediaPlayer
+      key={id}
+      className={`${style.player} player`}
+      title={
+        navigation?.playing?.title ||
+        `Episode ${navigation?.playing?.number}` ||
+        "Loading..."
+      }
+      load="idle"
+      crossorigin="anonymous"
+      src={{
+        src: defaultQuality?.url,
+        type: "application/vnd.apple.mpegurl",
+      }}
+      onTimeUpdate={onTimeUpdate}
+      playsinline
+      aspectRatio={aspectRatio}
+      onEnd={onEnded}
+      onSeeked={onSeeked}
+      onLoadedMetadata={onLoadedMetadata}
+      ref={player}
+    >
+      <MediaProvider>
+        {track &&
+          track?.subtitles &&
+          track?.subtitles?.map((track: Subtitle) => (
+            <Track {...track} key={track.src} />
+          ))}
+        {chapters?.length > 0 && (
+          <Track key={chapters} src={chapters} kind="chapters" default={true} />
+        )}
+      </MediaProvider>
+      <VideoLayout thumbnails={track?.thumbnails} navigation={navigation} />
+    </MediaPlayer>
+  );
+}
+
+export function calculateAspectRatio(width: number, height: number) {
+  if (width === 0 && height === 0) {
+    return "16/9";
+  }
+
+  const gcd = (a: number, b: number): any => (b === 0 ? a : gcd(b, a % b));
+  const divisor = gcd(width, height);
+  const aspectRatio = `${width / divisor}/${height / divisor}`;
+  return aspectRatio;
+}
diff --git a/components/watch/new-player/tracks.tsx b/components/watch/new-player/tracks.tsx
new file mode 100644
index 0000000..abc1fb5
--- /dev/null
+++ b/components/watch/new-player/tracks.tsx
@@ -0,0 +1,184 @@
+export const textTracks = [
+  // Subtitles
+  // {
+  //   src: "https://media-files.vidstack.io/sprite-fight/subs/english.vtt",
+  //   label: "English",
+  //   language: "en-US",
+  //   kind: "subtitles",
+  //   default: true,
+  // },
+  // {
+  //   src: "https://media-files.vidstack.io/sprite-fight/subs/spanish.vtt",
+  //   label: "Spanish",
+  //   language: "es-ES",
+  //   kind: "subtitles",
+  // },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/ara-3.vtt",
+    label: "Arabic",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/chi-4.vtt",
+    label: "Chinese - Chinese Simplified",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/chi-5.vtt",
+    label: "Chinese - Chinese Traditional",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/hrv-6.vtt",
+    label: "Croatian",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/cze-7.vtt",
+    label: "Czech",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/dan-8.vtt",
+    label: "Danish",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/dut-9.vtt",
+    label: "Dutch",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/32/6d/326d5416033fe39a1540b11908f191fe/326d5416033fe39a1540b11908f191fe.vtt",
+    label: "English",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/fin-10.vtt",
+    label: "Finnish",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/fre-11.vtt",
+    label: "French",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/ger-12.vtt",
+    label: "German",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/gre-13.vtt",
+    label: "Greek",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/heb-14.vtt",
+    label: "Hebrew",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/hun-15.vtt",
+    label: "Hungarian",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/ind-16.vtt",
+    label: "Indonesian",
+    kind: "subtitles",
+    default: true,
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/ita-17.vtt",
+    label: "Italian",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/jpn-18.vtt",
+    label: "Japanese",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/kor-19.vtt",
+    label: "Korean",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/may-20.vtt",
+    label: "Malay",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/nob-21.vtt",
+    label: "Norwegian Bokmål - Norwegian Bokmal",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/pol-22.vtt",
+    label: "Polish",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/por-23.vtt",
+    label: "Portuguese",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/por-24.vtt",
+    label: "Portuguese - Brazilian Portuguese",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/rum-25.vtt",
+    label: "Romanian",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/rus-26.vtt",
+    label: "Russian",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/spa-27.vtt",
+    label: "Spanish",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/spa-28.vtt",
+    label: "Spanish - European Spanish",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/swe-29.vtt",
+    label: "Swedish",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/tha-30.vtt",
+    label: "Thai",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/tur-31.vtt",
+    label: "Turkish",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/ukr-32.vtt",
+    label: "Ukrainian",
+    kind: "subtitles",
+  },
+  {
+    src: "https://ccb.megaresources.co/3c/0f/3c0fbf6aafc60b02d3be402099638403/vie-33.vtt",
+    label: "Vietnamese",
+    kind: "subtitles",
+  },
+  // // Chapters
+  // {
+  //   src: "https://media-files.vidstack.io/sprite-fight/chapters.vtt",
+  //   kind: "chapters",
+  //   language: "en-US",
+  //   default: true,
+  // },
+] as const;
diff --git a/components/watch/player/artplayer.js b/components/watch/player/artplayer.js
deleted file mode 100644
index 666c103..0000000
--- a/components/watch/player/artplayer.js
+++ /dev/null
@@ -1,387 +0,0 @@
-import { useEffect, useRef } from "react";
-import Artplayer from "artplayer";
-import Hls from "hls.js";
-import { useWatchProvider } from "@/lib/context/watchPageProvider";
-import artplayerPluginHlsQuality from "artplayer-plugin-hls-quality";
-
-export default function NewPlayer({
-  playerRef,
-  option,
-  getInstance,
-  provider,
-  track,
-  defSub,
-  defSize,
-  subtitles,
-  subSize,
-  res,
-  quality,
-  ...rest
-}) {
-  const artRef = useRef(null);
-  const { setTheaterMode, setPlayerState, setAutoPlay } = useWatchProvider();
-
-  function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-      if (art.hls) art.hls.destroy();
-      const hls = new Hls();
-      hls.loadSource(url);
-      hls.attachMedia(video);
-      art.hls = hls;
-      art.on("destroy", () => hls.destroy());
-    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
-      video.src = url;
-    } else {
-      art.notice.show = "Unsupported playback format: m3u8";
-    }
-  }
-
-  useEffect(() => {
-    Artplayer.PLAYBACK_RATE = [0.5, 0.75, 1, 1.15, 1.2, 1.5, 1.7, 2];
-
-    const art = new Artplayer({
-      ...option,
-      container: artRef.current,
-      type: "m3u8",
-      customType: {
-        m3u8: playM3u8,
-      },
-      ...(subtitles?.length > 0 && {
-        subtitle: {
-          url: `${defSub}`,
-          // type: "vtt",
-          encoding: "utf-8",
-          default: true,
-          name: "English",
-          escape: false,
-          style: {
-            color: "#FFFF",
-            fontSize: `${defSize?.size}`,
-            fontFamily: localStorage.getItem("font")
-              ? localStorage.getItem("font")
-              : "Arial",
-            textShadow: localStorage.getItem("subShadow")
-              ? JSON.parse(localStorage.getItem("subShadow")).value
-              : "0px 0px 10px #000000",
-          },
-        },
-      }),
-
-      plugins: [
-        artplayerPluginHlsQuality({
-          // Show quality in setting
-          setting: true,
-
-          // Get the resolution text from level
-          getResolution: (level) => level.height + "P",
-
-          // I18n
-          title: "Quality",
-          auto: "Auto",
-        }),
-      ],
-
-      settings: [
-        // provider === "gogoanime" &&
-        {
-          html: "Autoplay Next",
-          icon: '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.05 16.975q-.5.35-1.025.05t-.525-.9v-8.25q0-.6.525-.888t1.025.038l6.2 4.15q.45.3.45.825t-.45.825l-6.2 4.15Zm10 0q-.5.35-1.025.05t-.525-.9v-8.25q0-.6.525-.888t1.025.038l6.2 4.15q.45.3.45.825t-.45.825l-6.2 4.15Z"></path></svg>',
-          tooltip: "ON/OFF",
-          switch: localStorage.getItem("autoplay") === "true" ? true : false,
-          onSwitch: function (item) {
-            // setPlayNext(!item.switch);
-            localStorage.setItem("autoplay", !item.switch);
-            return !item.switch;
-          },
-        },
-        {
-          html: "Autoplay Video",
-          icon: '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.05 16.975q-.5.35-1.025.05t-.525-.9v-8.25q0-.6.525-.888t1.025.038l6.2 4.15q.45.3.45.825t-.45.825l-6.2 4.15Zm10 0q-.5.35-1.025.05t-.525-.9v-8.25q0-.6.525-.888t1.025.038l6.2 4.15q.45.3.45.825t-.45.825l-6.2 4.15Z"></path></svg>',
-          // icon: '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12L5.59 7.41m6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12l-4.58-4.59Z"></path></svg>',
-          tooltip: "ON/OFF",
-          switch:
-            localStorage.getItem("autoplay_video") === "true" ? true : false,
-          onSwitch: function (item) {
-            setAutoPlay(!item.switch);
-            localStorage.setItem("autoplay_video", !item.switch);
-            return !item.switch;
-          },
-        },
-        {
-          html: "Alternative Quality",
-          width: 250,
-          tooltip: `${res}`,
-          selector: quality?.alt,
-          icon: '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 512 512"><path fill="currentColor" d="M381.25 112a48 48 0 0 0-90.5 0H48v32h242.75a48 48 0 0 0 90.5 0H464v-32ZM176 208a48.09 48.09 0 0 0-45.25 32H48v32h82.75a48 48 0 0 0 90.5 0H464v-32H221.25A48.09 48.09 0 0 0 176 208Zm160 128a48.09 48.09 0 0 0-45.25 32H48v32h242.75a48 48 0 0 0 90.5 0H464v-32h-82.75A48.09 48.09 0 0 0 336 336Z"></path></svg>',
-          onSelect: function (item) {
-            art.switchQuality(item.url, item.html);
-            localStorage.setItem("quality", item.html);
-            return item.html;
-          },
-        },
-        {
-          html: "Server",
-          width: 250,
-          tooltip: `${quality?.server[0].html}`,
-          icon: '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 32 32"><path fill="currentColor" d="m24.6 24.4l2.6 2.6l-2.6 2.6L26 31l4-4l-4-4zm-2.2 0L19.8 27l2.6 2.6L21 31l-4-4l4-4z"></path><circle cx="11" cy="8" r="1" fill="currentColor"></circle><circle cx="11" cy="16" r="1" fill="currentColor"></circle><circle cx="11" cy="24" r="1" fill="currentColor"></circle><path fill="currentColor" d="M24 3H8c-1.1 0-2 .9-2 2v22c0 1.1.9 2 2 2h7v-2H8v-6h18V5c0-1.1-.9-2-2-2zm0 16H8v-6h16v6zm0-8H8V5h16v6z"></path></svg>',
-          selector: quality?.server,
-          onSelect: function (item) {
-            art.switchQuality(item.url, item.html);
-            localStorage.setItem("quality", item.html);
-            return item.html;
-          },
-        },
-        subtitles?.length > 0 && {
-          html: "Subtitles",
-          icon: '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.588 1.413T20 20H4Zm2-4h8v-2H6v2Zm10 0h2v-2h-2v2ZM6 12h2v-2H6v2Zm4 0h8v-2h-8v2Z"></path></svg>',
-          width: 300,
-          tooltip: "Settings",
-          selector: [
-            {
-              html: "Display",
-              icon: '<svg xmlns="http://www.w3.org/2000/svg" width="35" height="26" viewBox="0 -960 960 960"><path d="M480.169-341.796q65.754 0 111.894-46.31 46.141-46.309 46.141-112.063t-46.31-111.894q-46.309-46.141-112.063-46.141t-111.894 46.31q-46.141 46.309-46.141 112.063t46.31 111.894q46.309 46.141 112.063 46.141zm-.371-48.307q-45.875 0-77.785-32.112-31.91-32.112-31.91-77.987 0-45.875 32.112-77.785 32.112-31.91 77.987-31.91 45.875 0 77.785 32.112 31.91 32.112 31.91 77.987 0 45.875-32.112 77.785-32.112 31.91-77.987 31.91zm.226 170.102q-130.921 0-239.6-69.821-108.679-69.82-167.556-186.476-2.687-4.574-3.892-10.811Q67.77-493.347 67.77-500t1.205-12.891q1.205-6.237 3.892-10.811Q131.745-640.358 240.4-710.178q108.655-69.821 239.576-69.821t239.6 69.821q108.679 69.82 167.556 186.476 2.687 4.574 3.892 10.811 1.205 6.238 1.205 12.891t-1.205 12.891q-1.205 6.237-3.892 10.811Q828.255-359.642 719.6-289.822q-108.655 69.821-239.576 69.821zM480-500zm-.112 229.744q117.163 0 215.048-62.347Q792.821-394.949 844.308-500q-51.487-105.051-149.26-167.397-97.772-62.347-214.936-62.347-117.163 0-215.048 62.347Q167.179-605.051 115.282-500q51.897 105.051 149.67 167.397 97.772 62.347 214.936 62.347z"></path></svg>',
-              tooltip: "Show",
-              switch: true,
-              onSwitch: function (item) {
-                item.tooltip = item.switch ? "Hide" : "Show";
-                art.subtitle.show = !item.switch;
-                return !item.switch;
-              },
-            },
-            {
-              html: "Font Size",
-              icon: '<svg xmlns="http://www.w3.org/2000/svg" width="35" height="26" viewBox="0 -960 960 960"><path d="M619.861-177.694q-15.655 0-26.475-10.918-10.821-10.918-10.821-26.516v-492.309H415.128q-15.598 0-26.516-10.959-10.918-10.959-10.918-26.615 0-15.655 10.918-26.475 10.918-10.82 26.516-10.82h409.744q15.598 0 26.516 10.958 10.918 10.959 10.918 26.615 0 15.656-10.918 26.476-10.918 10.82-26.516 10.82H657.435v492.309q0 15.598-10.959 26.516-10.959 10.918-26.615 10.918zm-360 0q-15.655 0-26.475-10.918-10.821-10.918-10.821-26.516v-292.309h-87.437q-15.598 0-26.516-10.959-10.918-10.959-10.918-26.615 0-15.655 10.918-26.475 10.918-10.82 26.516-10.82h249.744q15.598 0 26.516 10.958 10.918 10.959 10.918 26.615 0 15.656-10.918 26.476-10.918 10.82-26.516 10.82h-87.437v292.309q0 15.598-10.959 26.516-10.959 10.918-26.615 10.918z"></path></svg>',
-              selector: subSize,
-              onSelect: function (item) {
-                if (item.html === "Small") {
-                  art.subtitle.style({ fontSize: "16px" });
-                  localStorage.setItem(
-                    "subSize",
-                    JSON.stringify({
-                      size: "16px",
-                      html: "Small",
-                    })
-                  );
-                } else if (item.html === "Medium") {
-                  art.subtitle.style({ fontSize: "36px" });
-                  localStorage.setItem(
-                    "subSize",
-                    JSON.stringify({
-                      size: "36px",
-                      html: "Medium",
-                    })
-                  );
-                } else if (item.html === "Large") {
-                  art.subtitle.style({ fontSize: "56px" });
-                  localStorage.setItem(
-                    "subSize",
-                    JSON.stringify({
-                      size: "56px",
-                      html: "Large",
-                    })
-                  );
-                }
-              },
-            },
-            {
-              html: "Language",
-              icon: '<svg xmlns="http://www.w3.org/2000/svg" width="35" height="26" viewBox="0 -960 960 960"><path d="M528.282-110.771q-21.744 0-31.308-14.013t-2.205-34.295l135.952-359.307q5.304-14.793 20.292-25.126 14.988-10.334 31.152-10.334 15.398 0 30.85 10.388 15.451 10.387 20.932 25.125l137.128 357.485q8.025 20.949-1.83 35.513-9.855 14.564-33.24 14.564-10.366 0-19.392-6.616-9.025-6.615-12.72-16.242l-30.997-91.808H594.769l-33.381 91.869q-3.645 9.181-13.148 15.989-9.504 6.808-19.958 6.808zm87.871-179.281h131.64l-64.615-180.717h-2.41l-64.615 180.717zM302.104-608.384q14.406 25.624 31.074 48.184 16.669 22.559 37.643 47.021 41.333-44.128 68.628-90.461t46.038-97.897H111.499q-15.674 0-26.278-10.615-10.603-10.616-10.603-26.308t10.615-26.307q10.616-10.616 26.308-10.616h221.537v-36.923q0-15.692 10.615-26.307 10.616-10.616 26.308-10.616t26.307 10.616q10.616 10.615 10.616 26.307v36.923h221.537q15.692 0 26.307 10.616 10.616 10.615 10.616 26.307 0 15.692-10.616 26.308-10.615 10.615-26.307 10.615h-69.088q-19.912 64.153-53.237 125.74-33.325 61.588-82.341 116.412l89.384 90.974-27.692 75.179-115.486-112.922-158.948 158.947q-10.615 10.616-25.667 10.616-15.051 0-25.666-11.026-11.026-10.615-11.026-25.666 0-15.052 11.026-26.077l161.614-161.358q-24.666-28.308-45.551-57.307-20.884-29-37.756-60.103-10.641-19.871-1.346-34.717t33.038-14.846q9.088 0 18.429 5.73 9.34 5.731 13.956 13.577z"></path></svg>',
-              tooltip: "English",
-              selector: [...subtitles],
-              onSelect: function (item) {
-                art.subtitle.switch(item.url, {
-                  name: item.html,
-                });
-                return item.html;
-              },
-            },
-            {
-              html: "Font Family",
-              tooltip: localStorage.getItem("font")
-                ? localStorage.getItem("font")
-                : "Arial",
-              selector: [
-                { html: "Arial" },
-                { html: "Comic Sans MS" },
-                { html: "Verdana" },
-                { html: "Tahoma" },
-                { html: "Trebuchet MS" },
-                { html: "Times New Roman" },
-                { html: "Georgia" },
-                { html: "Impact " },
-                { html: "Andalé Mono" },
-                { html: "Palatino" },
-                { html: "Baskerville" },
-                { html: "Garamond" },
-                { html: "Courier New" },
-                { html: "Brush Script MT" },
-              ],
-              onSelect: function (item) {
-                art.subtitle.style({ fontFamily: item.html });
-                localStorage.setItem("font", item.html);
-                return item.html;
-              },
-            },
-            {
-              html: "Font Shadow",
-              tooltip: localStorage.getItem("subShadow")
-                ? JSON.parse(localStorage.getItem("subShadow")).shadow
-                : "Default",
-              selector: [
-                { html: "None", value: "none" },
-                {
-                  html: "Uniform",
-                  value:
-                    "2px 2px 0px  #000, -2px -2px 0px  #000, 2px -2px 0px  #000, -2px 2px 0px  #000",
-                },
-                { html: "Raised", value: "-1px 2px 3px rgba(0, 0, 0, 1)" },
-                { html: "Depressed", value: "-2px -3px 3px rgba(0, 0, 0, 1)" },
-                { html: "Glow", value: "0 0 10px rgba(0, 0, 0, 0.8)" },
-                {
-                  html: "Block",
-                  value:
-                    "-3px 3px 4px rgba(0, 0, 0, 1),2px 2px 4px rgba(0, 0, 0, 1),1px -1px 3px rgba(0, 0, 0, 1),-3px -2px 4px rgba(0, 0, 0, 1)",
-                },
-              ],
-              onSelect: function (item) {
-                art.subtitle.style({ textShadow: item.value });
-                localStorage.setItem(
-                  "subShadow",
-                  JSON.stringify({ shadow: item.html, value: item.value })
-                );
-                return item.html;
-              },
-            },
-          ],
-        },
-      ].filter(Boolean),
-      controls: [
-        {
-          name: "theater-button",
-          index: 11,
-          position: "right",
-          tooltip: "Theater (t)",
-          html: '<i class="theater"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M19 3H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 12H2V5h16v10z"></path></svg></i>',
-          click: function (...args) {
-            setPlayerState((prev) => ({
-              ...prev,
-              currentTime: art.currentTime,
-              isPlaying: art.playing,
-            }));
-            setTheaterMode((prev) => !prev);
-          },
-        },
-        {
-          index: 10,
-          name: "fast-rewind",
-          position: "left",
-          html: '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M17.959 4.571L10.756 9.52s-.279.201-.279.481s.279.479.279.479l7.203 4.951c.572.38 1.041.099 1.041-.626V5.196c0-.727-.469-1.008-1.041-.625zm-9.076 0L1.68 9.52s-.279.201-.279.481s.279.479.279.479l7.203 4.951c.572.381 1.041.1 1.041-.625v-9.61c0-.727-.469-1.008-1.041-.625z"></path></svg>',
-          tooltip: "Backward 5s",
-          click: function () {
-            art.backward = 5;
-          },
-        },
-        {
-          index: 11,
-          name: "fast-forward",
-          position: "left",
-          html: '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M9.244 9.52L2.041 4.571C1.469 4.188 1 4.469 1 5.196v9.609c0 .725.469 1.006 1.041.625l7.203-4.951s.279-.199.279-.478c0-.28-.279-.481-.279-.481zm9.356.481c0 .279-.279.478-.279.478l-7.203 4.951c-.572.381-1.041.1-1.041-.625V5.196c0-.727.469-1.008 1.041-.625L18.32 9.52s.28.201.28.481z"></path></svg>',
-          tooltip: "Forward 5s",
-          click: function () {
-            art.forward = 5;
-          },
-        },
-      ],
-    });
-
-    if ("mediaSession" in navigator) {
-      art.on("video:timeupdate", () => {
-        const session = navigator.mediaSession;
-        if (!session) return;
-        session.setPositionState({
-          duration: art.duration,
-          playbackRate: art.playbackRate,
-          position: art.currentTime,
-        });
-      });
-
-      navigator.mediaSession.setActionHandler("play", () => {
-        art.play();
-      });
-
-      navigator.mediaSession.setActionHandler("pause", () => {
-        art.pause();
-      });
-
-      navigator.mediaSession.setActionHandler("previoustrack", () => {
-        if (track?.prev) {
-          router.push(
-            `/en/anime/watch/${id}/${provider}?id=${encodeURIComponent(
-              track?.prev?.id
-            )}&num=${track?.prev?.number}`
-          );
-        }
-      });
-
-      navigator.mediaSession.setActionHandler("nexttrack", () => {
-        if (track?.next) {
-          router.push(
-            `/en/anime/watch/${id}/${provider}?id=${encodeURIComponent(
-              track?.next?.id
-            )}&num=${track?.next?.number}`
-          );
-        }
-      });
-    }
-
-    playerRef.current = art;
-
-    art.events.proxy(document, "keydown", (event) => {
-      // Check if the focus is on an input field or textarea
-      const isInputFocused =
-        document.activeElement.tagName === "INPUT" ||
-        document.activeElement.tagName === "TEXTAREA";
-
-      if (!isInputFocused) {
-        if (event.key === "f" || event.key === "F") {
-          art.fullscreen = !art.fullscreen;
-        }
-
-        if (event.key === "t" || event.key === "T") {
-          setPlayerState((prev) => ({
-            ...prev,
-            currentTime: art.currentTime,
-            isPlaying: art.playing,
-          }));
-          setTheaterMode((prev) => !prev);
-        }
-      }
-    });
-
-    art.events.proxy(document, "keypress", (event) => {
-      // Check if the focus is on an input field or textarea
-      const isInputFocused =
-        document.activeElement.tagName === "INPUT" ||
-        document.activeElement.tagName === "TEXTAREA";
-
-      if (!isInputFocused && event.code === "Space") {
-        event.preventDefault();
-        art.playing ? art.pause() : art.play();
-      }
-    });
-
-    if (getInstance && typeof getInstance === "function") {
-      getInstance(art);
-    }
-
-    return () => {
-      if (art && art.destroy) {
-        art.destroy(false);
-      }
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <div ref={artRef} {...rest}></div>;
-}
diff --git a/components/watch/player/component/controls/quality.js b/components/watch/player/component/controls/quality.js
deleted file mode 100644
index 08dbd0e..0000000
--- a/components/watch/player/component/controls/quality.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import artplayerPluginHlsQuality from "artplayer-plugin-hls-quality";
-
-export const QualityPlugins = [
-  artplayerPluginHlsQuality({
-    // Show quality in setting
-    setting: true,
-
-    // Get the resolution text from level
-    getResolution: (level) => level.height + "P",
-
-    // I18n
-    title: "Quality",
-    auto: "Auto",
-  }),
-];
diff --git a/components/watch/player/component/overlay.js b/components/watch/player/component/overlay.js
deleted file mode 100644
index 1d5ac27..0000000
--- a/components/watch/player/component/overlay.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * @type {import("artplayer/types/icons".Icons)}
- */
-export const icons = {
-  screenshot:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 20 20"><path fill="currentColor" d="M10 8a3 3 0 1 0 0 6a3 3 0 0 0 0-6zm8-3h-2.4a.888.888 0 0 1-.789-.57l-.621-1.861A.89.89 0 0 0 13.4 2H6.6c-.33 0-.686.256-.789.568L5.189 4.43A.889.889 0 0 1 4.4 5H2C.9 5 0 5.9 0 7v9c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 11a5 5 0 0 1-5-5a5 5 0 1 1 10 0a5 5 0 0 1-5 5zm7.5-7.8a.7.7 0 1 1 0-1.4a.7.7 0 0 1 0 1.4z"></path></svg>',
-  play: '<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 20 20"><path fill="currentColor" d="M15 10.001c0 .299-.305.514-.305.514l-8.561 5.303C5.51 16.227 5 15.924 5 15.149V4.852c0-.777.51-1.078 1.135-.67l8.561 5.305c-.001 0 .304.215.304.514z"></path></svg>',
-  pause:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 20 20"><path fill="currentColor" d="M15 3h-2c-.553 0-1 .048-1 .6v12.8c0 .552.447.6 1 .6h2c.553 0 1-.048 1-.6V3.6c0-.552-.447-.6-1-.6zM7 3H5c-.553 0-1 .048-1 .6v12.8c0 .552.447.6 1 .6h2c.553 0 1-.048 1-.6V3.6c0-.552-.447-.6-1-.6z"></path></svg>',
-  volume:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M19 13.805c0 .657-.538 1.195-1.195 1.195H1.533c-.88 0-.982-.371-.229-.822l16.323-9.055C18.382 4.67 19 5.019 19 5.9v7.905z"></path></svg>',
-  fullscreenOff:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L5.44 6.5H2.75a.75.75 0 0 0 0 1.5h4.5A.75.75 0 0 0 8 7.25v-4.5a.75.75 0 0 0-1.5 0v2.69L3.28 2.22Zm10.22.53a.75.75 0 0 0-1.5 0v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22a.75.75 0 0 0-1.06-1.06L13.5 5.44V2.75ZM3.28 17.78l3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 1 0 1.06 1.06Zm10.22-3.22l3.22 3.22a.75.75 0 1 0 1.06-1.06l-3.22-3.22h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0v-2.69Z"></path></svg>',
-  fullscreenOn:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="m13.28 7.78l3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75Zm10.22-3.97l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"></path></svg>',
-};
-
-export const backButton = {
-  name: "back-button",
-  index: 10,
-  position: "top",
-  html: "<div class='parent-player-title'><div></div><div className='flex gap-2'><p className='pt-1'><ChevronLeftIcon className='w-7 h-7'/></p><div class='flex flex-col text-white'><p className='font-outfit font-bold text-2xl'>Komi-san wa, Komyushou desu.</p><p className=''>Episode 1</p></div></div></div>",
-  //   tooltip: "Your Button",
-  click: function (...args) {
-    console.info("click", args);
-  },
-  mounted: function (...args) {
-    console.info("mounted", args);
-  },
-};
-
-export const seekBackward = {
-  index: 10,
-  name: "fast-rewind",
-  position: "left",
-  html: '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M17.959 4.571L10.756 9.52s-.279.201-.279.481s.279.479.279.479l7.203 4.951c.572.38 1.041.099 1.041-.626V5.196c0-.727-.469-1.008-1.041-.625zm-9.076 0L1.68 9.52s-.279.201-.279.481s.279.479.279.479l7.203 4.951c.572.381 1.041.1 1.041-.625v-9.61c0-.727-.469-1.008-1.041-.625z"></path></svg>',
-  tooltip: "Backward 5s",
-  click: function () {
-    art.backward = 5;
-  },
-};
-
-export const seekForward = {
-  index: 11,
-  name: "fast-forward",
-  position: "left",
-  html: '<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M9.244 9.52L2.041 4.571C1.469 4.188 1 4.469 1 5.196v9.609c0 .725.469 1.006 1.041.625l7.203-4.951s.279-.199.279-.478c0-.28-.279-.481-.279-.481zm9.356.481c0 .279-.279.478-.279.478l-7.203 4.951c-.572.381-1.041.1-1.041-.625V5.196c0-.727.469-1.008 1.041-.625L18.32 9.52s.28.201.28.481z"></path></svg>',
-  tooltip: "Forward 5s",
-  click: function () {
-    art.forward = 5;
-  },
-};
-
-// /**
-//  * @type {import("artplayer/types/component").ComponentOption}
-//  */
-// export const
diff --git a/components/watch/player/playerComponent.js b/components/watch/player/playerComponent.js
deleted file mode 100644
index 665919b..0000000
--- a/components/watch/player/playerComponent.js
+++ /dev/null
@@ -1,527 +0,0 @@
-import React, { useEffect, useState } from "react";
-import NewPlayer from "./artplayer";
-import { icons } from "./component/overlay";
-import { useWatchProvider } from "@/lib/context/watchPageProvider";
-import { useRouter } from "next/router";
-import { useAniList } from "@/lib/anilist/useAnilist";
-import Loading from "@/components/shared/loading";
-
-export function calculateAspectRatio(width, height) {
-  const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
-  const divisor = gcd(width, height);
-  const aspectRatio = `${width / divisor}/${height / divisor}`;
-  return aspectRatio;
-}
-
-const fontSize = [
-  {
-    html: "Small",
-    size: "16px",
-  },
-  {
-    html: "Medium",
-    size: "36px",
-  },
-  {
-    html: "Large",
-    size: "56px",
-  },
-];
-
-export default function PlayerComponent({
-  playerRef,
-  session,
-  id,
-  info,
-  watchId,
-  proxy,
-  dub,
-  timeWatched,
-  skip,
-  track,
-  data,
-  provider,
-  className,
-}) {
-  const {
-    aspectRatio,
-    setAspectRatio,
-    playerState,
-    setPlayerState,
-    autoplay,
-    marked,
-    setMarked,
-  } = useWatchProvider();
-
-  const router = useRouter();
-
-  const { markProgress } = useAniList(session);
-
-  const [url, setUrl] = useState("");
-  const [resolution, setResolution] = useState("auto");
-  const [source, setSource] = useState([]);
-  const [subSize, setSubSize] = useState({ size: "16px", html: "Small" });
-  const [defSize, setDefSize] = useState();
-  const [subtitle, setSubtitle] = useState();
-  const [defSub, setDefSub] = useState();
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-
-  useEffect(() => {
-    setLoading(true);
-    const resol = localStorage.getItem("quality");
-    const sub = JSON.parse(localStorage.getItem("subSize"));
-    if (resol) {
-      setResolution(resol);
-    }
-
-    const size = fontSize.map((i) => {
-      const isDefault = !sub ? i.html === "Small" : i.html === sub?.html;
-      return {
-        ...(isDefault && { default: true }),
-        html: i.html,
-        size: i.size,
-      };
-    });
-
-    const defSize = size?.find((i) => i?.default === true);
-    setDefSize(defSize);
-    setSubSize(size);
-
-    async function compiler() {
-      try {
-        const referer = JSON.stringify(data?.headers);
-        const source = data?.sources?.map((items) => {
-          const isDefault =
-            provider !== "gogoanime"
-              ? items.quality === "default" || items.quality === "auto"
-              : resolution === "auto"
-              ? items.quality === "default" || items.quality === "auto"
-              : items.quality === resolution;
-          return {
-            ...(isDefault && { default: true }),
-            html: items.quality === "default" ? "main" : items.quality,
-            url: `${proxy}/proxy/m3u8/${encodeURIComponent(
-              String(items.url)
-            )}/${encodeURIComponent(String(referer))}`,
-          };
-        });
-
-        const defSource = source?.find((i) => i?.default === true);
-
-        if (defSource) {
-          setUrl(defSource.url);
-        }
-
-        const subtitle = data?.subtitles
-          ?.filter(
-            (subtitle) =>
-              subtitle.lang !== "Thumbnails" && subtitle.lang !== "thumbnails"
-          )
-          ?.map((subtitle) => {
-            const isEnglish =
-              subtitle.lang === "English" ||
-              subtitle.lang === "English / English (US)";
-            return {
-              ...(isEnglish && { default: true }),
-              url: subtitle.url,
-              html: `${subtitle.lang}`,
-            };
-          });
-
-        if (subtitle) {
-          const defSub = data?.subtitles.find(
-            (i) => i.lang === "English" || i.lang === "English / English (US)"
-          );
-
-          setDefSub(defSub?.url);
-
-          setSubtitle(subtitle);
-        }
-
-        const alt = source?.filter(
-          (i) =>
-            i?.html !== "main" &&
-            i?.html !== "auto" &&
-            i?.html !== "default" &&
-            i?.html !== "backup"
-        );
-        const server = source?.filter(
-          (i) =>
-            i?.html === "main" ||
-            i?.html === "auto" ||
-            i?.html === "default" ||
-            i?.html === "backup"
-        );
-
-        setSource({ alt, server });
-        setLoading(false);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-    compiler();
-
-    return () => {
-      setUrl("");
-      setSource([]);
-      setSubtitle([]);
-      setLoading(true);
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [provider, data]);
-
-  /**
-   * @param {import("artplayer")} art
-   */
-  function getInstance(art) {
-    art.on("ready", () => {
-      const autoplay = localStorage.getItem("autoplay_video") || false;
-
-      // check media queries for mobile devices
-      const isMobile = window.matchMedia("(max-width: 768px)").matches;
-
-      // console.log(art.fullscreen);
-
-      if (isMobile) {
-        art.controls.remove("theater-button");
-        // art.controls.remove("fast-rewind");
-        // art.controls.remove("fast-forward");
-      }
-
-      if (autoplay === "true" || autoplay === true) {
-        if (playerState.currentTime === 0) {
-          art.play();
-        } else {
-          if (playerState.isPlaying) {
-            art.play();
-          } else {
-            art.pause();
-          }
-        }
-      } else {
-        if (playerState.isPlaying) {
-          art.play();
-        } else {
-          art.pause();
-        }
-      }
-      art.seek = playerState.currentTime;
-    });
-
-    art.on("ready", () => {
-      if (playerState.currentTime !== 0) return;
-      const seek = art.storage.get(id);
-      const seekTime = seek?.timeWatched || 0;
-      const duration = art.duration;
-      const percentage = seekTime / duration;
-      const percentagedb = timeWatched / duration;
-
-      if (subSize) {
-        art.subtitle.style.fontSize = subSize?.size;
-      }
-
-      if (percentage >= 0.9 || percentagedb >= 0.9) {
-        art.currentTime = 0;
-        console.log("Video started from the beginning");
-      } else if (timeWatched) {
-        art.currentTime = timeWatched;
-      } else {
-        art.currentTime = seekTime;
-      }
-    });
-
-    art.on("error", (error, reconnectTime) => {
-      if (error && reconnectTime >= 5) {
-        setError(true);
-        console.error("Error while loading video:", error);
-      }
-    });
-
-    art.on("play", () => {
-      art.notice.show = "";
-      setPlayerState({ ...playerState, isPlaying: true });
-    });
-    art.on("pause", () => {
-      art.notice.show = "";
-      setPlayerState({ ...playerState, isPlaying: false });
-    });
-
-    art.on("resize", () => {
-      art.subtitle.style({
-        fontSize: art.height * 0.05 + "px",
-      });
-    });
-
-    let mark = 0;
-
-    art.on("video:timeupdate", async () => {
-      if (!session) return;
-
-      var currentTime = art.currentTime;
-      const duration = art.duration;
-      const percentage = currentTime / duration;
-
-      if (percentage >= 0.9) {
-        // use >= instead of >
-        if (mark < 1 && marked < 1) {
-          mark = 1;
-          setMarked(1);
-          markProgress(info.id, track.playing.number);
-        }
-      }
-    });
-
-    art.on("video:playing", () => {
-      if (!session) return;
-      const intervalId = setInterval(async () => {
-        await fetch("/api/user/update/episode", {
-          method: "PUT",
-          body: JSON.stringify({
-            name: session?.user?.name,
-            id: String(info?.id),
-            watchId: watchId,
-            title:
-              track.playing?.title || info.title?.romaji || info.title?.english,
-            aniTitle: info.title?.romaji || info.title?.english,
-            image: track.playing?.img || info?.coverImage?.extraLarge,
-            number: Number(track.playing?.number),
-            duration: art.duration,
-            timeWatched: art.currentTime,
-            provider: provider,
-            nextId: track.next?.id,
-            nextNumber: Number(track.next?.number),
-            dub: dub ? true : false,
-          }),
-        });
-        // console.log("updating db", { track });
-      }, 5000);
-
-      art.on("video:pause", () => {
-        clearInterval(intervalId);
-      });
-
-      art.on("video:ended", () => {
-        clearInterval(intervalId);
-      });
-
-      art.on("destroy", () => {
-        clearInterval(intervalId);
-        // console.log("clearing interval");
-      });
-    });
-
-    art.on("video:playing", () => {
-      const interval = setInterval(async () => {
-        art.storage.set(watchId, {
-          aniId: String(info.id),
-          watchId: watchId,
-          title:
-            track.playing?.title || info.title?.romaji || info.title?.english,
-          aniTitle: info.title?.romaji || info.title?.english,
-          image: track?.playing?.img || info?.coverImage?.extraLarge,
-          episode: Number(track.playing?.number),
-          duration: art.duration,
-          timeWatched: art.currentTime,
-          provider: provider,
-          nextId: track?.next?.id,
-          nextNumber: track?.next?.number,
-          dub: dub ? true : false,
-          createdAt: new Date().toISOString(),
-        });
-      }, 5000);
-
-      art.on("video:pause", () => {
-        clearInterval(interval);
-      });
-
-      art.on("video:ended", () => {
-        clearInterval(interval);
-      });
-
-      art.on("destroy", () => {
-        clearInterval(interval);
-      });
-    });
-
-    art.on("video:loadedmetadata", () => {
-      // get raw video width and height
-      // console.log(art.video.videoWidth, art.video.videoHeight);
-      const aspect = calculateAspectRatio(
-        art.video.videoWidth,
-        art.video.videoHeight
-      );
-
-      setAspectRatio(aspect);
-    });
-
-    art.on("video:timeupdate", () => {
-      var currentTime = art.currentTime;
-      // console.log(art.currentTime);
-
-      if (
-        skip?.op &&
-        currentTime >= skip.op.interval.startTime &&
-        currentTime <= skip.op.interval.endTime
-      ) {
-        // Add the layer if it's not already added
-        if (!art.controls["op"]) {
-          // Remove the other control if it's already added
-          if (art.controls["ed"]) {
-            art.controls.remove("ed");
-          }
-
-          // Add the control
-          art.controls.add({
-            name: "op",
-            position: "top",
-            html: '<button class="skip-button">Skip Opening</button>',
-            click: function (...args) {
-              art.seek = skip.op.interval.endTime;
-            },
-          });
-        }
-      } else if (
-        skip?.ed &&
-        currentTime >= skip.ed.interval.startTime &&
-        currentTime <= skip.ed.interval.endTime
-      ) {
-        // Add the layer if it's not already added
-        if (!art.controls["ed"]) {
-          // Remove the other control if it's already added
-          if (art.controls["op"]) {
-            art.controls.remove("op");
-          }
-
-          // Add the control
-          art.controls.add({
-            name: "ed",
-            position: "top",
-            html: '<button class="skip-button">Skip Ending</button>',
-            click: function (...args) {
-              art.seek = skip.ed.interval.endTime;
-            },
-          });
-        }
-      } else {
-        // Remove the controls if they're added
-        if (art.controls["op"]) {
-          art.controls.remove("op");
-        }
-        if (art.controls["ed"]) {
-          art.controls.remove("ed");
-        }
-      }
-    });
-
-    art.on("video:ended", () => {
-      if (!track?.next) return;
-      if (localStorage.getItem("autoplay") === "true") {
-        art.controls.add({
-          name: "next-button",
-          position: "top",
-          html: '<div class="vid-con"><button class="next-button progress">Play Next</button></div>',
-          click: function (...args) {
-            if (track?.next) {
-              router.push(
-                `/en/anime/watch/${
-                  info?.id
-                }/${provider}?id=${encodeURIComponent(track?.next?.id)}&num=${
-                  track?.next?.number
-                }${dub ? `&dub=${dub}` : ""}`
-              );
-            }
-          },
-        });
-
-        const button = document.querySelector(".next-button");
-
-        function stopTimeout() {
-          clearTimeout(timeoutId);
-          button.classList.remove("progress");
-        }
-
-        let timeoutId = setTimeout(() => {
-          art.controls.remove("next-button");
-          if (track?.next) {
-            router.push(
-              `/en/anime/watch/${info?.id}/${provider}?id=${encodeURIComponent(
-                track?.next?.id
-              )}&num=${track?.next?.number}${dub ? `&dub=${dub}` : ""}`
-            );
-          }
-        }, 7000);
-
-        button.addEventListener("mouseover", stopTimeout);
-      }
-    });
-  }
-
-  /**
-   * @type {import("artplayer/types/option").Option}
-   */
-  const option = {
-    url: url,
-    autoplay: autoplay ? true : false,
-    autoSize: false,
-    playbackRate: true,
-    fullscreen: true,
-    autoOrientation: true,
-    icons: icons,
-    setting: true,
-    screenshot: true,
-    hotkey: true,
-    pip: true,
-    airplay: true,
-    lock: true,
-  };
-
-  return (
-    <div
-      id={id}
-      className={`${className} bg-black`}
-      style={{ aspectRatio: aspectRatio }}
-    >
-      <div className="flex-center w-full h-full">
-        {!data?.error && !url && (
-          <div className="flex-center w-full h-full">
-            <Loading />
-          </div>
-        )}
-        {!error ? (
-          !loading && track && url && !data?.error ? (
-            <NewPlayer
-              playerRef={playerRef}
-              res={resolution}
-              quality={source}
-              option={option}
-              provider={provider}
-              track={track}
-              defSize={defSize}
-              defSub={defSub}
-              subSize={subSize}
-              subtitles={subtitle}
-              getInstance={getInstance}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            />
-          ) : (
-            <p className="text-center">
-              {data?.status === 404 && "Not Found"}
-              <br />
-              {data?.error}
-            </p>
-          )
-        ) : (
-          <p className="text-center">
-            Something went wrong while loading the video, <br />
-            please try from other source
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/components/watch/primary/details.js b/components/watch/primary/details.tsx
index 4af12ac..f20f8cf 100644
--- a/components/watch/primary/details.js
+++ b/components/watch/primary/details.tsx
@@ -2,7 +2,20 @@ import { useEffect, useState } from "react";
 import { useAniList } from "../../../lib/anilist/useAnilist";
 import Skeleton from "react-loading-skeleton";
 import DisqusComments from "../../disqus";
-import Image from "next/image";
+import { AniListInfoTypes } from "types/info/AnilistInfoTypes";
+import { SessionTypes } from "pages/en";
+
+type DetailsProps = {
+  info: AniListInfoTypes;
+  session: SessionTypes;
+  epiNumber: number;
+  description: string;
+  id: string;
+  onList: boolean;
+  setOnList: (value: boolean) => void;
+  handleOpen: () => void;
+  disqus: string;
+};
 
 export default function Details({
   info,
@@ -14,10 +27,14 @@ export default function Details({
   setOnList,
   handleOpen,
   disqus,
-}) {
+}: DetailsProps) {
   const [showComments, setShowComments] = useState(false);
   const { markPlanning } = useAniList(session);
 
+  const [showDesc, setShowDesc] = useState(false);
+
+  const truncatedDesc = truncateText(description, 420);
+
   function handlePlan() {
     if (onList === false) {
       markPlanning(info.id);
@@ -32,6 +49,10 @@ export default function Details({
     } else {
       setShowComments(true);
     }
+    return () => {
+      setShowComments(false);
+      setShowDesc(false);
+    };
   }, [id]);
 
   return (
@@ -133,12 +154,28 @@ export default function Details({
           ))}
       </div>
       {/* <div className={`bg-secondary rounded-md mt-3 mx-3`}> */}
-      <div className={`bg-secondary rounded-md mt-3`}>
+      <div className={`relative bg-secondary rounded-md mt-3`}>
         {info && (
-          <p
-            dangerouslySetInnerHTML={{ __html: description }}
-            className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
-          />
+          <>
+            <p
+              dangerouslySetInnerHTML={{
+                __html: showDesc
+                  ? description
+                  : description?.length > 420
+                  ? truncatedDesc
+                  : description,
+              }}
+              className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
+            />
+            {!showDesc && description?.length > 120 && (
+              <span
+                onClick={() => setShowDesc((prev) => !prev)}
+                className="flex justify-center items-end rounded-md pb-5 font-semibold font-karla cursor-pointer w-full h-full bg-gradient-to-t from-secondary hover:from-20% to-transparent absolute inset-0"
+              >
+                Read More
+              </span>
+            )}
+          </>
         )}
       </div>
       {/* {<div className="mt-5 px-5"></div>} */}
@@ -177,7 +214,6 @@ export default function Details({
               <DisqusComments
                 key={id}
                 post={{
-                  id: id,
                   title: info.title.romaji,
                   url: window.location.href,
                   episode: epiNumber,
@@ -191,3 +227,8 @@ export default function Details({
     </div>
   );
 }
+
+function truncateText(txt: string, length: number) {
+  const text = txt.replace(/(<([^>]+)>)/gi, "");
+  return text.length > length ? text.slice(0, length) + "..." : text;
+}
diff --git a/components/watch/secondary/episodeLists.js b/components/watch/secondary/episodeLists.tsx
index a676be0..2c23f25 100644
--- a/components/watch/secondary/episodeLists.js
+++ b/components/watch/secondary/episodeLists.tsx
@@ -3,6 +3,19 @@ import Image from "next/image";
 import Link from "next/link";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
+import { AniListInfoTypes } from "types/info/AnilistInfoTypes";
+import { Episode } from "types/api/Episode";
+
+type EpisodeListsProps = {
+  info: AniListInfoTypes;
+  map: any;
+  providerId: string;
+  watchId: string;
+  episode: Episode[];
+  artStorage: any;
+  track: any;
+  dub: string;
+};
 
 export default function EpisodeLists({
   info,
@@ -13,7 +26,7 @@ export default function EpisodeLists({
   artStorage,
   track,
   dub,
-}) {
+}: EpisodeListsProps) {
   const progress = info.mediaListEntry?.progress;
 
   const router = useRouter();
@@ -45,8 +58,8 @@ export default function EpisodeLists({
 
                 router.push(
                   `/en/anime/watch/${info.id}/${providerId}?id=${
-                    selectedEpisode.id
-                  }&num=${selectedEpisode.number}${dub ? `&dub=${dub}` : ""}`
+                    selectedEpisode?.id
+                  }&num=${selectedEpisode?.number}${dub ? `&dub=${dub}` : ""}`
                 );
               }}
               className="flex items-center text-sm gap-5 rounded-[3px] bg-secondary py-1 px-3 pr-8 font-karla appearance-none cursor-pointer outline-none focus:ring-1 focus:ring-action group-hover:ring-1 group-hover:ring-action"
@@ -64,7 +77,7 @@ export default function EpisodeLists({
       <div className="flex flex-col gap-5 lg:pl-5 py-2 scrollbar-thin px-2 scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
         {episode && episode.length > 0 ? (
           map?.some(
-            (item) =>
+            (item: any) =>
               (item?.img || item?.image) &&
               !item?.img?.includes("https://s4.anilist.co/")
           ) > 0 ? (
@@ -74,7 +87,14 @@ export default function EpisodeLists({
               let prog = (time / duration) * 100;
               if (prog > 90) prog = 100;
 
-              const mapData = map?.find((i) => i.number === item.number);
+              const mapData = map?.find((i: any) => i.number === item.number);
+
+              const parsedImage = mapData
+                ? mapData?.img?.includes("null") ||
+                  mapData?.image?.includes("null")
+                  ? info.coverImage?.extraLarge
+                  : mapData?.img || mapData?.image
+                : info.coverImage?.extraLarge || null;
               return (
                 <Link
                   href={`/en/anime/watch/${
@@ -93,11 +113,7 @@ export default function EpisodeLists({
                     <div className="relative">
                       {/* <div className="absolute inset-0 w-full h-full z-40" /> */}
                       <Image
-                        src={
-                          mapData?.img ||
-                          mapData?.image ||
-                          info?.coverImage?.extraLarge
-                        }
+                        src={parsedImage || info?.coverImage?.extraLarge}
                         draggable={false}
                         alt="Anime Cover"
                         width={1000}