Display Patch v3.5.4 - 1

> Now support more device sizes than before

10 files changed, 101 insertions, 103 deletions

diff --git a/components/footer.js b/components/footer.js
index 50c556a..db32d90 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -11,24 +11,24 @@ function Footer() {
   const [season, setSeason] = useState(getCurrentSeason());
 
   return (
-    <section className="text-[#dbdcdd] z-40 bg-[#0c0d10] md:flex md:h-[12rem] md:items-center md:justify-between">
-      <div className="mx-auto flex w-[80%] flex-col space-y-10 pb-6 md:flex-row md:items-center md:justify-between md:space-y-0 md:py-0">
+    <section className="text-[#dbdcdd] z-40 bg-[#0c0d10] lg:flex lg:h-[12rem] lg:items-center lg:justify-between">
+      <div className="mx-auto flex w-[80%] lg:w-[95%] xl:w-[80%] flex-col space-y-10 pb-6 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:py-0">
         <div className="flex items-center gap-24">
-          <div className="md:flex grid items-center md:gap-10 gap-3">
+          <div className="lg:flex grid items-center lg:gap-10 gap-3">
             {/* <h1 className="font-outfit text-[2.56rem]">moopa</h1> */}
             <h1 className="font-outfit text-[40px]">moopa</h1>
             <div>
-              <p className="flex items-center gap-1 font-karla md:text-[0.81rem] text-[0.7rem] text-[#CCCCCC]">
+              <p className="flex items-center gap-1 font-karla lg:text-[0.81rem] text-[0.7rem] text-[#CCCCCC]">
                 &copy; {new Date().getFullYear()} moopa.live | Website Made by
                 Factiven
               </p>
-              <p className="font-karla md:text-[0.8rem] text-[0.65rem] text-[#9c9c9c]  md:w-[520px] italic">
+              <p className="font-karla lg:text-[0.8rem] text-[0.65rem] text-[#9c9c9c]  lg:w-[520px] italic">
                 This site does not store any files on our server, we only linked
                 to the media which is hosted on 3rd party services.
               </p>
             </div>
           </div>
-          {/* <div className="lg:hidden md:block">
+          {/* <div className="lg:hidden lg:block">
             <Image
               src="https://i1210.photobucket.com/albums/cc417/kusanagiblog/NarutoVSSasuke.gif"
               alt="gambar"
@@ -38,8 +38,8 @@ function Footer() {
             />
           </div> */}
         </div>
-        <div className="flex flex-col gap-10 md:flex-row md:items-end md:gap-[9.06rem] text-[#a7a7a7] text-sm md:text-end">
-          <div className="flex flex-col gap-10 font-karla font-bold md:flex-row md:gap-[5.94rem]">
+        <div className="flex flex-col gap-10 lg:flex-row lg:items-end lg:gap-[9.06rem] text-[#a7a7a7] text-sm lg:text-end">
+          <div className="flex flex-col gap-10 font-karla font-bold lg:flex-row lg:gap-[5.94rem]">
             <ul className="flex flex-col gap-y-[0.7rem] ">
               <li className="cursor-pointer hover:text-action">
                 <Link
@@ -79,7 +79,7 @@ function Footer() {
                 <Link href="/dmca">DMCA</Link>
               </li>
               <li className="cursor-pointer hover:text-action">
-                <Link href="/contact">Contact</Link>
+                <Link href="/contact">Github</Link>
               </li>
             </ul>
           </div>
diff --git a/components/layout.js b/components/layout.js
index 280fbdb..bc55860 100644
--- a/components/layout.js
+++ b/components/layout.js
@@ -43,18 +43,18 @@ function Layout(props) {
       >
         {/* PC/Tablet */}
         <Navbar
-          className={`absolute z-50 hidden w-full duration-500 md:fixed md:top-0 md:block md:transition-all ${
+          className={`absolute z-50 hidden w-full duration-500 lg:fixed lg:top-0 lg:block lg:transition-all ${
             isAtTop
               ? `px-2 pt-2 transition-all duration-1000 ${props.navTop}`
               : isScrollingDown
-              ? "md:h-16 md:translate-y-[-100%] md:shadow-sm md:bg-[#0c0d10] "
-              : "md:h-16 md:translate-y-0 md:shadow-sm md:bg-[#0c0d10]"
+              ? "lg:h-16 lg:translate-y-[-100%] lg:shadow-sm lg:bg-[#0c0d10] "
+              : "lg:h-16 lg:translate-y-0 lg:shadow-sm lg:bg-[#0c0d10]"
           }`}
         />
 
         {/* Mobile */}
         <Navbar
-          className={`absolute z-50 w-full duration-300 md:fixed md:top-0 md:hidden md:transition-all`}
+          className={`absolute z-50 w-full duration-300 lg:fixed lg:top-0 lg:hidden lg:transition-all`}
         />
         <div className="grid items-center justify-center">{props.children}</div>
         <Footer />
diff --git a/components/navbar.js b/components/navbar.js
index b6dcb47..498007a 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -29,8 +29,8 @@ function Navbar(props) {
 
   return (
     <header className={`${props.className}`}>
-      <div className="flex h-16 w-auto items-center justify-between px-5 md:mx-auto md:w-[80%] md:px-0 text-[#dbdcdd]">
-        <div className="pb-2 font-outfit text-4xl font-semibold md:block text-white">
+      <div className="flex h-16 w-auto items-center justify-between px-5 lg:mx-auto lg:w-[80%] lg:px-0 text-[#dbdcdd]">
+        <div className="pb-2 font-outfit text-4xl font-semibold lg:block text-white">
           <Link href="/">moopa</Link>
         </div>
 
@@ -38,7 +38,7 @@ function Navbar(props) {
         {!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
@@ -65,7 +65,7 @@ function Navbar(props) {
           {isVisible && session && (
             <Link
               href={`/profile/${session?.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]"
             >
               <Image
                 src={session?.user.image.large}
@@ -77,7 +77,7 @@ function Navbar(props) {
             </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="">
@@ -222,8 +222,8 @@ function Navbar(props) {
           )}
         </div>
 
-        <nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 md:flex">
-          <ul className="hidden gap-10 font-roboto text-md md:flex items-center relative">
+        <nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 lg:flex">
+          <ul className="hidden gap-10 font-roboto text-md lg:flex items-center relative">
             <li>
               <Link
                 href="/"
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>
diff --git a/styles/globals.css b/styles/globals.css
index f2ea9d2..a26fbf3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,12 +3,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@media (max-width: 768px) {
-  svg {
-    height: 90%;
-  }
-}
-
 * {
   -webkit-tap-highlight-color: transparent;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index ce77ef5..d7c357b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,8 +10,8 @@ module.exports = {
   darkMode: "class",
   theme: {
     screens: {
-      xs: "475px",
-      xxs: "350px",
+      xs: "425px",
+      xxs: "375px",
       ...defaultTheme.screens,
     },
     extend: {