Display Patch v3.5.4 - 1

> Now support more device sizes than before

5 files changed, 79 insertions, 75 deletions

diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index 4b759b6..ae6ac34 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -373,7 +373,7 @@ export default function Info() {
         </div>
       </Modal>
       <SkeletonTheme baseColor="#232329" highlightColor="#2a2a32">
-        <Layout navTop="text-white bg-primary md:pt-0 md:px-0 bg-slate bg-opacity-40 z-50">
+        <Layout navTop="text-white bg-primary lg:pt-0 lg:px-0 bg-slate bg-opacity-40 z-50">
           <div className="w-screen min-h-screen relative flex flex-col items-center bg-primary gap-5">
             <div className="bg-image w-screen">
               <div className="bg-gradient-to-t from-primary from-10% to-transparent absolute h-[300px] w-screen z-10 inset-0" />
@@ -394,10 +394,10 @@ export default function Info() {
                 <div className="bg-image w-screen absolute top-0 left-0 h-[300px]" />
               )}
             </div>
-            <div className="lg:w-[70%] md:pt-[10rem] z-30 flex flex-col gap-5">
+            <div className="lg:w-[90%] xl:w-[75%] lg:pt-[10rem] z-30 flex flex-col gap-5">
               {/* Mobile */}
 
-              <div className="md:hidden pt-5 w-screen px-5 flex flex-col">
+              <div className="lg:hidden pt-5 w-screen px-5 flex flex-col">
                 <div className="h-[250px] flex flex-col gap-1 justify-center">
                   <h1 className="font-karla font-extrabold text-lg line-clamp-1 w-[70%]">
                     {/* Yuru Camp△ SEASON 2 */}
@@ -448,18 +448,18 @@ export default function Info() {
                   )}
                 </div>
                 <div className="bg-secondary rounded-sm xs:h-[30px]">
