diff --git a/src/pages/animeInfo/AnimeInfo.jsx b/src/pages/animeInfo/AnimeInfo.jsx
index 992be32..1b20583 100644
--- a/src/pages/animeInfo/AnimeInfo.jsx
+++ b/src/pages/animeInfo/AnimeInfo.jsx
@@ -19,7 +19,7 @@ import Voiceactor from "@/src/components/voiceactor/Voiceactor";
 function InfoItem({ label, value, isProducer = true }) {
   return (
     value && (
-      <div className="text-[14px] font-medium transition-all duration-300">
+      <div className="text-[11px] sm:text-[14px] font-medium transition-all duration-300">
         <span className="text-gray-400">{`${label}: `}</span>
         <span className="font-light text-white/90">
           {Array.isArray(value) ? (
@@ -38,8 +38,9 @@ function InfoItem({ label, value, isProducer = true }) {
                   {index < value.length - 1 && ", "}
                 </Link>
               ) : (
-                <span key={index} className="cursor-pointer">
+                <span key={index}>
                   {item}
+                  {index < value.length - 1 && ", "}
                 </span>
               )
             )
@@ -55,7 +56,7 @@ function InfoItem({ label, value, isProducer = true }) {
               {value}
             </Link>
           ) : (
-            <span className="cursor-pointer">{value}</span>
+            <span>{value}</span>
           )}
         </span>
       </div>
@@ -66,10 +67,10 @@ function InfoItem({ label, value, isProducer = true }) {
 function Tag({ bgColor, index, icon, text }) {
   return (
     <div
-      className={`flex space-x-1 justify-center items-center px-3 py-1 text-white backdrop-blur-md bg-white/10 font-medium text-[13px] rounded-full transition-all duration-300 hover:bg-white/20`}
+      className="flex space-x-1 justify-center items-center px-2 sm:px-3 py-0.5 sm:py-1 text-white backdrop-blur-md bg-white/10 font-medium text-[10px] sm:text-[13px] rounded-md sm:rounded-full transition-all duration-300 hover:bg-white/20"
     >
-      {icon && <FontAwesomeIcon icon={icon} className="text-[12px] mr-1" />}
-      <p className="text-[12px]">{text}</p>
+      {icon && <FontAwesomeIcon icon={icon} className="text-[10px] sm:text-[12px] mr-1" />}
+      <p className="text-[10px] sm:text-[12px]">{text}</p>
     </div>
   );
 }
@@ -153,159 +154,290 @@ function AnimeInfo({ random = false }) {
   return (
     <div className="min-h-screen bg-[#0a0a0a] text-white">
       <div className="relative w-full overflow-hidden mt-[64px] max-md:mt-[50px]">
-        {/* Background Image with Gradient Overlay */}
-        <div className="absolute inset-0 z-0">
-          <img
-            src={`${poster}`}
-            alt={`${title} Background`}
-            className="w-full h-full object-cover filter blur-lg opacity-30"
-          />
-          <div className="absolute inset-0 bg-gradient-to-b from-[#121212]/80 via-[#121212]/95 to-[#121212]"></div>
-        </div>
 
         {/* Main Content */}
-        <div className="relative z-10 container mx-auto px-4 py-16">
-          <div className="flex flex-col lg:flex-row gap-8">
-            {/* Poster Section */}
-            <div className="flex-shrink-0">
-              <div className="relative w-[220px] h-[330px] rounded-xl overflow-hidden shadow-2xl mx-auto lg:mx-0">
-                <img
-                  src={`${poster}`}
-                  alt={`${title} Poster`}
-                  className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
-                />
-                {animeInfo.adultContent && (
-                  <div className="absolute top-3 left-3 px-3 py-1 bg-red-500/90 backdrop-blur-sm rounded-full text-sm font-semibold">
-                    18+
+        <div className="relative z-10 container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-12">
+          {/* Mobile Layout */}
+          <div className="block md:hidden">
+            <div className="flex flex-row gap-4">
+              {/* Poster Section */}
+              <div className="flex-shrink-0">
+                <div className="relative w-[130px] xs:w-[150px] aspect-[2/3] rounded-xl overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
+                  <img
+                    src={`${poster}`}
+                    alt={`${title} Poster`}
+                    className="w-full h-full object-cover"
+                  />
+                  {animeInfo.adultContent && (
+                    <div className="absolute top-2 left-2 px-2 py-0.5 bg-red-500/90 backdrop-blur-sm rounded-md text-[10px] font-medium">
+                      18+
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Basic Info Section */}
+              <div className="flex-1 min-w-0 space-y-2">
+                {/* Title */}
+                <div className="space-y-0.5">
+                  <h1 className="text-lg xs:text-xl font-bold tracking-tight truncate">
+                    {language === "EN" ? title : japanese_title}
+                  </h1>
+                  {language === "EN" && japanese_title && (
+                    <p className="text-white/50 text-[11px] xs:text-xs truncate">JP Title: {japanese_title}</p>
+                  )}
+                </div>
+
+                {/* Tags */}
+                <div className="flex flex-wrap gap-1.5">
+                  {tags.map(({ condition, icon, text }, index) =>
+                    condition && (
+                      <Tag
+                        key={index}
+                        index={index}
+                        icon={icon}
+                        text={text}
+                      />
+                    )
+                  )}
+                </div>
+
+                {/* Overview - Limited for mobile */}
+                {info?.Overview && (
+                  <div className="text-gray-300 leading-relaxed text-xs">
+                    {info.Overview.length > 150 ? (
+                      <>
+                        {isFull ? (
+                          info.Overview
+                        ) : (
+                          <div className="line-clamp-3">{info.Overview}</div>
+                        )}
+                        <button
+                          className="mt-1 text-white/70 hover:text-white transition-colors text-[10px] font-medium"
+                          onClick={() => setIsFull(!isFull)}
+                        >
+                          {isFull ? "Show Less" : "Read More"}
+                        </button>
+                      </>
+                    ) : (
+                      info.Overview
+                    )}
                   </div>
                 )}
               </div>
             </div>
 
-            {/* Info Section */}
-            <div className="flex-1 space-y-6">
-              {/* Title */}
-              <h1 className="text-4xl lg:text-5xl font-bold tracking-tight">
-                {language === "EN" ? title : japanese_title}
-              </h1>
-
-              {/* Tags */}
-              <div className="flex flex-wrap gap-2">
-                {tags.map(({ condition, icon, text }, index) =>
-                  condition && (
-                    <Tag
-                      key={index}
-                      index={index}
-                      icon={icon}
-                      text={text}
-                    />
-                  )
-                )}
-              </div>
-
-              {/* Details Section */}
-              <div className="space-y-3 py-4 backdrop-blur-md bg-white/5 rounded-xl px-6">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {[
-                    { label: "Japanese", value: info?.Japanese },
-                    { label: "Synonyms", value: info?.Synonyms },
-                    { label: "Aired", value: info?.Aired },
-                    { label: "Premiered", value: info?.Premiered },
-                    { label: "Duration", value: info?.Duration },
-                    { label: "Status", value: info?.Status },
-                    { label: "MAL Score", value: info?.["MAL Score"] },
-                  ].map((item, index) => (
-                    <InfoItem
-                      key={index}
-                      label={item.label}
-                      value={item.value}
-                      isProducer={false}
-                    />
-                  ))}
-                </div>
-
-                {/* Genres */}
-                {info?.Genres && (
-                  <div className="pt-4 border-t border-white/10">
-                    <p className="text-gray-400 mb-2">Genres</p>
-                    <div className="flex flex-wrap gap-2">
-                      {info.Genres.map((genre, index) => (
-                        <Link
-                          to={`/genre/${genre.split(" ").join("-")}`}
-                          key={index}
-                          className="px-3 py-1 text-sm bg-white/5 rounded-full hover:bg-white/10 transition-colors"
-                        >
-                          {genre}
-                        </Link>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {/* Studios & Producers */}
-                <div className="space-y-4 pt-4 border-t border-white/10">
-                  {[
-                    { label: "Studios", value: info?.Studios },
-                    { label: "Producers", value: info?.Producers },
-                  ].map((item, index) => (
-                    <InfoItem
-                      key={index}
-                      label={item.label}
-                      value={item.value}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              {/* Watch Button */}
+            {/* Watch Button - Full Width on Mobile */}
+            <div className="mt-6">
               {animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
                 <Link
                   to={`/watch/${animeInfo.id}`}
-                  className="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-md rounded-full text-white transition-all duration-300 hover:bg-white/20 hover:scale-105 group"
+                  className="flex justify-center items-center w-full px-4 py-3 bg-white/10 backdrop-blur-md rounded-lg text-white transition-all duration-300 hover:bg-white/20 group"
                 >
                   <FontAwesomeIcon
                     icon={faPlay}
-                    className="mr-2 text-sm group-hover:text-white"
+                    className="mr-2 text-xs group-hover:text-white"
                   />
-                  <span className="font-medium">Watch Now</span>
+                  <span className="font-medium text-sm">Watch Now</span>
                 </Link>
               ) : (
-                <div className="inline-flex items-center px-6 py-3 bg-gray-700/50 rounded-full">
-                  <span className="font-medium">Not released</span>
+                <div className="flex justify-center items-center w-full px-4 py-3 bg-gray-700/50 rounded-lg">
+                  <span className="font-medium text-sm">Not released</span>
+                </div>
+              )}
+            </div>
+
+            {/* Details Section - Full Width on Mobile */}
+            <div className="mt-6 space-y-3 py-3 backdrop-blur-md bg-white/5 rounded-lg px-3 text-xs">
+              <div className="grid grid-cols-2 gap-2">
+                {[
+                  { label: "Japanese", value: info?.Japanese },
+                  { label: "Synonyms", value: info?.Synonyms },
+                  { label: "Aired", value: info?.Aired },
+                  { label: "Premiered", value: info?.Premiered },
+                  { label: "Duration", value: info?.Duration },
+                  { label: "Status", value: info?.Status },
+                  { label: "MAL Score", value: info?.["MAL Score"] },
+                ].map((item, index) => (
+                  <InfoItem
+                    key={index}
+                    label={item.label}
+                    value={item.value}
+                    isProducer={false}
+                  />
+                ))}
+              </div>
+
+              {/* Genres */}
+              {info?.Genres && (
+                <div className="pt-2 border-t border-white/10">
+                  <p className="text-gray-400 text-xs mb-1.5">Genres</p>
+                  <div className="flex flex-wrap gap-1">
+                    {info.Genres.map((genre, index) => (
+                      <Link
+                        to={`/genre/${genre.split(" ").join("-")}`}
+                        key={index}
+                        className="px-2 py-0.5 text-[10px] bg-white/5 rounded-md hover:bg-white/10 transition-colors"
+                      >
+                        {genre}
+                      </Link>
+                    ))}
+                  </div>
                 </div>
               )}
 
-              {/* Overview */}
-              {info?.Overview && (
-                <div className="text-gray-300 leading-relaxed max-w-3xl">
-                  {info.Overview.length > 270 ? (
-                    <>
-                      {isFull
-                        ? info.Overview
-                        : `${info.Overview.slice(0, 270)}...`}
-                      <button
-                        className="ml-2 text-white/70 hover:text-white transition-colors text-sm font-medium"
-                        onClick={() => setIsFull(!isFull)}
-                      >
-                        {isFull ? "Show Less" : "Read More"}
-                      </button>
-                    </>
-                  ) : (
-                    info.Overview
+              {/* Studios & Producers */}
+              <div className="space-y-2 pt-2 border-t border-white/10">
+                {[
+                  { label: "Studios", value: info?.Studios },
+                  { label: "Producers", value: info?.Producers },
+                ].map((item, index) => (
+                  <InfoItem
+                    key={index}
+                    label={item.label}
+                    value={item.value}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Desktop Layout - Existing Code */}
+          <div className="hidden md:block">
+            <div className="flex flex-row gap-6 lg:gap-10">
+              {/* Poster Section */}
+              <div className="flex-shrink-0">
+                <div className="relative w-[220px] lg:w-[260px] aspect-[2/3] rounded-2xl overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
+                  <img
+                    src={`${poster}`}
+                    alt={`${title} Poster`}
+                    className="w-full h-full object-cover"
+                  />
+                  {animeInfo.adultContent && (
+                    <div className="absolute top-3 left-3 px-2.5 py-0.5 bg-red-500/90 backdrop-blur-sm rounded-lg text-xs font-medium">
+                      18+
+                    </div>
                   )}
                 </div>
-              )}
+              </div>
 
-              {/* Share Section */}
-              <div className="flex items-center space-x-4 pt-4">
-                <img
-                  src="https://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.gif"
-                  alt="Share Anime"
-                  className="w-12 h-12 rounded-full"
-                />
-                <div>
-                  <p className="text-sm font-semibold text-white/70">Share Anime</p>
-                  <p className="text-white/50">with your friends</p>
+              {/* Info Section */}
+              <div className="flex-1 space-y-4 lg:space-y-5 min-w-0">
+                {/* Title */}
+                <div className="space-y-1">
+                  <h1 className="text-3xl lg:text-4xl font-bold tracking-tight truncate">
+                    {language === "EN" ? title : japanese_title}
+                  </h1>
+                  {language === "EN" && japanese_title && (
+                    <p className="text-white/50 text-sm lg:text-base truncate">JP Title: {japanese_title}</p>
+                  )}
+                </div>
+
+                {/* Tags */}
+                <div className="flex flex-wrap gap-2">
+                  {tags.map(({ condition, icon, text }, index) =>
+                    condition && (
+                      <Tag
+                        key={index}
+                        index={index}
+                        icon={icon}
+                        text={text}
+                      />
+                    )
+                  )}
+                </div>
+
+                {/* Overview */}
+                {info?.Overview && (
+                  <div className="text-gray-300 leading-relaxed max-w-3xl text-sm lg:text-base">
+                    {info.Overview.length > 270 ? (
+                      <>
+                        {isFull
+                          ? info.Overview
+                          : `${info.Overview.slice(0, 270)}...`}
+                        <button
+                          className="ml-2 text-white/70 hover:text-white transition-colors text-sm font-medium"
+                          onClick={() => setIsFull(!isFull)}
+                        >
+                          {isFull ? "Show Less" : "Read More"}
+                        </button>
+                      </>
+                    ) : (
+                      info.Overview
+                    )}
+                  </div>
+                )}
+
+                {/* Watch Button */}
+                {animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
+                  <Link
+                    to={`/watch/${animeInfo.id}`}
+                    className="inline-flex items-center px-5 py-2.5 bg-white/10 backdrop-blur-md rounded-xl text-white transition-all duration-300 hover:bg-white/20 hover:scale-[1.02] group"
+                  >
+                    <FontAwesomeIcon
+                      icon={faPlay}
+                      className="mr-2 text-sm group-hover:text-white"
+                    />
+                    <span className="font-medium">Watch Now</span>
+                  </Link>
+                ) : (
+                  <div className="inline-flex items-center px-5 py-2.5 bg-gray-700/50 rounded-xl">
+                    <span className="font-medium">Not released</span>
+                  </div>
+                )}
+
+                {/* Details Section */}
+                <div className="space-y-4 py-4 backdrop-blur-md bg-white/5 rounded-xl px-5">
+                  <div className="grid grid-cols-2 gap-3">
+                    {[
+                      { label: "Japanese", value: info?.Japanese },
+                      { label: "Synonyms", value: info?.Synonyms },
+                      { label: "Aired", value: info?.Aired },
+                      { label: "Premiered", value: info?.Premiered },
+                      { label: "Duration", value: info?.Duration },
+                      { label: "Status", value: info?.Status },
+                      { label: "MAL Score", value: info?.["MAL Score"] },
+                    ].map((item, index) => (
+                      <InfoItem
+                        key={index}
+                        label={item.label}
+                        value={item.value}
+                        isProducer={false}
+                      />
+                    ))}
+                  </div>
+
+                  {/* Genres */}
+                  {info?.Genres && (
+                    <div className="pt-3 border-t border-white/10">
+                      <p className="text-gray-400 text-sm mb-2">Genres</p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {info.Genres.map((genre, index) => (
+                          <Link
+                            to={`/genre/${genre.split(" ").join("-")}`}
+                            key={index}
+                            className="px-3 py-1 text-xs bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
+                          >
+                            {genre}
+                          </Link>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Studios & Producers */}
+                  <div className="space-y-3 pt-3 border-t border-white/10">
+                    {[
+                      { label: "Studios", value: info?.Studios },
+                      { label: "Producers", value: info?.Producers },
+                    ].map((item, index) => (
+                      <InfoItem
+                        key={index}
+                        label={item.label}
+                        value={item.value}
+                      />
+                    ))}
+                  </div>
                 </div>
               </div>
             </div>
@@ -315,14 +447,14 @@ function AnimeInfo({ random = false }) {
 
       {/* Seasons Section */}
       {seasons?.length > 0 && (
-        <div className="container mx-auto px-4 py-12">
-          <h2 className="text-2xl font-bold mb-8">More Seasons</h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div className="container mx-auto px-3 py-8 sm:px-4 sm:py-12">
+          <h2 className="text-2xl font-bold mb-6 sm:mb-8 px-1">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) => (
               <Link
                 to={`/${season.id}`}
                 key={index}
-                className={`relative w-full aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${
+                className={`relative w-full aspect-[3/1] sm:aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${
                   currentId === String(season.id)
                     ? "ring-2 ring-white/40 shadow-lg shadow-white/10"
                     : ""
@@ -353,7 +485,7 @@ function AnimeInfo({ random = false }) {
                 }`} />
                 {/* Title Container */}
                 <div className="absolute inset-0 z-30 flex items-center justify-center">
-                  <p className={`text-[18px] font-bold text-center px-4 transition-colors duration-300 ${
+                  <p className={`text-[14px] sm:text-[16px] md:text-[18px] font-bold text-center px-2 sm:px-4 transition-colors duration-300 ${
                     currentId === String(season.id)
                       ? "text-white"
                       : "text-white/90 group-hover:text-white"