From 8ee1ff175473ca42db670387fa2f453e7963014c Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Thu, 31 Jul 2025 22:28:03 +0530
Subject: [PATCH] home page improved

---
 package.json                                  |   2 +
 src/App.jsx                                   |   4 +
 src/components/categorycard/CategoryCard.css  |  95 ++++++++++---
 src/components/categorycard/CategoryCard.jsx  | 126 ++++++++---------
 src/components/continue/ContinueWatching.jsx  |  10 +-
 src/components/schedule/Schedule.jsx          |  64 ++++-----
 src/components/schedule/schedule.css          |  21 ++-
 src/components/sidebar/Sidebar.jsx            |   2 +
 .../tabbed-anime/TabbedAnimeSection.jsx       |  72 ++++++++++
 src/components/topten/Topten.jsx              |  49 +++----
 src/components/trending/Trending.jsx          | 131 +++++++++---------
 src/pages/Home/Home.jsx                       |  51 ++-----
 src/pages/category/Category.jsx               |  11 --
 src/pages/watch/Watch.jsx                     |   3 -
 14 files changed, 371 insertions(+), 270 deletions(-)
 create mode 100644 src/components/tabbed-anime/TabbedAnimeSection.jsx

diff --git a/package.json b/package.json
index 0abc694..3e6c4ea 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@radix-ui/react-icons": "^1.3.0",
+    "@vercel/analytics": "^1.5.0",
+    "@vercel/speed-insights": "^1.2.0",
     "artplayer": "^5.2.3",
     "artplayer-plugin-chapter": "^1.0.0",
     "artplayer-plugin-hls-control": "^1.0.1",
diff --git a/src/App.jsx b/src/App.jsx
index fffc4a2..072492c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,8 @@
 import { useLocation } from "react-router-dom";
 import { useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
+import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/react';
 import { HomeInfoProvider } from "./context/HomeInfoContext";
 import Home from "./pages/Home/Home";
 import AnimeInfo from "./pages/animeInfo/AnimeInfo";
@@ -71,6 +73,8 @@ function App() {
           </Routes>
           {!isSplashScreen && <Footer />}
         </main>
+        <Analytics />
+        <SpeedInsights />
       </div>
     </HomeInfoProvider>
   );
diff --git a/src/components/categorycard/CategoryCard.css b/src/components/categorycard/CategoryCard.css
index 7766feb..91b2dc0 100644
--- a/src/components/categorycard/CategoryCard.css
+++ b/src/components/categorycard/CategoryCard.css
@@ -7,79 +7,132 @@
   right: 0;
   bottom: 0;
   background: linear-gradient(
-    to top,
-    rgba(18, 18, 18, 1) 0%,
-    rgba(18, 18, 18, 0.7) 20%,
-    rgba(18, 18, 18, 0) 60%,
-    rgba(18, 18, 18, 0.2) 100%
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.4) 50%,
+    rgba(0, 0, 0, 0.95) 100%
   );
   z-index: 50;
-  transition: all 0.3s ease-in-out;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 16px;
 }
 
 .group:hover .overlay {
   background: linear-gradient(
-    to top,
-    rgba(18, 18, 18, 0.95) 0%,
-    rgba(18, 18, 18, 0.8) 50%,
-    rgba(18, 18, 18, 0.6) 100%
+    180deg,
+    rgba(0, 0, 0, 0.2) 0%,
+    rgba(0, 0, 0, 0.6) 50%,
+    rgba(0, 0, 0, 0.98) 100%
   );
 }
 
 .dot {
-  width: 3px;
-  height: 3px;
+  width: 2px;
+  height: 2px;
   display: inline-block;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.4);
-  margin: 0 4px;
+  margin: 0 6px;
   position: relative;
   top: -1px;
 }
 
 /* Modern Card Styles */
 .category-card-container {
-  transition: transform 0.3s ease-in-out;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  border-radius: 16px;
+  overflow: hidden;
+  background: #1a1a1a;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
 }
 
 .category-card-container:hover {
   transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.category-card-container img {
+  border-radius: 16px;
+  transform: scale(1.01);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: brightness(0.95);
+}
+
+.category-card-container:hover img {
+  transform: scale(1.05);
+  filter: brightness(1.05);
 }
 
 .category-badge {
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   padding: 4px 8px;
   border-radius: 4px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.02em;
   transition: all 0.3s ease;
 }
 
 .category-badge:hover {
   background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.2);
 }
 
 .item-title {
-  font-weight: 500;
+  font-weight: 600;
   letter-spacing: 0.01em;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
+  font-size: 15px;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.95);
 }
 
 .item-title:hover {
   color: #ffffff;
-  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
 }
 
 .play-icon {
   opacity: 0;
-  transform: translate(-50%, -50%) scale(0.8);
-  transition: all 0.3s ease;
+  transform: translate(-50%, -50%) scale(0.9);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
 }
 
 .group:hover .play-icon {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
 }
