Update v3.6.6

> Added functionality to see more anime at home page
> fixed some bugs

6 files changed, 393 insertions, 224 deletions

diff --git a/pages/_app.js b/pages/_app.js
index 6334bd9..0030e0d 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,4 +1,3 @@
-// import { ThemeProvider } from "next-themes";
 import { useRouter } from "next/router";
 import { AnimatePresence, motion as m } from "framer-motion";
 import NextNProgress from "nextjs-progressbar";
@@ -6,6 +5,7 @@ import { SessionProvider } from "next-auth/react";
 import "../styles/globals.css";
 import "react-toastify/dist/ReactToastify.css";
 import "react-loading-skeleton/dist/skeleton.css";
+import { SkeletonTheme } from "react-loading-skeleton";
 
 export default function App({
   Component,
@@ -15,36 +15,36 @@ export default function App({
 
   return (
     <SessionProvider session={session}>
-      {/* <ThemeProvider attribute="class"> */}
       <AnimatePresence mode="wait">
-        <m.div
-          key={`route-${router.route}`}
-          transition={{ duration: 0.5 }}
-          initial="initialState"
-          animate="animateState"
-          exit="exitState"
-          variants={{
-            initialState: {
-              opacity: 0,
-            },
-            animateState: {
-              opacity: 1,
-            },
-            exitState: {},
-          }}
-          className="z-50 w-screen"
-        >
-          <NextNProgress
-            color="#FF7E2C"
-            startPosition={0.3}
-            stopDelayMs={200}
-            height={3}
-            showOnShallow={true}
-          />
-          <Component {...pageProps} />
-        </m.div>
+        <SkeletonTheme baseColor="#232329" highlightColor="#2a2a32">
+          <m.div
+            key={`route-${router.route}`}
+            transition={{ duration: 0.5 }}
+            initial="initialState"
+            animate="animateState"
+            exit="exitState"
+            variants={{
+              initialState: {
+                opacity: 0,
+              },
+              animateState: {
+                opacity: 1,
+              },
+              exitState: {},
+            }}
+            className="z-50 w-screen"
+          >
+            <NextNProgress
+              color="#FF7E2C"
+              startPosition={0.3}
+              stopDelayMs={200}
+              height={3}
+              showOnShallow={true}
+            />
+            <Component {...pageProps} />
+          </m.div>
+        </SkeletonTheme>
       </AnimatePresence>
-      {/* </ThemeProvider> */}
     </SessionProvider>
   );
 }
diff --git a/pages/en/anime/popular.js b/pages/en/anime/popular.js
new file mode 100644
index 0000000..b8b19ba
--- /dev/null
+++ b/pages/en/anime/popular.js
@@ -0,0 +1,175 @@
+import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import Navbar from "../../../components/navbar";
+import Footer from "../../../components/footer";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../api/auth/[...nextauth]";
+import MobileNav from "../../../components/home/mobileNav";
+
+export default function PopularAnime({ sessions }) {
+  const [data, setData] = useState(null);
+  const [page, setPage] = useState(1);
+  const [nextPage, setNextPage] = useState(true);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const fetchData = async () => {
+      const res = await fetch("https://graphql.anilist.co", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          query: `query ($page: Int, $perPage: Int) {
+                    Page (page: $page, perPage: $perPage) {
+                        pageInfo {
+                        total
+                        currentPage
+                        lastPage
+                        hasNextPage
+                        perPage
+                        }
+                        media (sort: POPULARITY_DESC, type: ANIME) {
+                            id
+                            idMal
+                            title {
+                                romaji
+                            }
+                            coverImage {
+                                large
+                            }
+                            averageScore
+                            description
+                            episodes
+                            status
+                        }
+                    }
+                }
+            `,
+          variables: {
+            page: page,
+            perPage: 20,
+          },
+        }),
+      });
+      const get = await res.json();
+      if (get?.data?.Page?.media?.length === 0) {
+        setNextPage(false);
+      } else if (get !== null && page > 1) {
+        setData((prevData) => {
+          return [...(prevData ?? []), ...get?.data?.Page?.media];
+        });
+        setNextPage(get?.data?.Page?.pageInfo.hasNextPage);
+      } else {
+        setData(get?.data?.Page?.media);
+      }
+      setNextPage(get?.data?.Page?.pageInfo.hasNextPage);
+      setLoading(false);
+    };
+    fetchData();
+  }, [page]);
+
+  useEffect(() => {
+    function handleScroll() {
+      if (page > 5 || !nextPage) {
+        window.removeEventListener("scroll", handleScroll);
+        return;
+      }
+
+      if (
+        window.innerHeight + window.pageYOffset >=
+        document.body.offsetHeight - 3
+      ) {
+        setPage((prevPage) => prevPage + 1);
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [page, nextPage]);
+
+  return (
+    <>
+      <MobileNav sessions={sessions} />
+      <div className="flex flex-col gap-2 items-center min-h-screen w-screen px-2 relative pb-10">
+        <div className="z-50 bg-primary pt-5 pb-3 shadow-md shadow-primary w-full fixed left-3">
+          <Link href="/en" className="flex gap-2 items-center font-karla">
+            <ChevronLeftIcon className="w-5 h-5" />
+            <h1 className="text-xl">Popular Anime</h1>
+          </Link>
+        </div>
+        <div className="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-6 gap-3 max-w-6xl pt-16">
+          {data?.map((i, index) => (
+            <div
+              key={index}
+              className="flex flex-col items-center w-[150px] lg:w-[180px]"
+            >
+              <Link href={`/en/anime/${i.id}`} className="p-2">
+                <Image
+                  src={i.coverImage.large}
+                  alt={i.title.romaji}
+                  width={500}
+                  height={500}
+                  className="w-[140px] h-[190px] lg:w-[170px] lg:h-[230px] object-cover rounded hover:scale-105 scale-100 transition-all duration-200 ease-out"
+                />
+              </Link>
+              <Link href={`/en/anime/${i.id}`} className="w-full px-2">
+                <h1 className="font-karla font-bold xl:text-base text-[15px] line-clamp-2">
+                  {i.status === "RELEASING" ? (
+                    <span className="dots bg-green-500" />
+                  ) : i.status === "NOT_YET_RELEASED" ? (
+                    <span className="dots bg-red-500" />
+                  ) : null}
+                  {i.title.romaji}
+                </h1>
+              </Link>
+            </div>
+          ))}
+
+          {loading && (
+            <>
+              {[1, 2, 4, 5, 6, 7, 8].map((item) => (
+                <div
+                  key={item}
+                  className="flex flex-col items-center w-[150px] lg:w-[180px]"
+                >
+                  <div className="w-full p-2">
+                    <Skeleton className="w-[140px] h-[190px] lg:w-[170px] lg:h-[230px] rounded" />
+                  </div>
+                  <div className="w-full px-2">
+                    <Skeleton width={80} height={20} />
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+        {!loading && page > 5 && nextPage && (
+          <button
+            onClick={() => setPage((p) => p + 1)}
+            className="bg-secondary xl:w-[30%] w-[80%] h-10 rounded-md"
+          >
+            Load More
+          </button>
+        )}
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export async function getServerSideProps(context) {
+  const session = await getServerSession(context.req, context.res, authOptions);
+
+  return {
+    props: {
+      sessions: session,
+    },
+  };
+}
diff --git a/pages/en/anime/trending.js b/pages/en/anime/trending.js
new file mode 100644
index 0000000..cbc30ab
--- /dev/null
+++ b/pages/en/anime/trending.js
@@ -0,0 +1,175 @@
+import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import Navbar from "../../../components/navbar";
+import Footer from "../../../components/footer";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../api/auth/[...nextauth]";
+import MobileNav from "../../../components/home/mobileNav";
+
+export default function TrendingAnime({ sessions }) {
+  const [data, setData] = useState(null);
+  const [page, setPage] = useState(1);
+  const [nextPage, setNextPage] = useState(true);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const fetchData = async () => {
+      const res = await fetch("https://graphql.anilist.co", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          query: `query ($page: Int, $perPage: Int) {
+                    Page (page: $page, perPage: $perPage) {
+                        pageInfo {
+                        total
+                        currentPage
+                        lastPage
+                        hasNextPage
+                        perPage
+                        }
+                        media (sort: TRENDING_DESC, type: ANIME) {
+                            id
+                            idMal
+                            title {
+                                romaji
+                            }
+                            coverImage {
+                                large
+                            }
+                            averageScore
+                            description
+                            episodes
+                            status
+                        }
+                    }
+                }
+            `,
+          variables: {
+            page: page,
+            perPage: 20,
+          },
+        }),
+      });
+      const get = await res.json();
+      if (get?.data?.Page?.media?.length === 0) {
+        setNextPage(false);
+      } else if (get !== null && page > 1) {
+        setData((prevData) => {
+          return [...(prevData ?? []), ...get?.data?.Page?.media];
+        });
+        setNextPage(get?.data?.Page?.pageInfo.hasNextPage);
+      } else {
+        setData(get?.data?.Page?.media);
+      }
+      setNextPage(get?.data?.Page?.pageInfo.hasNextPage);
+      setLoading(false);
+    };
+    fetchData();
+  }, [page]);
+
+  useEffect(() => {
+    function handleScroll() {
+      if (page > 5 || !nextPage) {
+        window.removeEventListener("scroll", handleScroll);
+        return;
+      }
+
+      if (
+        window.innerHeight + window.pageYOffset >=
+        document.body.offsetHeight - 3
+      ) {
+        setPage((prevPage) => prevPage + 1);
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [page, nextPage]);
+
+  return (
+    <>
+      <MobileNav sessions={sessions} />
+      <div className="flex flex-col gap-2 items-center min-h-screen w-screen px-2 relative pb-10">
+        <div className="z-50 bg-primary pt-5 pb-3 shadow-md shadow-primary w-full fixed left-3">
+          <Link href="/en" className="flex gap-2 items-center font-karla">
+            <ChevronLeftIcon className="w-5 h-5" />
+            <h1 className="text-xl">Trending Now</h1>
+          </Link>
+        </div>
+        <div className="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-6 gap-3 max-w-6xl pt-16">
+          {data?.map((i, index) => (
+            <div
+              key={index}
+              className="flex flex-col items-center w-[150px] lg:w-[180px]"
+            >
+              <Link href={`/en/anime/${i.id}`} className="p-2">
+                <Image
+                  src={i.coverImage.large}
+                  alt={i.title.romaji}
+                  width={500}
+                  height={500}
+                  className="w-[140px] h-[190px] lg:w-[170px] lg:h-[230px] object-cover rounded hover:scale-105 scale-100 transition-all duration-200 ease-out"
+                />
+              </Link>
+              <Link href={`/en/anime/${i.id}`} className="w-full px-2">
+                <h1 className="font-karla font-bold xl:text-base text-[15px] line-clamp-2">
+                  {i.status === "RELEASING" ? (
+                    <span className="dots bg-green-500" />
+                  ) : i.status === "NOT_YET_RELEASED" ? (
+                    <span className="dots bg-red-500" />
+                  ) : null}
+                  {i.title.romaji}
+                </h1>
+              </Link>
+            </div>
+          ))}
+
+          {loading && (
+            <>
+              {[1, 2, 4, 5, 6, 7, 8].map((item) => (
+                <div
+                  key={item}
+                  className="flex flex-col items-center w-[150px] lg:w-[180px]"
+                >
+                  <div className="w-full p-2">
+                    <Skeleton className="w-[140px] h-[190px] lg:w-[170px] lg:h-[230px] rounded" />
+                  </div>
+                  <div className="w-full px-2">
+                    <Skeleton width={80} height={20} />
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+        {!loading && page > 5 && nextPage && (
+          <button
+            onClick={() => setPage((p) => p + 1)}
+            className="bg-secondary xl:w-[30%] w-[80%] h-10 rounded-md mt-5"
+          >
+            Load More
+          </button>
+        )}
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export async function getServerSideProps(context) {
+  const session = await getServerSession(context.req, context.res, authOptions);
+
+  return {
+    props: {
+      sessions: session,
+    },
+  };
+}
diff --git a/pages/en/index.js b/pages/en/index.js
index 9cb516c..cbf96cd 100644
--- a/pages/en/index.js
+++ b/pages/en/index.js
@@ -8,7 +8,7 @@ import Content from "../../components/home/content";
 
 import { motion } from "framer-motion";
 
-import { signIn, signOut } from "next-auth/react";
+import { signOut } from "next-auth/react";
 import { useAniList } from "../../lib/anilist/useAnilist";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "../api/auth/[...nextauth]";
@@ -19,6 +19,7 @@ import getUpcomingAnime from "../../lib/anilist/getUpcomingAnime";
 import { useCountdown } from "../../lib/useCountdownSeconds";
 
 import Navigasi from "../../components/home/staticNav";
+import MobileNav from "../../components/home/mobileNav";
 
 // Filter schedules for each day
 // const filterByCountryOfOrigin = (schedule, country) => {
@@ -85,7 +86,6 @@ export default function Home({ detail, populars, sessions, upComing }) {
     getRelease();
   }, [release]);
 
-  const [isVisible, setIsVisible] = useState(false);
   const [list, setList] = useState(null);
   const [planned, setPlanned] = useState(null);
   const [greeting, setGreeting] = useState("");
@@ -95,14 +95,6 @@ export default function Home({ detail, populars, sessions, upComing }) {
   const popular = populars?.data;
   const data = detail.data[0];
 
-  const handleShowClick = () => {
-    setIsVisible(true);
-  };
-
-  const handleHideClick = () => {
-    setIsVisible(false);
-  };
-
   useEffect(() => {
     const time = new Date().getHours();
     let greeting = "";
@@ -162,189 +154,7 @@ export default function Home({ detail, populars, sessions, upComing }) {
         <link rel="icon" href="/c.svg" />
       </Head>
 
-      {/* NAVBAR */}
-      <div className="z-50">
-        {!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>
-
-      {/* Mobile Menu */}
-      <div className={`transition-all duration-150 subpixel-antialiased z-50`}>
-        {isVisible && sessions && (
-          <Link
-            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]"
-          >
-            <img
-              src={sessions?.user.image.large}
-              alt="user avatar"
-              className="object-cover w-[60px] h-[60px] rounded-full"
-            />
-          </Link>
-        )}
-        {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>
-              {sessions ? (
-                <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>
+      <MobileNav sessions={sessions} />
 
       <div className="h-auto w-screen bg-[#141519] text-[#dbdcdd] ">
         <Navigasi />
@@ -432,6 +242,7 @@ export default function Home({ detail, populars, sessions, upComing }) {
                   section="On-Going Anime"
                   data={releaseData}
                   og={prog}
+                  userName={sessions?.user?.name}
                 />
               </motion.div>
             )}
@@ -449,6 +260,7 @@ export default function Home({ detail, populars, sessions, upComing }) {
                   section="Your Watch List"
                   data={list}
                   og={prog}
+                  userName={sessions?.user?.name}
                 />
               </motion.div>
             )}
@@ -466,6 +278,7 @@ export default function Home({ detail, populars, sessions, upComing }) {
                   ids="plannedAnime"
                   section="Your Plan"
                   data={planned}
+                  userName={sessions?.user?.name}
                 />
               </motion.div>
             )}
diff --git a/pages/en/profile/[user].js b/pages/en/profile/[user].js
index 6bc804e..b66699b 100644
--- a/pages/en/profile/[user].js
+++ b/pages/en/profile/[user].js
@@ -187,7 +187,11 @@ export default function MyList({ media, sessions, user, time }) {
           {media.length !== 0 ? (
             filterMedia(listFilter).map((item, index) => {
               return (
-                <div key={index} className="flex flex-col gap-5 mx-3">
+                <div
+                  key={index}
+                  id={item.status?.toLowerCase()}
+                  className="flex flex-col gap-5 mx-3"
+                >
                   <h1 className="font-karla font-bold text-xl">{item.name}</h1>
                   <table className="bg-secondary rounded-lg">
                     <thead>
diff --git a/pages/en/search/[param].js b/pages/en/search/[param].js
index 480cebe..190002d 100644
--- a/pages/en/search/[param].js
+++ b/pages/en/search/[param].js
@@ -452,7 +452,9 @@ export default function Card() {
                         <h2 className="font-outfit xl:text-[15px] text-[11px] font-light pt-2 text-[#8B8B8B]">
                           {anime.format || <p>-</p>} &#183;{" "}
                           {anime.status || <p>-</p>} &#183;{" "}
-                          {anime.episodes || 0} Episodes
+                          {anime.episodes
+                            ? `${anime.episodes || "N/A"} Episodes`
+                            : `${anime.chapters || "N/A"} Chapters`}
                         </h2>
                       </m.div>
                     );