diff --git a/src/components/episodelist/Episodelist.jsx b/src/components/episodelist/Episodelist.jsx
index eb92f85..94dfeca 100644
--- a/src/components/episodelist/Episodelist.jsx
+++ b/src/components/episodelist/Episodelist.jsx
@@ -138,18 +138,18 @@ function Episodelist({
 
   return (
     <div className="flex flex-col w-full h-full">
-      <div className="sticky top-0 z-10 flex items-center justify-between px-4 py-3 bg-[#1a1a1a] border-b border-[#2a2a2a]">
-        <div className="flex items-center gap-4">
-          <h1 className="text-[14px] font-semibold text-white">Episodes</h1>
+      <div className="sticky top-0 z-10 flex items-center justify-between px-4 py-2.5 bg-[#1a1a1a] border-b border-[#2a2a2a] max-[600px]:px-2">
+        <div className="flex items-center gap-4 max-[600px]:gap-2">
+          <h1 className="text-[14px] font-semibold text-white max-[600px]:text-[13px]">Episodes</h1>
           {totalEpisodes > 100 && (
             <div className="flex items-center">
               <div
                 onClick={() => setShowDropDown((prev) => !prev)}
-                className="text-gray-300 relative cursor-pointer flex items-center gap-2 hover:text-white transition-colors"
+                className="text-gray-300 relative cursor-pointer flex items-center gap-2 hover:text-white transition-colors max-[600px]:gap-1"
                 ref={dropDownRef}
               >
                 <FontAwesomeIcon icon={faList} className="text-gray-400" />
-                <p className="text-[12px]">
+                <p className="text-[12px] max-[600px]:text-[11px]">
                   {selectedRange[0]}-{selectedRange[1]}
                 </p>
                 <FontAwesomeIcon
@@ -169,7 +169,7 @@ function Episodelist({
                           item === activeRange ? "bg-[#404040]" : ""
                         }`}
                       >
-                        <p className="font-medium text-[12px] p-3 flex justify-between items-center text-gray-300 hover:text-white">
+                        <p className="font-medium text-[12px] p-2.5 flex justify-between items-center text-gray-300 hover:text-white max-[600px]:text-[11px] max-[600px]:p-2">
                           {item}
                           {item === activeRange ? (
                             <FontAwesomeIcon icon={faCheck} className="text-white" />
@@ -185,15 +185,15 @@ function Episodelist({
         </div>
         
         {totalEpisodes > 100 && (
-          <div className="flex items-center min-w-[180px]">
-            <div className="w-full flex items-center gap-2 px-3 py-1.5 bg-[#2a2a2a] rounded-lg border border-[#3a3a3a] focus-within:border-gray-500 transition-colors">
+          <div className="flex items-center min-w-[180px] max-[600px]:min-w-[120px]">
+            <div className="w-full flex items-center gap-2 px-3 py-1.5 bg-[#2a2a2a] rounded-lg border border-[#3a3a3a] focus-within:border-gray-500 transition-colors max-[600px]:px-2 max-[600px]:py-1">
               <FontAwesomeIcon
                 icon={faMagnifyingGlass}
                 className="text-[12px] text-gray-400"
               />
               <input
                 type="text"
-                className="w-full bg-transparent focus:outline-none text-[13px] text-white placeholder:text-gray-500"
+                className="w-full bg-transparent focus:outline-none text-[13px] text-white placeholder:text-gray-500 max-[600px]:text-[12px]"
                 placeholder="Go to episode..."
                 onChange={handleChange}
               />
@@ -202,11 +202,14 @@ function Episodelist({
         )}
       </div>
       
-      <div ref={listContainerRef} className="w-full flex-1 overflow-y-auto bg-[#1a1a1a]">
+      <div ref={listContainerRef} className="w-full flex-1 overflow-y-auto bg-[#1a1a1a] max-h-[calc(100vh-400px)] max-[1200px]:max-h-[400px]">
         <div
           className={`${
             totalEpisodes > 30
-              ? "p-4 grid grid-cols-5 gap-2 max-[1200px]:grid-cols-12 max-[860px]:grid-cols-10 max-[575px]:grid-cols-8 max-[478px]:grid-cols-6 max-[350px]:grid-cols-5"
+              ? "p-4 grid gap-2 max-[600px]:p-2 max-[600px]:gap-1.5" + 
+                (totalEpisodes > 100 
+                  ? " grid-cols-5" 
+                  : " grid-cols-5 max-[1200px]:grid-cols-12 max-[860px]:grid-cols-10 max-[575px]:grid-cols-8 max-[478px]:grid-cols-6 max-[350px]:grid-cols-5")
               : ""
           }`}
         >
@@ -224,7 +227,7 @@ function Episodelist({
                     <div
                       key={item?.id}
                       ref={isActive ? activeEpisodeRef : null}
-                      className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all ${
+                      className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all max-[600px]:h-[30px] max-[600px]:text-[12px] ${
                         item?.filler
                           ? isActive
                             ? "bg-white text-black"
@@ -262,7 +265,7 @@ function Episodelist({
                   <div
                     key={item?.id}
                     ref={isActive ? activeEpisodeRef : null}
-                    className={`w-full px-4 py-3 flex items-center justify-start gap-x-6 cursor-pointer transition-all ${
+                    className={`w-full px-4 py-2.5 flex items-center justify-start gap-x-4 cursor-pointer transition-all max-[600px]:px-3 max-[600px]:py-2 max-[600px]:gap-x-3 ${
                       (index + 1) % 2 && !isActive
                         ? "bg-[#202020]"
                         : "bg-[#1a1a1a]"
@@ -277,11 +280,11 @@ function Episodelist({
                       }
                     }}
                   >
-                    <p className={`text-[14px] font-medium ${isActive ? "text-white" : "text-gray-400"}`}>
+                    <p className={`text-[14px] font-medium max-[600px]:text-[13px] ${isActive ? "text-white" : "text-gray-400"}`}>
                       {index + 1}
                     </p>
                     <div className="w-full flex items-center justify-between gap-x-[5px]">
-                      <h1 className={`line-clamp-1 text-[14px] transition-colors ${
+                      <h1 className={`line-clamp-1 text-[14px] transition-colors max-[600px]:text-[13px] ${
                         isActive ? "text-white font-medium" : "text-gray-400 font-normal"
                       }`}>
                         {language === "EN" ? item?.title : item?.japanese_title}
@@ -289,7 +292,7 @@ function Episodelist({
                       {isActive && (
                         <FontAwesomeIcon
                           icon={faCirclePlay}
-                          className="w-[18px] h-[18px] text-white"
+                          className="w-[18px] h-[18px] text-white max-[600px]:w-[16px] max-[600px]:h-[16px]"
                         />
                       )}
                     </div>
diff --git a/src/components/servers/Servers.jsx b/src/components/servers/Servers.jsx
index 3b3e522..7a28ad8 100644
--- a/src/components/servers/Servers.jsx
+++ b/src/components/servers/Servers.jsx
@@ -53,43 +53,43 @@ function Servers({
     localStorage.setItem("server_name", server.serverName);
     localStorage.setItem("server_type", server.type);
   };
+
   return (
-    <div className="relative bg-[#111111] p-4 w-full min-h-[100px] flex justify-center items-center max-[1200px]:bg-[#151515]">
+    <div className="relative bg-[#111111] p-4 w-full min-h-[100px] flex justify-center items-center max-[1200px]:bg-[#151515] max-[600px]:p-2">
       {serverLoading ? (
         <div className="w-full h-full rounded-lg flex justify-center items-center max-[600px]:rounded-none">
           <BouncingLoader />
         </div>
       ) : servers ? (
-        <div className="w-full h-full rounded-lg grid grid-cols-[minmax(0,30%),minmax(0,70%)] overflow-hidden max-[800px]:grid-cols-[minmax(0,40%),minmax(0,60%)] max-[600px]:flex max-[600px]:flex-col max-[600px]:rounded-none">
-          <div className="h-full bg-[#e0e0e0] px-6 text-black flex flex-col justify-center items-center gap-y-2 max-[600px]:bg-transparent max-[600px]:h-1/2 max-[600px]:text-white max-[600px]:mb-4">
-            <p className="text-center leading-5 font-medium text-[14px]">
-              You are watching <br />
-              <span className="font-semibold max-[600px]:text-[#e0e0e0]">
+        <div className="w-full h-full rounded-lg grid grid-cols-[minmax(0,30%),minmax(0,70%)] overflow-hidden max-[800px]:grid-cols-[minmax(0,40%),minmax(0,60%)] max-[600px]:flex max-[600px]:flex-col max-[600px]:rounded-none max-[600px]:gap-2">
+          <div className="h-full bg-[#e0e0e0] px-6 text-black flex flex-col justify-center items-center gap-y-2 max-[600px]:bg-transparent max-[600px]:h-auto max-[600px]:text-white max-[600px]:py-1 max-[600px]:px-2">
+            <p className="text-center leading-5 font-medium text-[14px] max-[600px]:text-[13px] max-[600px]:mb-0">
+              You are watching{" "}
+              <br className="max-[600px]:hidden" />
+              <span className="font-semibold max-[600px]:text-[#e0e0e0] max-[600px]:ml-1">
                 Episode {activeEpisodeNum}
               </span>
             </p>
-            <p className="leading-5 text-[14px] font-medium text-center">
+            <p className="leading-5 text-[14px] font-medium text-center max-[600px]:text-[12px] max-[600px]:hidden">
               If the current server doesn&apos;t work, please try other servers
               beside.
             </p>
           </div>
-          <div className="bg-[#1f1f1f] flex flex-col max-[600px]:h-full">
+          <div className="bg-[#1f1f1f] flex flex-col max-[600px]:rounded-lg max-[600px]:p-2">
             {rawServers.length > 0 && (
-              <div
-                className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${
-                  dubServers.length === 0 || subServers.length === 0
-                    ? "h-1/2"
-                    : "h-full"
-                }`}
-              >
-                <div className="flex items-center gap-x-2">
+              <div className={`servers px-2 flex items-center flex-wrap gap-y-1 ml-2 max-[600px]:py-1.5 max-[600px]:px-1 max-[600px]:ml-0 ${
+                dubServers.length === 0 || subServers.length === 0
+                  ? "h-1/2"
+                  : "h-full"
+              }`}>
+                <div className="flex items-center gap-x-2 min-w-[65px]">
                   <FontAwesomeIcon
                     icon={faFile}
                     className="text-[#e0e0e0] text-[13px]"
                   />
-                  <p className="font-bold text-[14px]">RAW:</p>
+                  <p className="font-bold text-[14px] max-[600px]:text-[12px]">RAW:</p>
                 </div>
-                <div className="flex gap-x-[7px] ml-8 flex-wrap">
+                <div className="flex gap-1.5 ml-2 flex-wrap max-[600px]:ml-0">
                   {rawServers.map((item, index) => (
                     <div
                       key={index}
@@ -97,10 +97,10 @@ function Servers({
                         activeServerId === item?.data_id
                           ? "bg-[#e0e0e0] text-black"
                           : "bg-[#373737] text-white"
-                      } max-[700px]:px-3`}
+                      } max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
                       onClick={() => handleServerSelect(item)}
                     >
-                      <p className="text-[13px] font-semibold">
+                      <p className="text-[13px] font-semibold max-[600px]:text-[12px]">
                         {item.serverName}
                       </p>
                     </div>
@@ -109,19 +109,17 @@ function Servers({
               </div>
             )}
             {subServers.length > 0 && (
-              <div
-                className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${
-                  dubServers.length === 0 ? "h-1/2" : "h-full"
-                }`}
-              >
-                <div className="flex items-center gap-x-2">
+              <div className={`servers px-2 flex items-center flex-wrap gap-y-1 ml-2 max-[600px]:py-1.5 max-[600px]:px-1 max-[600px]:ml-0 ${
+                dubServers.length === 0 ? "h-1/2" : "h-full"
+              }`}>
+                <div className="flex items-center gap-x-2 min-w-[65px]">
                   <FontAwesomeIcon
                     icon={faClosedCaptioning}
                     className="text-[#e0e0e0] text-[13px]"
                   />
-                  <p className="font-bold text-[14px]">SUB:</p>
+                  <p className="font-bold text-[14px] max-[600px]:text-[12px]">SUB:</p>
                 </div>
-                <div className="flex gap-x-[7px] ml-8 flex-wrap">
+                <div className="flex gap-1.5 ml-2 flex-wrap max-[600px]:ml-0">
                   {subServers.map((item, index) => (
                     <div
                       key={index}
@@ -129,10 +127,10 @@ function Servers({
                         activeServerId === item?.data_id
                           ? "bg-[#e0e0e0] text-black"
                           : "bg-[#373737] text-white"
-                      } max-[700px]:px-3`}
+                      } max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
                       onClick={() => handleServerSelect(item)}
                     >
-                      <p className="text-[13px] font-semibold">
+                      <p className="text-[13px] font-semibold max-[600px]:text-[12px]">
                         {item.serverName}
                       </p>
                     </div>
@@ -141,19 +139,17 @@ function Servers({
               </div>
             )}
             {dubServers.length > 0 && (
-              <div
-                className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${
-                  subServers.length === 0 ? "h-1/2 " : "h-full"
-                }`}
-              >
-                <div className="flex items-center gap-x-3">
+              <div className={`servers px-2 flex items-center flex-wrap gap-y-1 ml-2 max-[600px]:py-1.5 max-[600px]:px-1 max-[600px]:ml-0 ${
+                subServers.length === 0 ? "h-1/2" : "h-full"
+              }`}>
+                <div className="flex items-center gap-x-2 min-w-[65px]">
                   <FontAwesomeIcon
                     icon={faMicrophone}
                     className="text-[#e0e0e0] text-[13px]"
                   />
-                  <p className="font-bold text-[14px]">DUB:</p>
+                  <p className="font-bold text-[14px] max-[600px]:text-[12px]">DUB:</p>
                 </div>
-                <div className="flex gap-x-[7px] ml-8 flex-wrap">
+                <div className="flex gap-1.5 ml-2 flex-wrap max-[600px]:ml-0">
                   {dubServers.map((item, index) => (
                     <div
                       key={index}
@@ -161,10 +157,10 @@ function Servers({
                         activeServerId === item?.data_id
                           ? "bg-[#e0e0e0] text-black"
                           : "bg-[#373737] text-white"
-                      } max-[700px]:px-3`}
+                      } max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
                       onClick={() => handleServerSelect(item)}
                     >
-                      <p className="text-[13px] font-semibold">
+                      <p className="text-[13px] font-semibold max-[600px]:text-[12px]">
                         {item.serverName}
                       </p>
                     </div>
diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx
index 16f5bed..dccb864 100644
--- a/src/pages/watch/Watch.jsx
+++ b/src/pages/watch/Watch.jsx
@@ -226,7 +226,7 @@ export default function Watch() {
   }, [animeId, animeInfo]);
   return (
     <div className="w-full min-h-screen bg-[#0a0a0a]">
-      <div className="w-full max-w-[1920px] mx-auto px-6 pt-[80px] pb-6 max-[1200px]:pt-[48px] max-[1024px]:px-4 max-md:pt-[32px]">
+      <div className="w-full max-w-[1920px] mx-auto pt-16 px-4 pb-6 w-full max-[1200px]:px-0">
         <div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col">
           {/* Left Column - Player, Controls, Servers */}
           <div className="flex flex-col w-full gap-6">
@@ -355,30 +355,102 @@ export default function Watch() {
               </div>
             </div>
 
+            {/* Mobile-only Seasons Section */}
+            {seasons?.length > 0 && (
+              <div className="hidden max-[1200px]:block p-6 bg-[#141414] rounded-lg">
+                <h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
+                <div className="grid grid-cols-2 gap-2">
+                  {seasons.map((season, index) => (
+                    <Link
+                      to={`/${season.id}`}
+                      key={index}
+                      className={`relative w-full aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${
+                        animeId === String(season.id)
+                          ? "ring-2 ring-white/40 shadow-lg shadow-white/10"
+                          : ""
+                      }`}
+                    >
+                      <img
+                        src={season.season_poster}
+                        alt={season.season}
+                        className={`w-full h-full object-cover scale-150 ${
+                          animeId === String(season.id)
+                            ? "opacity-50"
+                            : "opacity-40 group-hover:opacity-50 transition-opacity"
+                        }`}
+                      />
+                      {/* Dots Pattern Overlay */}
+                      <div 
+                        className="absolute inset-0 z-10" 
+                        style={{ 
+                          backgroundImage: `url('data:image/svg+xml,<svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="1.5" cy="1.5" r="0.5" fill="white" fill-opacity="0.25"/></svg>')`,
+                          backgroundSize: '3px 3px'
+                        }}
+                      />
+                      {/* Dark Gradient Overlay */}
+                      <div className={`absolute inset-0 z-20 bg-gradient-to-r ${
+                        animeId === String(season.id)
+                          ? "from-black/50 to-transparent"
+                          : "from-black/40 to-transparent"
+                      }`} />
+                      {/* Title Container */}
+                      <div className="absolute inset-0 z-30 flex items-center justify-center">
+                        <p className={`text-[14px] font-bold text-center px-2 transition-colors duration-300 ${
+                          animeId === String(season.id)
+                            ? "text-white"
+                            : "text-white/90 group-hover:text-white"
+                        }`}>
+                          {season.season}
+                        </p>
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Mobile-only Episodes Section */}
+            <div className="hidden max-[1200px]:block">
+              <div ref={episodesRef} className="episodes flex-shrink-0 bg-[#141414] rounded-lg overflow-hidden">
+                {!episodes ? (
+                  <div className="h-full flex items-center justify-center">
+                    <BouncingLoader />
+                  </div>
+                ) : (
+                  <Episodelist
+                    episodes={episodes}
+                    currentEpisode={episodeId}
+                    onEpisodeClick={(id) => setEpisodeId(id)}
+                    totalEpisodes={totalEpisodes}
+                  />
+                )}
+              </div>
+            </div>
+
             {/* Anime Info Section */}
-            <div className="p-6 bg-[#141414] rounded-lg">
-              <div className="flex gap-x-6 max-[600px]:flex-col max-[600px]:gap-y-4">
+            <div className="p-6 bg-[#141414] rounded-lg max-[600px]:p-4">
+              <div className="flex gap-x-6 max-[600px]:flex-row max-[600px]:gap-4">
                 {animeInfo && animeInfo?.poster ? (
                   <img
                     src={`${animeInfo?.poster}`}
                     alt=""
-                    className="w-[120px] h-[180px] object-cover rounded-md max-[600px]:w-full max-[600px]:h-[200px]"
+                    className="w-[120px] h-[180px] object-cover rounded-md max-[600px]:w-[100px] max-[600px]:h-[150px]"
                   />
                 ) : (
-                  <Skeleton className="w-[120px] h-[180px] rounded-md" />
+                  <Skeleton className="w-[120px] h-[180px] rounded-md max-[600px]:w-[100px] max-[600px]:h-[150px]" />
                 )}
-                <div className="flex flex-col gap-y-4 flex-1">
+                <div className="flex flex-col gap-y-4 flex-1 max-[600px]:gap-y-2">
                   {animeInfo && animeInfo?.title ? (
                     <Link 
                       to={`/${animeId}`}
                       className="group"
                     >
-                      <h1 className="text-[28px] font-medium text-white leading-tight group-hover:text-gray-300 transition-colors">
+                      <h1 className="text-[28px] font-medium text-white leading-tight group-hover:text-gray-300 transition-colors max-[600px]:text-[20px]">
                         {language ? animeInfo?.title : animeInfo?.japanese_title}
                       </h1>
-                      <div className="flex items-center gap-1.5 mt-1 text-gray-400 text-sm group-hover:text-white transition-colors">
+                      <div className="flex items-center gap-1.5 mt-1 text-gray-400 text-sm group-hover:text-white transition-colors max-[600px]:text-[12px] max-[600px]:mt-0.5">
                         <span>View Details</span>
-                        <svg className="w-4 h-4 transform group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg className="w-4 h-4 transform group-hover:translate-x-0.5 transition-transform max-[600px]:w-3 max-[600px]:h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                         </svg>
                       </div>
@@ -386,13 +458,13 @@ export default function Watch() {
                   ) : (
                     <Skeleton className="w-[170px] h-[20px] rounded-xl" />
                   )}
-                  <div className="flex flex-wrap gap-2">
+                  <div className="flex flex-wrap gap-2 max-[600px]:gap-1.5">
                     {animeInfo ? (
                       tags.map(
                         ({ condition, icon, text }, index) =>
                           condition && (
-                            <span key={index} className="px-3 py-1 bg-[#1a1a1a] rounded-full text-sm flex items-center gap-x-1 text-gray-300">
-                              {icon && <FontAwesomeIcon icon={icon} className="text-[12px]" />}
+                            <span key={index} className="px-3 py-1 bg-[#1a1a1a] rounded-full text-sm flex items-center gap-x-1 text-gray-300 max-[600px]:px-2 max-[600px]:py-0.5 max-[600px]:text-[11px]">
+                              {icon && <FontAwesomeIcon icon={icon} className="text-[12px] max-[600px]:text-[10px]" />}
                               {text}
                             </span>
                           )
@@ -402,14 +474,14 @@ export default function Watch() {
                     )}
                   </div>
                   {animeInfo?.animeInfo?.Overview && (
-                    <p className="text-[15px] text-gray-400 leading-relaxed">
+                    <p className="text-[15px] text-gray-400 leading-relaxed max-[600px]:text-[13px] max-[600px]:leading-normal">
                       {animeInfo?.animeInfo?.Overview.length > 270 ? (
                         <>
                           {isFullOverview
                             ? animeInfo?.animeInfo?.Overview
                             : `${animeInfo?.animeInfo?.Overview.slice(0, 270)}...`}
                           <button
-                            className="ml-2 text-gray-300 hover:text-white transition-colors"
+                            className="ml-2 text-gray-300 hover:text-white transition-colors max-[600px]:text-[12px] max-[600px]:ml-1"
                             onClick={() => setIsFullOverview(!isFullOverview)}
                           >
                             {isFullOverview ? "Show Less" : "Read More"}
@@ -424,9 +496,9 @@ export default function Watch() {
               </div>
             </div>
 
-            {/* Seasons Section */}
+            {/* Desktop-only Seasons Section */}
             {seasons?.length > 0 && (
-              <div className="p-6 bg-[#141414] rounded-lg">
+              <div className="p-6 bg-[#141414] rounded-lg max-[1200px]:hidden">
                 <h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
                 <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
                   {seasons.map((season, index) => (
@@ -479,8 +551,8 @@ export default function Watch() {
             )}
           </div>
 
-          {/* Right Column - Episodes and Related */}
-          <div className="flex flex-col gap-6 h-full">
+          {/* Right Column - Episodes and Related (Desktop Only) */}
+          <div className="flex flex-col gap-6 h-full max-[1200px]:hidden">
             {/* Episodes Section */}
             <div ref={episodesRef} className="episodes flex-shrink-0 bg-[#141414] rounded-lg overflow-hidden">
               {!episodes ? (
@@ -512,6 +584,17 @@ export default function Watch() {
               </div>
             )}
           </div>
+
+          {/* Mobile-only Related Section */}
+          {animeInfo && animeInfo.related_data && (
+            <div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-6">
+              <h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
+              <Sidecard
+                data={animeInfo.related_data}
+                className="!mt-0"
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>