-                  <div className="grid grid-cols-3 place-content-center xs:flex  items-center justify-center h-full xs:gap-10 p-2 text-sm">
+                  <div className="grid grid-cols-3 place-content-center xxs:flex  items-center justify-center h-full xxs:gap-10 p-2 text-sm">
                     {info && info.status !== "NOT_YET_RELEASED" ? (
                       <>
-                        <div className="flex-center flex-col xs:flex-row gap-2">
+                        <div className="flex-center flex-col xxs:flex-row gap-2">
                           <TvIcon className="w-5 h-5 text-action" />
                           <h4 className="font-karla">{info?.type}</h4>
                         </div>
-                        <div className="flex-center flex-col xs:flex-row gap-2">
+                        <div className="flex-center flex-col xxs:flex-row gap-2">
                           <ArrowTrendingUpIcon className="w-5 h-5 text-action" />
                           <h4>{info?.averageScore}%</h4>
                         </div>
-                        <div className="flex-center flex-col xs:flex-row gap-2">
+                        <div className="flex-center flex-col xxs:flex-row gap-2">
                           <RectangleStackIcon className="w-5 h-5 text-action" />
                           {info?.episodes ? (
                             <h1>{info?.episodes} Episodes</h1>
@@ -476,11 +476,11 @@ export default function Info() {
               </div>
 
               {/* PC */}
-              <div className="hidden md:flex gap-8 w-full flex-nowrap">
-                <div className="shrink-0 md:h-[250px] md:w-[180px] w-[115px] h-[164px] relative">
+              <div className="hidden lg:flex gap-8 w-full flex-nowrap">
+                <div className="shrink-0 lg:h-[250px] lg:w-[180px] w-[115px] h-[164px] relative">
                   {info ? (
                     <>
-                      <div className="bg-image md:h-[250px] md:w-[180px] w-[115px] h-[164px] bg-opacity-30 absolute backdrop-blur-lg z-10 -top-7" />
+                      <div className="bg-image lg:h-[250px] lg:w-[180px] w-[115px] h-[164px] bg-opacity-30 absolute backdrop-blur-lg z-10 -top-7" />
                       <Image
                         src={
                           info.coverImage.extraLarge || info.coverImage.large
@@ -489,7 +489,7 @@ export default function Info() {
                         alt="poster anime"
                         height={700}
                         width={700}
-                        className="object-cover md:h-[250px] md:w-[180px] w-[115px] h-[164px] z-20 absolute rounded-md -top-7"
+                        className="object-cover lg:h-[250px] lg:w-[180px] w-[115px] h-[164px] z-20 absolute rounded-md -top-7"
                       />
                       <button
                         type="button"
@@ -509,7 +509,7 @@ export default function Info() {
                 </div>
 
                 {/* PC */}
-                <div className="hidden md:flex w-full flex-col gap-5 h-[250px]">
+                <div className="hidden lg:flex w-full flex-col gap-5 h-[250px]">
                   <div className="flex flex-col gap-2">
                     <h1 className=" font-inter font-bold text-[36px] text-white line-clamp-1">
                       {info ? (
@@ -585,7 +585,7 @@ export default function Info() {
               <div>
                 <div className="flex gap-5 items-center">
                   {info && (
-                    <div className="p-3 lg:p-0 text-[20px] md:text-2xl font-bold font-karla">
+                    <div className="p-3 lg:p-0 text-[20px] lg:text-2xl font-bold font-karla">
                       Relations
                     </div>
                   )}
@@ -624,7 +624,7 @@ export default function Info() {
                                       info?.title.native
                                   )}`
                             }
-                            className={`hover:scale-[1.02] hover:shadow-lg md:px-0 px-4 scale-100 transition-transform duration-200 ease-out w-full ${
+                            className={`hover:scale-[1.02] hover:shadow-lg lg:px-0 px-4 scale-100 transition-transform duration-200 ease-out w-full ${
                               rel.type === "MUSIC" ? "pointer-events-none" : ""
                             }`}
                           >
@@ -660,11 +660,11 @@ export default function Info() {
                   ) : (
                     <>
                       {[1, 2, 3].map((item) => (
-                        <div key={item} className="w-full hidden md:block">
+                        <div key={item} className="w-full hidden lg:block">
                           <Skeleton className="h-[126px]" />
                         </div>
                       ))}
-                      <div className="w-full md:hidden">
+                      <div className="w-full lg:hidden">
                         <Skeleton className="h-[126px]" />
                       </div>
                     </>
@@ -672,15 +672,15 @@ export default function Info() {
                 </div>
               </div>
               <div className="z-20 flex flex-col gap-10 p-3 lg:p-0">
-                <div className="flex items-center md:gap-10 gap-7">
+                <div className="flex items-center lg:gap-10 gap-7">
                   {info && (
-                    <h1 className="text-[20px] md:text-2xl font-bold font-karla">
+                    <h1 className="text-[20px] lg:text-2xl font-bold font-karla">
                       Episodes
                     </h1>
                   )}
                   {info?.nextAiringEpisode && (
                     <div className="flex items-center gap-2">
-                      <div className="flex items-center gap-4 text-[10px] xxs:text-sm md:text-base">
+                      <div className="flex items-center gap-4 text-[10px] xxs:text-sm lg:text-base">
                         <h1>Next :</h1>
                         <div
                           className="px-5 rounded-sm font-karla font-bold bg-white text-black"
@@ -710,7 +710,7 @@ export default function Info() {
                                   href={`/anime/watch/${epi.id}/${data.id}/${
                                     stall ? `9anime` : ""
                                   }`}
-                                  className={`text-start text-sm md:text-lg ${
+                                  className={`text-start text-sm lg:text-lg ${
                                     progress && epi.number <= progress
                                       ? "text-[#5f5f5f]"
                                       : "text-white"
@@ -719,7 +719,7 @@ export default function Info() {
                                   <p>Episode {epi.number}</p>
                                   {epi.title && (
                                     <p
-                                      className={`text-xs md:text-sm ${
+                                      className={`text-xs lg:text-sm ${
                                         progress && epi.number <= progress
                                           ? "text-[#5f5f5f]"
                                           : "text-[#b1b1b1]"
@@ -768,7 +768,7 @@ export default function Info() {
               </div>
             </div>
             {info && rec?.length !== 0 && (
-              <div className="w-screen md:w-[80%]">
+              <div className="w-screen lg:w-[90%] xl:w-[85%]">
                 <Content
                   ids="recommendAnime"
                   section="Recommendations"
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index 41635b8..3a779a5 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -387,7 +387,7 @@ export default function Info({ sessions, id, aniId, provider }) {
                         {data ? data.studios : <Skeleton width={80} />}
                       </div>
                       <div className="hidden xxs:grid col-start-2 place-content-end relative">
-                        <div className="" onClick={() => setOpen(true)}>
+                        <div>
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             fill="none"
@@ -456,7 +456,7 @@ export default function Info({ sessions, id, aniId, provider }) {
                 </div>
               </div>
             </div>
-            <div className="flex flex-col w-screen lg:w-[33%] ">
+            <div className="flex flex-col w-screen lg:w-[35%] ">
               <h1 className="text-xl font-karla pl-4 pb-5 font-semibold">
                 Up Next
               </h1>
@@ -495,7 +495,7 @@ export default function Info({ sessions, id, aniId, provider }) {
                                 Episode {item.number}
                               </span>
                               {item.id == id && (
-                                <div className="absolute top-11 left-[105px] scale-[1.5]">
+                                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 scale-[1.5]">
                                   <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20"
diff --git a/pages/index.js b/pages/index.js
index fcf8288..88687d7 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -34,15 +34,15 @@ export function Navigasi() {
     <>
       {/* NAVBAR PC */}
       <div className="flex items-center justify-center">
-        <div className="flex w-full items-center justify-between px-5 md:mx-[94px]">
-          <div className="flex items-center md:gap-16 md:pt-7">
+        <div className="flex w-full items-center justify-between px-5 lg:mx-[94px]">
+          <div className="flex items-center lg:gap-16 lg:pt-7">
             <Link
               href="/"
               className=" font-outfit text-[40px] font-bold text-[#FF7F57]"
             >
               moopa
             </Link>
-            <ul className="hidden items-center gap-10 pt-2 font-outfit text-[14px] md:flex">
+            <ul className="hidden items-center gap-10 pt-2 font-outfit text-[14px] lg:flex">
               <li>
                 <Link href="/search/anime">AniList Index</Link>
               </li>
@@ -78,7 +78,7 @@ export function Navigasi() {
               )}
             </ul>
           </div>
-          <div className="relative flex scale-75 items-center mb-7 md:mb-0">
+          <div className="relative flex scale-75 items-center mb-7 lg:mb-0">
             <div className="search-box ">
               <input
                 className="search-text"
@@ -180,7 +180,7 @@ export default function Home({ detail, populars, sessions }) {
         {!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 md:hidden"
+            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
@@ -204,7 +204,7 @@ export default function Home({ detail, populars, sessions }) {
         {isVisible && sessions && (
           <Link
             href={`/profile/${sessions?.user.name}`}
-            className="fixed md:hidden bottom-[100px] w-[60px] h-[60px] flex items-center justify-center right-[20px] rounded-full z-50 bg-[#17171f]"
+            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}
@@ -214,7 +214,7 @@ export default function Home({ detail, populars, sessions }) {
           </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 md:hidden">
+          <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="/" className="">
@@ -363,17 +363,17 @@ export default function Home({ detail, populars, sessions }) {
         <Navigasi />
         {/* PC / TABLET */}
         <div className=" hidden justify-center lg:flex my-16">
-          <div className="relative grid grid-rows-2 items-center md:flex md:h-[467px] md:w-[80%] md:justify-between">
-            <div className="row-start-2 flex h-full flex-col gap-7 md:w-[55%] md:justify-center">
-              <h1 className="w-[85%] font-outfit font-extrabold md:text-[34px] line-clamp-2">
+          <div className="relative grid grid-rows-2 items-center lg:flex lg:h-[467px] lg:w-[80%] lg:justify-between">
+            <div className="row-start-2 flex h-full flex-col gap-7 lg:w-[55%] lg:justify-center">
+              <h1 className="w-[85%] font-outfit font-extrabold lg:text-[34px] line-clamp-2">
                 {data.title.english || data.title.romaji || data.title.native}
               </h1>
               <p
-                className="font-roboto font-light md:text-[18px] line-clamp-5"
+                className="font-roboto font-light lg:text-[18px] line-clamp-5"
                 dangerouslySetInnerHTML={{ __html: data?.description }}
               />
 
-              <div className="md:pt-5">
+              <div className="lg:pt-5">
                 <Link
                   href={`/anime/${data.id}`}
                   legacyBehavior
@@ -386,8 +386,8 @@ export default function Home({ detail, populars, sessions }) {
               </div>
             </div>
             <div className="z-10 row-start-1 flex justify-center ">
-              <div className="relative  md:h-[467px] md:w-[322px] md:scale-100">
-                <div className="absolute bg-gradient-to-t from-[#141519] to-transparent md:h-[467px] md:w-[322px]" />
+              <div className="relative  lg:h-[467px] lg:w-[322px] lg:scale-100">
+                <div className="absolute bg-gradient-to-t from-[#141519] to-transparent lg:h-[467px] lg:w-[322px]" />
 
                 <Image
                   draggable={false}
@@ -396,19 +396,19 @@ export default function Home({ detail, populars, sessions }) {
                   width={460}
                   height={662}
                   priority
-                  className="rounded-tl-xl rounded-tr-xl object-cover bg-blend-overlay md:h-[467px] md:w-[322px]"
+                  className="rounded-tl-xl rounded-tr-xl object-cover bg-blend-overlay lg:h-[467px] lg:w-[322px]"
                 />
               </div>
             </div>
           </div>
         </div>
         {sessions && (
-          <div className="flex items-center mx-3 md:mx-0 mt-10 md:mt-0">
-            <div className="md:text-4xl md:mx-32 flex items-center gap-3 text-2xl font-bold font-karla">
-              {greeting},<h1 className="md:hidden">{sessions?.user.name}</h1>
+          <div className="flex items-center mx-3 lg:mx-0 mt-10 lg:mt-0">
+            <div className="lg:text-4xl lg:mx-32 flex items-center gap-3 text-2xl font-bold font-karla">
+              {greeting},<h1 className="lg:hidden">{sessions?.user.name}</h1>
               <button
                 onClick={() => signOut()}
-                className="hidden text-center relative md:flex justify-center group"
+                className="hidden text-center relative lg:flex justify-center group"
               >
                 {sessions?.user.name}
                 <span className="absolute text-sm z-50 w-20 text-center bottom-11 text-white shadow-lg opacity-0 bg-secondary p-1 rounded-md font-karla font-light invisible group-hover:visible group-hover:opacity-100 duration-300 transition-all">
@@ -419,7 +419,7 @@ export default function Home({ detail, populars, sessions }) {
           </div>
         )}
 
-        <div className="md:mt-16 mt-12 flex flex-col items-center">
+        <div className="lg:mt-16 mt-12 flex flex-col items-center">
           <motion.div
             className="w-screen flex-none lg:w-[87%]"
             initial={{ opacity: 0 }}
diff --git a/pages/profile/[user].js b/pages/profile/[user].js
index e28e1cb..d5e316f 100644
--- a/pages/profile/[user].js
+++ b/pages/profile/[user].js
@@ -22,7 +22,7 @@ export default function MyList({ media, sessions, user, time }) {
         <title>My Lists</title>
       </Head>
       <Navbar />
-      <div className="w-screen lg:flex justify-between lg:px-32 py-5 relative">
+      <div className="w-screen lg:flex justify-between lg:px-10 xl:px-32 py-5 relative">
         <div className="lg:w-[30%] h-full mt-12 lg:mr-10 grid gap-5 mx-3 lg:mx-0 antialiased">
           <div className="flex items-center gap-5">
             <Image
@@ -47,7 +47,7 @@ export default function MyList({ media, sessions, user, time }) {
             <h1 className="font-karla font-bold text-2xl pt-7">{user.name}</h1>
           </div>
           <div className="flex items-center justify-between">
-            <div className="flex gap-5 text-sm font-karla">
+            <div className="flex gap-2 text-sm font-karla">
               Created At :
               <UnixTimeConverter unixTime={user.createdAt} />
             </div>
diff --git a/pages/search/[param].js b/pages/search/[param].js
index f38ba76..9fc2b17 100644
--- a/pages/search/[param].js
+++ b/pages/search/[param].js
@@ -201,14 +201,14 @@ export default function Card() {
       </Head>
       <div className="bg-primary">
         <Navbar />
-        <div className="min-h-screen mt-10 mb-14 text-white items-center gap-5 lg:gap-0 flex flex-col">
-          <div className="w-screen px-10 lg:w-[80%] lg:h-[10rem] flex text-center lg:items-end lg:pb-16 justify-center lg:gap-10 gap-3 font-karla font-light">
+        <div className="min-h-screen mt-10 mb-14 text-white items-center gap-5 xl:gap-0 flex flex-col">
+          <div className="w-screen px-10 xl:w-[80%] xl:h-[10rem] flex text-center xl:items-end xl:pb-16 justify-center lg:gap-7 xl:gap-10 gap-3 font-karla font-light">
             <div className="text-start">
-              <h1 className="font-bold lg:pb-5 pb-3 hidden lg:block text-md pl-1 font-outfit">
+              <h1 className="font-bold xl:pb-5 pb-3 hidden lg:block text-md pl-1 font-outfit">
                 TITLE
               </h1>
               <input
-                className="lg:w-[297px] lg:h-[46px] h-[35px] xxs:w-[230px] xs:w-[280px] bg-secondary rounded-[10px] font-karla font-light text-[#ffffff89] text-center"
+                className="xl:w-[297px] md:w-[297px] lg:w-[230px] xl:h-[46px] h-[35px] xxs:w-[230px] xs:w-[280px] bg-secondary rounded-[10px] font-karla font-light text-[#ffffff89] text-center"
                 placeholder="search here..."
                 type="text"
                 onKeyDown={handleKeyDown}
@@ -218,9 +218,11 @@ export default function Card() {
 
             {/* TYPE */}
             <div className="hidden lg:block text-start">
-              <h1 className="font-bold pb-5 text-md pl-1 font-outfit">TYPE</h1>
+              <h1 className="font-bold xl:pb-5 pb-3 text-md pl-1 font-outfit">
+                TYPE
+              </h1>
               <select
-                className="w-[297px] h-[46px] bg-secondary rounded-[10px]  justify-between pl-[7.5rem] pr-5 flex items-center"
+                className="xl:w-[297px] xl:h-[46px] lg:h-[35px] lg:w-[230px] bg-secondary rounded-[10px]  justify-between flex items-center text-center"
                 value={type}
                 onChange={(e) => handleTipe(e)}
               >
@@ -234,9 +236,11 @@ export default function Card() {
 
             {/* SORT */}
             <div className="hidden lg:block text-start">
-              <h1 className="font-bold pb-5 text-md pl-1 font-outfit">SORT</h1>
+              <h1 className="font-bold xl:pb-5 lg:pb-3 text-md pl-1 font-outfit">
+                SORT
+              </h1>
               <select
-                className="w-[297px] h-[46px] bg-secondary rounded-[10px] flex items-center text-center"
+                className="xl:w-[297px] xl:h-[46px] lg:h-[35px] lg:w-[230px] bg-secondary rounded-[10px] flex items-center text-center"
                 onChange={(e) => {
                   setSelectedSort(e.target.value);
                   setData(null);
@@ -254,7 +258,7 @@ export default function Card() {
             {/* OPTIONS */}
             <div className="flex lg:gap-7 text-center gap-3 items-end">
               <div
-                className="lg:w-[73px] w-[50px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px]  justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group"
+                className="xl:w-[73px] w-[50px] xl:h-[46px] h-[35px] bg-secondary rounded-[10px]  justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group"
                 onClick={handleVisible}
               >
                 <svg
@@ -275,7 +279,7 @@ export default function Card() {
 
               {/* TRASH ICON */}
               <div
-                className="lg:w-[73px] w-[50px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px]  justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group"
+                className="xl:w-[73px] w-[50px] xl:h-[46px] h-[35px] bg-secondary rounded-[10px]  justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group"
                 onClick={trash}
               >
                 <svg
@@ -295,7 +299,7 @@ export default function Card() {
               </div>
             </div>
           </div>
-          <div className="w-screen lg:w-[64%] flex lg:justify-end lg:pl-0">
+          <div className="w-screen xl:w-[64%] flex xl:justify-end xl:pl-0">
             <AnimatePresence>
               {isVisible && (
                 <m.div
@@ -303,14 +307,14 @@ export default function Card() {
                   initial={{ opacity: 0, y: -10 }}
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: -10 }}
-                  className="lg:pb-16"
+                  className="xl:pb-16"
                 >
-                  <div className="text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 ">
-                    <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
+                  <div className="text-start items-center xl:items-start flex w-screen xl:w-auto px-8 xl:px-0 flex-row justify-between xl:flex-col pb-5 ">
+                    <h1 className="font-bold xl:pb-5 text-md pl-1 font-outfit">
                       GENRE
                     </h1>
                     <select
-                      className="w-[195px] lg:w-[297px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
+                      className="w-[195px] xl:w-[297px] xl:h-[46px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
                       onChange={(e) =>
                         setSelectedGenre(
                           e.target.value === "undefined"
@@ -329,8 +333,8 @@ export default function Card() {
                       })}
                     </select>
                   </div>
-                  <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 ">
-                    <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
+                  <div className="xl:hidden text-start items-center xl:items-start flex w-screen xl:w-auto px-8 xl:px-0 flex-row justify-between xl:flex-col pb-5 ">
+                    <h1 className="font-bold xl:pb-5 text-md pl-1 font-outfit">
                       TYPE
                     </h1>
                     <select
@@ -346,8 +350,8 @@ export default function Card() {
                     </select>
                   </div>
 
-                  <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col ">
-                    <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
+                  <div className="xl:hidden text-start items-center xl:items-start flex w-screen xl:w-auto px-8 xl:px-0 flex-row justify-between xl:flex-col ">
+                    <h1 className="font-bold xl:pb-5 text-md pl-1 font-outfit">
                       SORT
                     </h1>
                     <select
@@ -372,12 +376,12 @@ export default function Card() {
             <AnimatePresence>
               <div
                 key="card-keys"
-                className="grid pt-3 lg:grid-cols-6 justify-items-center grid-cols-2 xxs:grid-cols-3 w-screen px-2 lg:w-auto lg:gap-10 gap-2 lg:gap-y-24 gap-y-12 overflow-hidden"
+                className="grid pt-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-6 justify-items-center grid-cols-2 xxs:grid-cols-3 w-screen px-2 xl:w-auto xl:gap-10 gap-2 xl:gap-y-24 gap-y-12 overflow-hidden"
               >
                 {loading
                   ? ""
                   : !data?.length && (
-                      <div className="w-screen text-[#ff7f57] lg:col-start-3 col-start-2 items-center flex justify-center text-center font-bold font-karla lg:text-2xl">
+                      <div className="w-screen text-[#ff7f57] xl:col-start-3 col-start-2 items-center flex justify-center text-center font-bold font-karla xl:text-2xl">
                         Oops!<br></br> Nothing's Found...
                       </div>
                     )}
@@ -387,7 +391,7 @@ export default function Card() {
                       <m.div
                         initial={{ scale: 0.9 }}
                         animate={{ scale: 1, transition: { duration: 0.35 } }}
-                        className="w-[146px] xxs:w-[115px] xs:w-[135px] md:w-[185px]"
+                        className="w-[146px] xxs:w-[115px] xs:w-[135px] xl:w-[185px]"
                         key={index}
                       >
                         <Link
@@ -399,7 +403,7 @@ export default function Card() {
                           className=""
                         >
                           <Image
-                            className="object-cover bg-[#3B3C41] w-[146px] h-[208px] xxs:w-[115px] xxs:h-[163px] xs:w-[135px] xs:h-[192px] md:w-[185px] md:h-[265px] hover:scale-105 scale-100 transition-all cursor-pointer duration-200 ease-out rounded-[10px]"
+                            className="object-cover bg-[#3B3C41] w-[146px] h-[208px] xxs:w-[115px] xxs:h-[163px] xs:w-[135px] xs:h-[192px] xl:w-[185px] xl:h-[265px] hover:scale-105 scale-100 transition-all cursor-pointer duration-200 ease-out rounded-[10px]"
                             src={anime.coverImage.extraLarge}
                             alt={anime.title.userPreferred}
                             width={500}
@@ -407,7 +411,7 @@ export default function Card() {
                           />
                         </Link>
                         <Link href={`/anime/${anime.id}`}>
-                          <h1 className="font-outfit font-bold md:text-base text-[15px] pt-4 line-clamp-2">
+                          <h1 className="font-outfit font-bold xl:text-base text-[15px] pt-4 line-clamp-2">
                             {anime.status === "RELEASING" ? (
                               <span className="dots bg-green-500" />
                             ) : anime.status === "NOT_YET_RELEASED" ? (
@@ -416,7 +420,7 @@ export default function Card() {
                             {anime.title.userPreferred}
                           </h1>
                         </Link>
-                        <h2 className="font-outfit lg:text-[15px] text-[11px] font-light pt-2 text-[#8B8B8B]">
+                        <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
@@ -431,10 +435,10 @@ export default function Card() {
                       {[1, 2, 4, 5, 6, 7, 8].map((item) => (
                         <div
                           key={item}
-                          className="flex flex-col w-[135px] lg:w-[185px] gap-5"
+                          className="flex flex-col w-[135px] xl:w-[185px] gap-5"
                           style={{ scale: 0.98 }}
                         >
-                          <Skeleton className="h-[192px] w-[135px] lg:h-[265px] lg:w-[185px]" />
+                          <Skeleton className="h-[192px] w-[135px] xl:h-[265px] xl:w-[185px]" />
                           <Skeleton width={110} height={30} />
                         </div>
                       ))}
@@ -445,7 +449,7 @@ export default function Card() {
               {!loading && page > 10 && nextPage && (
                 <button
                   onClick={() => setPage((p) => p + 1)}
-                  className="bg-secondary md:w-[30%] w-[80%] h-10 rounded-md"
+                  className="bg-secondary xl:w-[30%] w-[80%] h-10 rounded-md"
                 >
                   Load More
                 </button>