+
+.info-container {
+  padding: 12px 16px 16px;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.95) 0%,
+    rgba(0, 0, 0, 0.8) 50%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transition: all 0.3s ease;
+}
+
+.group:hover .info-container {
+  padding-bottom: 20px;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.98) 0%,
+    rgba(0, 0, 0, 0.85) 50%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.meta-info {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+  font-weight: 500;
+}
diff --git a/src/components/categorycard/CategoryCard.jsx b/src/components/categorycard/CategoryCard.jsx
index d3a20a8..72f6668 100644
--- a/src/components/categorycard/CategoryCard.jsx
+++ b/src/components/categorycard/CategoryCard.jsx
@@ -87,19 +87,20 @@ const CategoryCard = React.memo(
     };
     return (
       <div className={`w-full ${className}`}>
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px] capitalize tracking-wide">
+        <div className="flex items-center justify-between mb-8">
+          <h1 className="font-semibold text-2xl text-white max-[478px]:text-[18px] capitalize tracking-wide">
             {label}
           </h1>
           {showViewMore && (
             <Link
               to={`/${path}`}
-              className="flex w-fit items-baseline h-fit rounded-3xl gap-x-1 group"
+              className="flex items-center gap-x-1 py-1 px-2 -mr-2 rounded-md
+                text-[13px] font-medium text-[#ffffff80] hover:text-white
+                transition-all duration-300 group"
             >
-              <p className="text-gray-300 text-[12px] font-medium h-fit leading-0 group-hover:text-white transition-all ease-out">
-                View more
-              </p>
-              <FaChevronRight className="text-gray-300 text-[10px] group-hover:text-white transition-all ease-out" />
+              View all
+              <FaChevronRight className="text-[10px] transform transition-transform duration-300 
+                group-hover:translate-x-0.5" />
             </Link>
           )}
         </div>
@@ -115,12 +116,12 @@ const CategoryCard = React.memo(
               {itemsToRender.firstRow.map((item, index) => (
                 <div
                   key={index}
-                  className="flex flex-col transition-transform duration-300 ease-in-out category-card-container"
+                  className="flex flex-col category-card-container"
                   style={{ height: "fit-content" }}
                   ref={(el) => (cardRefs.current[index] = el)}
                 >
                   <div
-                    className="w-full relative group hover:cursor-pointer"
+                    className="w-full relative group hover:cursor-pointer overflow-hidden rounded-xl"
                     onClick={() =>
                       navigate(
                         `${
@@ -139,51 +140,72 @@ const CategoryCard = React.memo(
                         className="text-[40px] text-white absolute top-1/2 left-1/2 play-icon z-[10000]"
                       />
                     )}
-
                     <div className="overlay"></div>
-                    <div className="overflow-hidden">
+                    <div className="overflow-hidden rounded-xl">
                       <img
                         src={`${item.poster}`}
                         alt={item.title}
-                        className={`w-full h-[320px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] group-hover:blur-[7px] transform transition-all duration-300 ease-in-out ultra-wide:h-[400px] ${cardStyle}`}
+                        className={`w-full h-[320px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] transform transition-all duration-300 ease-in-out ultra-wide:h-[400px] ${cardStyle}`}
                       />
                     </div>
                     {(item.tvInfo?.rating === "18+" ||
                       item?.adultContent === true) && (
-                      <div className="text-white px-2 py-1 rounded-md bg-black/50 backdrop-blur-sm border border-white/10 absolute top-2 left-2 flex items-center justify-center text-[12px] font-medium">
+                      <div className="text-white px-3 py-1 rounded-lg bg-black/40 backdrop-blur-md border border-white/10 absolute top-3 left-3 flex items-center justify-center text-[12px] font-medium">
                         18+
                       </div>
                     )}
-                    <div className="absolute left-2 bottom-3 flex items-center justify-center w-fit space-x-2 z-[100] max-[270px]:flex-col max-[270px]:gap-y-[3px]">
-                      {item.tvInfo?.sub && (
-                        <div className="category-badge flex space-x-1 justify-center items-center">
-                          <FontAwesomeIcon
-                            icon={faClosedCaptioning}
-                            className="text-[12px] text-white/90"
-                          />
-                          <p className="text-[12px] text-white/90">
-                            {item.tvInfo.sub}
-                          </p>
+                    <div className="info-container">
+                      <div className="flex items-center justify-start w-fit space-x-2 z-[100] max-[270px]:flex-col max-[270px]:gap-y-[3px]">
+                        {item.tvInfo?.sub && (
+                          <div className="category-badge flex space-x-1 justify-center items-center">
+                            <FontAwesomeIcon
+                              icon={faClosedCaptioning}
+                              className="text-[12px] text-white/90"
+                            />
+                            <p className="text-[12px] text-white/90">
+                              {item.tvInfo.sub}
+                            </p>
+                          </div>
+                        )}
+                        {item.tvInfo?.dub && (
+                          <div className="category-badge flex space-x-1 justify-center items-center">
+                            <FontAwesomeIcon
+                              icon={faMicrophone}
+                              className="text-[12px] text-white/90"
+                            />
+                            <p className="text-[12px] text-white/90">
+                              {item.tvInfo.dub}
+                            </p>
+                          </div>
+                        )}
+                        {item.tvInfo?.eps && (
+                          <div className="category-badge flex space-x-1 justify-center items-center">
+                            <p className="text-[12px] text-white/90">
+                              {item.tvInfo.eps}
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                      <Link
+                        to={`/${item.id}`}
+                        className="text-white font-medium mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1 block"
+                      >
+                        {language === "EN" ? item.title : item.japanese_title}
+                      </Link>
+                      <div className="flex items-center gap-x-2 w-full mt-2 overflow-hidden">
+                        <div className="text-gray-300 text-[13px] text-nowrap overflow-hidden text-ellipsis font-medium">
+                          {item.tvInfo.showType.split(" ").shift()}
                         </div>
-                      )}
-                      {item.tvInfo?.dub && (
-                        <div className="category-badge flex space-x-1 justify-center items-center">
-                          <FontAwesomeIcon
-                            icon={faMicrophone}
-                            className="text-[12px] text-white/90"
-                          />
-                          <p className="text-[12px] text-white/90">
-                            {item.tvInfo.dub}
-                          </p>
+                        <div className="dot"></div>
+                        <div className="text-gray-300 text-[13px] text-nowrap overflow-hidden text-ellipsis font-medium">
+                          {item.tvInfo?.duration === "m" ||
+                          item.tvInfo?.duration === "?" ||
+                          item.duration === "m" ||
+                          item.duration === "?"
+                            ? "N/A"
+                            : item.tvInfo?.duration || item.duration || "N/A"}
                         </div>
-                      )}
-                      {item.tvInfo?.eps && (
-                        <div className="category-badge flex space-x-1 justify-center items-center">
-                          <p className="text-[12px] text-white/90">
-                            {item.tvInfo.eps}
-                          </p>
-                        </div>
-                      )}
+                      </div>
                     </div>
                     {hoveredItem === item.id + index &&
                       window.innerWidth > 1024 && (
@@ -198,31 +220,11 @@ const CategoryCard = React.memo(
                         </div>
                       )}
                   </div>
-                  <Link
-                    to={`/${item.id}`}
-                    className="text-gray-100 font-medium mt-2 item-title hover:text-white hover:cursor-pointer line-clamp-1"
-                  >
-                    {language === "EN" ? item.title : item.japanese_title}
-                  </Link>
                   {item.description && (
-                    <div className="line-clamp-3 text-[13px] font-light text-gray-400 mt-1 max-[1200px]:hidden">
+                    <div className="line-clamp-3 text-[13px] font-light text-gray-400 mt-3 max-[1200px]:hidden">
                       {item.description}
                     </div>
                   )}
-                  <div className="flex items-center gap-x-2 w-full mt-2 overflow-hidden">
-                    <div className="text-gray-500 text-[13px] text-nowrap overflow-hidden text-ellipsis font-medium">
-                      {item.tvInfo.showType.split(" ").shift()}
-                    </div>
-                    <div className="dot"></div>
-                    <div className="text-gray-500 text-[13px] text-nowrap overflow-hidden text-ellipsis font-medium">
-                      {item.tvInfo?.duration === "m" ||
-                      item.tvInfo?.duration === "?" ||
-                      item.duration === "m" ||
-                      item.duration === "?"
-                        ? "N/A"
-                        : item.tvInfo?.duration || item.duration || "N/A"}
-                    </div>
-                  </div>
                 </div>
               ))}
             </div>
diff --git a/src/components/continue/ContinueWatching.jsx b/src/components/continue/ContinueWatching.jsx
index 530dbef..3d18696 100644
--- a/src/components/continue/ContinueWatching.jsx
+++ b/src/components/continue/ContinueWatching.jsx
@@ -46,10 +46,10 @@ const ContinueWatching = () => {
         </div>
 
         <div className="flex gap-x-2 pr-2 max-[350px]:hidden">
-          <button className="btn-prev bg-gray-700 text-white p-3 rounded-full hover:bg-gray-500 transition max-[768px]:p-2">
+          <button className="continue-btn-prev bg-gray-700 text-white p-3 rounded-full hover:bg-gray-500 transition max-[768px]:p-2">
             <FaChevronLeft className="text-xs" />
           </button>
-          <button className="btn-next bg-gray-700 text-white p-3 rounded-full hover:bg-gray-500 transition max-[768px]:p-2">
+          <button className="continue-btn-next bg-gray-700 text-white p-3 rounded-full hover:bg-gray-500 transition max-[768px]:p-2">
             <FaChevronRight className="text-xs" />
           </button>
         </div>
@@ -70,11 +70,11 @@ const ContinueWatching = () => {
           }}
           modules={[Navigation]}
           navigation={{
-            nextEl: ".btn-next",
-            prevEl: ".btn-prev",
+            nextEl: ".continue-btn-next",
+            prevEl: ".continue-btn-prev",
           }}
         >
-          {memoizedWatchList.map((item, index) => (
+          {memoizedWatchList.slice().reverse().map((item, index) => (
             <SwiperSlide
               key={index}
               className="text-center flex justify-center items-center"
diff --git a/src/components/schedule/Schedule.jsx b/src/components/schedule/Schedule.jsx
index 200f6a6..ad50748 100644
--- a/src/components/schedule/Schedule.jsx
+++ b/src/components/schedule/Schedule.jsx
@@ -114,28 +114,28 @@ const Schedule = () => {
 
   return (
     <>
-      <div className="w-full mt-[60px] max-[480px]:mt-[40px]">
+      <div className="w-full mt-8 max-[480px]:mt-6">
         <div className="flex items-center justify-between max-[570px]:flex-col max-[570px]:items-start max-[570px]:gap-y-2">
-          <div className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px]">
+          <div className="font-bold text-2xl text-white max-[478px]:text-[18px]">
             Estimated Schedule
           </div>
-          <p className="leading-[28px] px-[10px] bg-white text-black rounded-full my-[6px] text-[16px] font-bold max-[478px]:text-[12px] max-[275px]:text-[10px]">
+          <p className="leading-[28px] px-3 bg-zinc-800 text-white rounded-md text-[14px] font-medium max-[478px]:text-[12px] max-[275px]:text-[10px]">
             ({GMTOffset}) {currentTime.toLocaleDateString()}{" "}
             {currentTime.toLocaleTimeString()}
           </p>
         </div>
       </div>
-      <div className="w-full overflow-x-scroll space-x-4 scrollbar-hide pt-10 px-6 max-[480px]:px-4 max-[478px]:pt-4">
+      <div className="w-full overflow-x-scroll space-x-4 scrollbar-hide pt-6 px-4 max-[480px]:px-2 max-[478px]:pt-4">
         <div className="relative w-full">
           <Swiper
             slidesPerView={3}
             spaceBetween={2}
             breakpoints={{
-              250: { slidesPerView: 3, spaceBetween: 10 },
-              640: { slidesPerView: 4, spaceBetween: 10 },
-              768: { slidesPerView: 5, spaceBetween: 10 },
-              1024: { slidesPerView: 7, spaceBetween: 10 },
-              1300: { slidesPerView: 7, spaceBetween: 15 },
+              250: { slidesPerView: 3, spaceBetween: 8 },
+              640: { slidesPerView: 4, spaceBetween: 8 },
+              768: { slidesPerView: 5, spaceBetween: 8 },
+              1024: { slidesPerView: 7, spaceBetween: 8 },
+              1300: { slidesPerView: 7, spaceBetween: 8 },
             }}
             modules={[Pagination, Navigation]}
             navigation={{
@@ -150,20 +150,20 @@ const Schedule = () => {
                   <div
                     ref={(el) => (cardRefs.current[index] = el)}
                     onClick={() => toggleActive(index)}
-                    className={`h-[70px] flex flex-col justify-center items-center w-full text-center rounded-xl shadow-lg cursor-pointer ${
+                    className={`h-[60px] flex flex-col justify-center items-center w-full text-center rounded-lg cursor-pointer transition-all duration-200 ${
                       currentActiveIndex === index
-                        ? "bg-[#ffbade] text-black"
-                        : "bg-white bg-opacity-5 text-[#ffffff] hover:bg-[#373646] transition-all duration-300 ease-in-out"
+                        ? "bg-white text-black"
+                        : "bg-zinc-800 text-white hover:bg-zinc-700"
                     }`}
                   >
-                    <div className="text-[18px] font-bold max-[400px]:text-[14px] max-[350px]:text-[12px]">
+                    <div className="text-[16px] font-bold max-[400px]:text-[14px] max-[350px]:text-[12px]">
                       {date.dayname}
                     </div>
                     <div
-                      className={`text-[14px] max-[400px]:text-[12px] ${
+                      className={`text-[13px] max-[400px]:text-[11px] ${
                         currentActiveIndex === index
-                          ? "text-black"
-                          : "text-gray-400"
+                          ? "text-zinc-800"
+                          : "text-zinc-400"
                       } max-[350px]:text-[10px]`}
                     >
                       {date.monthName} {date.day}
@@ -172,28 +172,28 @@ const Schedule = () => {
                 </SwiperSlide>
               ))}
           </Swiper>
-          <button className="next absolute top-1/2 right-[-15px] transform -translate-y-1/2 flex justify-center items-center cursor-pointer">
+          <button className="next absolute top-1/2 right-[-12px] transform -translate-y-1/2 flex justify-center items-center cursor-pointer">
             <FaChevronRight className="text-[12px]" />
           </button>
-          <button className="prev absolute top-1/2 left-[-15px] transform -translate-y-1/2 flex justify-center items-center cursor-pointer">
+          <button className="prev absolute top-1/2 left-[-12px] transform -translate-y-1/2 flex justify-center items-center cursor-pointer">
             <FaChevronLeft className="text-[12px]" />
           </button>
         </div>
       </div>
       {loading ? (
-        <div className="w-full h-[70px] flex justify-center items-center">
+        <div className="w-full h-[60px] flex justify-center items-center">
           <BouncingLoader />
         </div>
       ) : !scheduleData || scheduleData.length === 0 ? (
-        <div className="w-full h-[70px] flex justify-center items-center mt-5 text-xl">
+        <div className="w-full h-[60px] flex justify-center items-center mt-4 text-lg text-zinc-400">
           No data to display
         </div>
       ) : error ? (
-        <div className="w-full h-[70px] flex justify-center items-center mt-5 text-xl">
+        <div className="w-full h-[60px] flex justify-center items-center mt-4 text-lg text-zinc-400">
           Something went wrong
         </div>
       ) : (
-        <div className="flex flex-col mt-5 items-start">
+        <div className="flex flex-col mt-4 items-start">
           {(showAll
             ? scheduleData
             : Array.isArray(scheduleData)
@@ -203,31 +203,31 @@ const Schedule = () => {
             <Link
               to={`/${item.id}`}
               key={idx}
-              className="w-full flex justify-between py-4 border-[#FFFFFF0D] border-b-[1px] group cursor-pointer max-[325px]:py-2"
+              className="w-full flex justify-between py-3 border-zinc-800 border-b-[1px] group cursor-pointer hover:bg-zinc-900/50 px-2 transition-all duration-200 max-[325px]:py-2"
             >
-              <div className="flex items-center max-w-[500px] gap-x-7 max-[400px]:gap-x-2">
-                <div className="text-lg font-semibold text-[#ffffff59] group-hover:text-[#ffbade] transition-all duration-300 ease-in-out max-[600px]:text-[14px] max-[275px]:text-[12px]">
+              <div className="flex items-center max-w-[500px] gap-x-4 max-[400px]:gap-x-2">
+                <div className="text-base font-medium text-zinc-500 group-hover:text-white transition-all duration-200 max-[600px]:text-[14px] max-[275px]:text-[12px]">
                   {item.time || "N/A"}
                 </div>
-                <h3 className="text-[17px] font-semibold line-clamp-1 group-hover:text-[#ffbade] transition-all duration-300 ease-in-out max-[600px]:text-[14px] max-[275px]:text-[12px]">
+                <h3 className="text-[16px] font-medium line-clamp-1 group-hover:text-white transition-all duration-200 max-[600px]:text-[14px] max-[275px]:text-[12px]">
                   {item.title || "N/A"}
                 </h3>
               </div>
-              <button className="max-w-[150px] flex items-center py-1 px-4 rounded-lg gap-x-2 group-hover:bg-[#ffbade] transition-all duration-300 ease-in-out">
+              <div className="flex items-center gap-x-2 py-1 px-3 rounded-md bg-zinc-800 group-hover:bg-white transition-all duration-200">
                 <FontAwesomeIcon
                   icon={faPlay}
-                  className="mt-[1px] text-[10px] max-[320px]:text-[8px] group-hover:text-black transition-all duration-300 ease-in-out"
+                  className="mt-[1px] text-[10px] max-[320px]:text-[8px] text-zinc-400 group-hover:text-black"
                 />
-                <p className="text-[14px] text-white group-hover:text-black transition-all duration-300 ease-in-out max-[275px]:text-[12px]">
-                  Episode {item.episode_no || "N/A"}
+                <p className="text-[13px] text-zinc-400 group-hover:text-black max-[275px]:text-[12px]">
+                  EP {item.episode_no || "N/A"}
                 </p>
-              </button>
+              </div>
             </Link>
           ))}
           {scheduleData.length > 7 && (
             <button
               onClick={toggleShowAll}
-              className="text-white py-4 hover:text-[#ffbade] font-semibold transition-all duration-300 ease-in-out max-sm:text-[13px]"
+              className="text-zinc-400 py-3 hover:text-white font-medium transition-all duration-200 max-sm:text-[13px]"
             >
               {showAll ? "Show Less" : "Show More"}
             </button>
diff --git a/src/components/schedule/schedule.css b/src/components/schedule/schedule.css
index 440906f..14612f2 100644
--- a/src/components/schedule/schedule.css
+++ b/src/components/schedule/schedule.css
@@ -1,11 +1,18 @@
 .next,
 .prev {
-  width: 30px;
-  height: 30px;
-  border-radius: 100%;
-  background-color: white;
-  color: black;
-  font-size: 13px;
-  padding: 10px;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background-color: rgb(39 39 42);
+  color: rgb(161 161 170);
+  font-size: 12px;
+  padding: 6px;
   z-index: 10;
+  transition: all 0.2s;
+}
+
+.next:hover,
+.prev:hover {
+  background-color: rgb(63 63 70);
+  color: white;
 }
diff --git a/src/components/sidebar/Sidebar.jsx b/src/components/sidebar/Sidebar.jsx
index 37e7b5c..b463124 100644
--- a/src/components/sidebar/Sidebar.jsx
+++ b/src/components/sidebar/Sidebar.jsx
@@ -8,6 +8,8 @@ import "./Sidebar.css";
 
 const MENU_ITEMS = [
   { name: "Home", path: "/home", icon: faHome },
+  { name: "Recently Added", path: "/recently-added", icon: faCirclePlay },
+  { name: "Top Upcoming", path: "/top-upcoming", icon: faFilePen },
   { name: "Subbed Anime", path: "/subbed-anime", icon: faFilePen },
   { name: "Dubbed Anime", path: "/dubbed-anime", icon: faPlay },
   { name: "Most Popular", path: "/most-popular", icon: faFire },
diff --git a/src/components/tabbed-anime/TabbedAnimeSection.jsx b/src/components/tabbed-anime/TabbedAnimeSection.jsx
new file mode 100644
index 0000000..e1c8416
--- /dev/null
+++ b/src/components/tabbed-anime/TabbedAnimeSection.jsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import CategoryCard from "@/src/components/categorycard/CategoryCard.jsx";
+import { Link } from "react-router-dom";
+import { FaChevronRight } from "react-icons/fa";
+
+function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, className = "" }) {
+  const [activeTab, setActiveTab] = useState("airing");
+
+  const tabs = [
+    { id: "airing", label: "Top Airing", data: topAiring, path: "top-airing" },
+    { id: "favorite", label: "Most Favorite", data: mostFavorite, path: "most-favorite" },
+    { id: "completed", label: "Latest Completed", data: latestCompleted, path: "completed" },
+  ];
+
+  const activeTabData = tabs.find((tab) => tab.id === activeTab);
+
+  return (
+    <div className={`w-full ${className}`}>
+      <div className="flex justify-between items-center border-b border-[#ffffff1a] relative">
+        <div className="flex">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`relative px-6 py-4 text-[15px] font-medium transition-all duration-300 
+                ${activeTab === tab.id 
+                  ? "text-white after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-primary after:rounded-t-full"
+                  : "text-[#ffffff80] hover:text-white"
+                }
+                before:absolute before:bottom-0 before:left-1/2 before:w-0 before:h-[2px] before:bg-[#ffffff40]
+                before:transition-all before:duration-300 before:-translate-x-1/2
+                hover:before:w-full
+                group
+              `}
+            >
+              <span className="relative z-10 transition-transform duration-300 group-hover:transform group-hover:translate-y-[-1px]">
+                {tab.label}
+              </span>
+            </button>
+          ))}
+        </div>
+        <Link
+          to={`/${activeTabData.path}`}
+          className="flex items-center gap-x-1 py-1 px-2 -mr-2 rounded-md
+            text-[13px] font-medium text-[#ffffff80] hover:text-white
+            transition-all duration-300 group"
+        >
+          View all
+          <FaChevronRight className="text-[10px] transform transition-transform duration-300 
+            group-hover:translate-x-0.5" />
+        </Link>
+      </div>
+
+      <CategoryCard
+        data={activeTabData.data}
+        path={activeTabData.path}
+        limit={12}
+        showViewMore={false}
+      />
+    </div>
+  );
+}
+
+TabbedAnimeSection.propTypes = {
+  topAiring: PropTypes.array.isRequired,
+  mostFavorite: PropTypes.array.isRequired,
+  latestCompleted: PropTypes.array.isRequired,
+  className: PropTypes.string,
+};
+
+export default TabbedAnimeSection; 
\ No newline at end of file
diff --git a/src/components/topten/Topten.jsx b/src/components/topten/Topten.jsx
index 6b54316..169fb0e 100644
--- a/src/components/topten/Topten.jsx
+++ b/src/components/topten/Topten.jsx
@@ -49,19 +49,17 @@ function Topten({ data, className }) {
   };
 
   return (
-    <div className={`flex flex-col space-y-6 ${className}`}>
+    <div className={`flex flex-col space-y-4 ${className}`}>
       <div className="flex justify-between items-center max-[350px]:flex-col max-[350px]:gap-y-2 max-[350px]:items-start">
-        <h1 className="font-bold text-2xl text-[#ffbade]">Top 10</h1>
-        <ul className="flex justify-between w-fit bg-[#373646] rounded-[4px] text-sm font-bold">
+        <h1 className="font-bold text-2xl text-white tracking-tight">Top 10</h1>
+        <ul className="flex justify-between w-fit bg-[#1a1a1a] rounded-lg overflow-hidden shadow-lg">
           {["today", "week", "month"].map((period) => (
             <li
               key={period}
-              className={`cursor-pointer p-2 px-3 ${
+              className={`cursor-pointer p-1.5 px-4 transition-all duration-200 ${
                 activePeriod === period
-                  ? "bg-[#ffbade] text-[#555462]"
-                  : "text-white hover:text-[#ffbade]"
-              } ${period === "today" ? "rounded-l-[4px]" : ""} ${
-                period === "month" ? "rounded-r-[4px]" : ""
+                  ? "bg-white text-black font-medium"
+                  : "text-gray-400 hover:text-white hover:bg-[#2a2a2a]"
               }`}
               onClick={() => handlePeriodChange(period)}
             >
@@ -71,19 +69,19 @@ function Topten({ data, className }) {
         </ul>
       </div>
 
-      <div className="flex flex-col space-y-4 bg-[#2B2A3C] p-4 pt-8">
+      <div className="flex flex-col space-y-3 bg-[#1a1a1a] p-3 pt-6 rounded-lg shadow-lg">
         {currentData &&
           currentData.map((item, index) => (
             <div
               key={index}
-              className="flex items-center gap-x-4"
+              className="flex items-center gap-x-3 group"
               ref={(el) => (cardRefs.current[index] = el)}
             >
               <h1
-                className={`font-bold text-2xl ${
+                className={`font-bold text-2xl transition-colors ${
                   index < 3
-                    ? "pb-1 text-white border-b-[3px] border-[#ffbade]"
-                    : "text-[#777682]"
+                    ? "text-white border-b-2 border-white pb-0.5"
+                    : "text-gray-600"
                 } max-[350px]:hidden`}
               >
                 {`${index + 1 < 10 ? "0" : ""}${index + 1}`}
@@ -92,16 +90,15 @@ function Topten({ data, className }) {
                 style={{
                   borderBottom:
                     index + 1 < 10
-                      ? "1px solid rgba(255, 255, 255, .075)"
+                      ? "1px solid rgba(255, 255, 255, .1)"
                       : "none",
                 }}
-                className="flex pb-4 relative container items-center"
+                className="flex pb-3 relative container items-center group-hover:bg-[#2a2a2a] transition-colors duration-200 rounded-lg p-1.5"
               >
-                {/* Image with tooltip behavior */}
                 <img
                   src={`${item.poster}`}
                   alt={item.title}
-                  className="w-[60px] h-[75px] rounded-md object-cover flex-shrink-0 cursor-pointer"
+                  className="w-[55px] h-[70px] rounded-lg object-cover flex-shrink-0 cursor-pointer shadow-md transition-transform duration-200 group-hover:scale-[1.02]"
                   onClick={() => navigate(`/watch/${item.id}`)}
                   onMouseEnter={() => handleMouseEnter(item, index)}
                   onMouseLeave={handleMouseLeave}
@@ -132,33 +129,33 @@ function Topten({ data, className }) {
                     </div>
                   )}
 
-                <div className="flex flex-col ml-4 space-y-2">
+                <div className="flex flex-col ml-3 space-y-1.5">
                   <Link
                     to={`/${item.id}`}
-                    className="text-[1em] font-[500] hover:cursor-pointer hover:text-[#ffbade] transform transition-all ease-out line-clamp-1 max-[478px]:line-clamp-2 max-[478px]:text-[14px]"
+                    className="text-[0.95em] font-medium text-gray-200 hover:text-white transform transition-all ease-out line-clamp-1 max-[478px]:line-clamp-2 max-[478px]:text-[14px]"
                     onClick={() => handleNavigate(item.id)}
                   >
                     {language === "EN" ? item.title : item.japanese_title}
                   </Link>
-                  <div className="flex flex-wrap items-center w-fit space-x-1 max-[350px]:gap-y-[3px]">
+                  <div className="flex flex-wrap items-center w-fit space-x-2 max-[350px]:gap-y-[3px]">
                     {item.tvInfo?.sub && (
-                      <div className="flex space-x-1 justify-center items-center bg-[#B0E3AF] rounded-[4px] px-[4px] text-black py-[2px]">
+                      <div className="flex space-x-1 justify-center items-center bg-white bg-opacity-10 backdrop-blur-sm rounded-md px-1.5 py-0.5 transition-colors duration-200 hover:bg-opacity-20">
                         <FontAwesomeIcon
                           icon={faClosedCaptioning}
-                          className="text-[12px]"
+                          className="text-[11px] text-gray-300"
                         />
-                        <p className="text-[12px] font-bold">
+                        <p className="text-[11px] font-medium text-gray-300">
                           {item.tvInfo.sub}
                         </p>
                       </div>
                     )}
                     {item.tvInfo?.dub && (
-                      <div className="flex space-x-1 justify-center items-center bg-[#B9E7FF] rounded-[4px] px-[8px] text-black py-[2px]">
+                      <div className="flex space-x-1 justify-center items-center bg-white bg-opacity-10 backdrop-blur-sm rounded-md px-1.5 py-0.5 transition-colors duration-200 hover:bg-opacity-20">
                         <FontAwesomeIcon
                           icon={faMicrophone}
-                          className="text-[12px]"
+                          className="text-[11px] text-gray-300"
                         />
-                        <p className="text-[12px] font-bold">
+                        <p className="text-[11px] font-medium text-gray-300">
                           {item.tvInfo.dub}
                         </p>
                       </div>
diff --git a/src/components/trending/Trending.jsx b/src/components/trending/Trending.jsx
index dd9ea4f..b70e866 100644
--- a/src/components/trending/Trending.jsx
+++ b/src/components/trending/Trending.jsx
@@ -1,74 +1,79 @@
-import { Pagination, Navigation } from "swiper/modules";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 import { useLanguage } from "@/src/context/LanguageContext";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faClosedCaptioning,
+  faMicrophone,
+  faFire
+} from "@fortawesome/free-solid-svg-icons";
 
-const Trending = ({ trending }) => {
+const Trending = ({ trending, className }) => {
   const { language } = useLanguage();
-  const navigate = useNavigate();
+
   return (
-    <div className="mt-6 max-[1200px]:px-4 max-md:px-0">
-      <h1 className="text-[#ffbade] text-2xl font-bold max-md:pl-4">
-        Trending
-      </h1>
-      <div className="pr-[60px] relative mx-auto overflow-hidden z-[1] mt-6 max-[759px]:pr-0">
-        <Swiper
-          className="w-full h-full"
-          slidesPerView={3}
-          spaceBetween={2}
-          breakpoints={{
-            479: { spaceBetween: 15 },
-            575: { spaceBetween: 15 },
-            640: { slidesPerView: 3, spaceBetween: 15 },
-            900: { slidesPerView: 4, spaceBetween: 15 },
-            1300: { slidesPerView: 6, spaceBetween: 15 },
-          }}
-          modules={[Pagination, Navigation]}
-          navigation={{
-            nextEl: ".btn-next",
-            prevEl: ".btn-prev",
-          }}
-        >
-          {trending &&
-            trending.map((item, idx) => (
-              <SwiperSlide
-                key={idx}
-                className="text-center flex text-[18px] justify-center items-center"
-                onClick={() => navigate(`/watch/${item.id}`)}
+    <div className={`bg-[#141414] rounded-lg p-6 ${className}`}>
+      <div className="flex items-center gap-2 mb-4">
+        <FontAwesomeIcon icon={faFire} className="text-white/90" />
+        <h2 className="text-xl font-semibold text-white">Trending Now</h2>
+      </div>
+      <div className="flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded">
+        {trending &&
+          trending.map((item, index) => (
+            <div key={index} className="group">
+              <Link
+                to={`/${item.id}`}
+                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+                className="block"
               >
-                <div className="w-full h-auto pb-[115%] relative inline-block overflow-hidden max-[575px]:pb-[150%]">
-                  <div className="absolute left-0 top-0 bottom-0 overflow-hidden w-[40px] text-center font-semibold bg-[#201F31] max-[575px]:top-0 max-[575px]:h-[30px] max-[575px]:z-[9] max-[575px]:bg-white">
-                    <span className="absolute left-0 right-0 bottom-0 text-[24px] leading-[1.1em] text-center z-[9] transform -rotate-90 max-[575px]:transform max-[575px]:rotate-0 max-[575px]:text-[#111] max-[575px]:text-[18px] max-[575px]:leading-[30px]">
-                      {item.number}
-                    </span>
-                    <div className="w-[150px] h-fit text-left transform -rotate-90 absolute bottom-[100px] left-[-55px] leading-[40px] text-ellipsis whitespace-nowrap overflow-hidden text-white text-[16px] font-medium">
-                      {language === "EN" ? item.title : item.japanese_title}
+                <div className="flex items-start gap-3 p-2 rounded-lg transition-colors hover:bg-[#1a1a1a]">
+                  <div className="relative">
+                    <img
+                      src={item.poster}
+                      alt={item.title}
+                      className="w-[50px] h-[70px] rounded object-cover"
+                    />
+                    <div className="absolute top-0 left-0 bg-white/90 text-black text-xs font-bold px-1.5 rounded-br">
+                      #{index + 1}
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-1.5 flex-1 min-w-0">
+                    <span className="text-sm font-medium text-gray-200 group-hover:text-white transition-colors line-clamp-2">
+                      {language === "EN" ? item.title : item.japanese_title}
+                    </span>
+                    <div className="flex flex-wrap items-center gap-2">
+                      {item.tvInfo?.sub && (
+                        <div className="flex items-center gap-1 px-1.5 py-0.5 bg-[#2a2a2a] rounded text-gray-300">
+                          <FontAwesomeIcon
+                            icon={faClosedCaptioning}
+                            className="text-[10px]"
+                          />
+                          <span className="text-[10px] font-medium">
+                            {item.tvInfo.sub}
+                          </span>
+                        </div>
+                      )}
+                      {item.tvInfo?.dub && (
+                        <div className="flex items-center gap-1 px-1.5 py-0.5 bg-[#2a2a2a] rounded text-gray-300">
+                          <FontAwesomeIcon
+                            icon={faMicrophone}
+                            className="text-[10px]"
+                          />
+                          <span className="text-[10px] font-medium">
+                            {item.tvInfo.dub}
+                          </span>
+                        </div>
+                      )}
+                      {item.tvInfo?.showType && (
+                        <span className="text-xs text-gray-400">
+                          {item.tvInfo.showType}
+                        </span>
+                      )}
                     </div>
                   </div>
-                  <Link
-                    to={`/${item.id}`}
-                    className="inline-block bg-[#2a2c31] absolute w-auto left-[40px] right-0 top-0 bottom-0 max-[575px]:left-0 max-[575px]:top-0 max-[575px]:bottom-0"
-                  >
-                    <img
-                      src={`${item.poster}`}
-                      alt={item.title}
-                      className="block w-full h-full object-cover hover:cursor-pointer"
-                      title={item.title}
-                    />
-                  </Link>
                 </div>
-              </SwiperSlide>
-            ))}
-        </Swiper>
-        <div className="absolute top-0 right-0 bottom-0 w-[45px] flex flex-col space-y-2 max-[759px]:hidden">
-          <div className="btn-next bg-[#383747] h-[50%] flex justify-center items-center rounded-[8px] cursor-pointer transition-all duration-300 ease-out hover:bg-[#ffbade] hover:text-[#383747]">
-            <FaChevronRight />
-          </div>
-          <div className="btn-prev bg-[#383747] h-[50%] flex justify-center items-center rounded-[8px] cursor-pointer transition-all duration-300 ease-out hover:bg-[#ffbade] hover:text-[#383747]">
-            <FaChevronLeft />
-          </div>
-        </div>
+              </Link>
+            </div>
+          ))}
       </div>
     </div>
   );
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 0557494..e6af014 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,7 +1,6 @@
 import website_name from "@/src/config/website.js";
 import Spotlight from "@/src/components/spotlight/Spotlight.jsx";
 import Trending from "@/src/components/trending/Trending.jsx";
-import Cart from "@/src/components/cart/Cart.jsx";
 import CategoryCard from "@/src/components/categorycard/CategoryCard.jsx";
 import Genre from "@/src/components/genres/Genre.jsx";
 import Topten from "@/src/components/topten/Topten.jsx";
@@ -10,6 +9,7 @@ import Error from "@/src/components/error/Error.jsx";
 import { useHomeInfo } from "@/src/context/HomeInfoContext.jsx";
 import Schedule from "@/src/components/schedule/Schedule";
 import ContinueWatching from "@/src/components/continue/ContinueWatching";
+import TabbedAnimeSection from "@/src/components/tabbed-anime/TabbedAnimeSection";
 
 function Home() {
   const { homeInfo, homeInfoLoading, error } = useHomeInfo();
@@ -24,56 +24,27 @@ function Home() {
           <Genre data={homeInfo.genres} />
         </div>
         <ContinueWatching />
-        <Trending trending={homeInfo.trending} />
-        <div className="mt-10 flex gap-6 max-[1200px]:px-4 max-[1200px]:grid max-[1200px]:grid-cols-2 max-[1200px]:mt-12 max-[1200px]:gap-y-10 max-[680px]:grid-cols-1">
-          <Cart
-            label="Top Airing"
-            data={homeInfo.top_airing}
-            path="top-airing"
-          />
-          <Cart
-            label="Most Popular"
-            data={homeInfo.most_popular}
-            path="most-popular"
-          />
-          <Cart
-            label="Most Favorite"
-            data={homeInfo.most_favorite}
-            path="most-favorite"
-          />
-          <Cart
-            label="Latest Completed"
-            data={homeInfo.latest_completed}
-            path="completed"
-          />
-        </div>
+        
         <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-4">
           <div>
             <CategoryCard
               label="Latest Episode"
               data={homeInfo.latest_episode}
-              className={"mt-[60px]"}
+              className="mt-[60px]"
               path="recently-updated"
               limit={12}
             />
-            <CategoryCard
-              label={`New On ${website_name}`}
-              data={homeInfo.recently_added}
-              className={"mt-[60px]"}
-              path="recently-added"
-              limit={12}
-            />
-            <Schedule />
-            <CategoryCard
-              label="Top Upcoming"
-              data={homeInfo.top_upcoming}
-              className={"mt-[30px]"}
-              path="top-upcoming"
-              limit={12}
+            <Schedule className="mt-8" />
+            <TabbedAnimeSection 
+              topAiring={homeInfo.top_airing}
+              mostFavorite={homeInfo.most_favorite}
+              latestCompleted={homeInfo.latest_completed}
+              className="mt-8"
             />
           </div>
           <div className="w-full mt-[60px]">
-            <Topten data={homeInfo.topten} className={"mt-12"} />
+            <Trending trending={homeInfo.trending} />
+            <Topten data={homeInfo.topten} className="mt-12" />
           </div>
         </div>
       </div>
diff --git a/src/pages/category/Category.jsx b/src/pages/category/Category.jsx
index acaca32..2ee67fb 100644
--- a/src/pages/category/Category.jsx
+++ b/src/pages/category/Category.jsx
@@ -51,17 +51,6 @@ function Category({ path, label }) {
 
   return (
     <div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
-      <div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
-        <img
-          src="https://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.gif"
-          alt="Share Anime"
-          className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px] max-[575px]:hidden"
-        />
-        <div className="flex flex-col w-fit">
-          <p className="text-[15px] font-bold text-[#FFBADE]">Share Anime</p>
-          <p className="text-[16px] text-white">to your friends</p>
-        </div>
-      </div>
       {categoryInfo ? (
         <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10">
           {page > totalPages ? (
diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx
index dccb864..c5b88cc 100644
--- a/src/pages/watch/Watch.jsx
+++ b/src/pages/watch/Watch.jsx
@@ -9,17 +9,14 @@ import IframePlayer from "@/src/components/player/IframePlayer";
 import Episodelist from "@/src/components/episodelist/Episodelist";
 import website_name from "@/src/config/website";
 import Sidecard from "@/src/components/sidecard/Sidecard";
-import CategoryCard from "@/src/components/categorycard/CategoryCard";
 import {
   faClosedCaptioning,
   faMicrophone,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Servers from "@/src/components/servers/Servers";
-import CategoryCardLoader from "@/src/components/Loader/CategoryCard.loader";
 import { Skeleton } from "@/src/components/ui/Skeleton/Skeleton";
 import SidecardLoader from "@/src/components/Loader/Sidecard.loader";
-import Voiceactor from "@/src/components/voiceactor/Voiceactor";
 import Watchcontrols from "@/src/components/watchcontrols/Watchcontrols";
 import useWatchControl from "@/src/hooks/useWatchControl";
 import Player from "@/src/components/player/Player";