diff --git a/src/Components/UpcomingSeason.jsx b/src/Components/UpcomingSeason.jsx
index c2558ff2..ba674a17 100644
--- a/src/Components/UpcomingSeason.jsx
+++ b/src/Components/UpcomingSeason.jsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { HomeApi } from './constants';
 import { useFetchInitialData } from "../utils/hooks";
 import { LazyLoadImage } from 'react-lazy-load-image-component';
+import UpcomingSeasonCard from './UpcomingSeasonCard';
 const UpcomingSeason = () => {
     const [summer, setSummer] = useState([])
     const [fall, setFall] = useState([]);
@@ -35,7 +36,7 @@ const UpcomingSeason = () => {
         getWinter();
     }, []);
 
-    useFetchInitialData(summer,winter,fall,spring)
+    useFetchInitialData(summer, winter, fall, spring)
     return (
         <div className='upcoming-season'>
             <div className="airing-schedule-heading">
@@ -49,24 +50,9 @@ const UpcomingSeason = () => {
                     {fall?.map((fallData) => {
                         return (
                             <>
-                                <div className="content">
-                                    <Link to={`/anime-details/${fallData?.id}`}>
-                                        <LazyLoadImage src={fallData?.image} alt="img" />
-                                    </Link>
-                                    <div className="text">
-                                        <h4>{fallData?.title?.userPreferred}</h4>
-                                        <div className="details-seasons">
-                                            <span>{fallData.type}</span>
-                                            <span>{fallData.countryOfOrigin}</span>
-                                        </div>
-                                        <span>{fallData?.releaseDate}</span>
-                                        <div className="genre-upcoming">
-                                            {fallData?.genres?.map((genrData) => (
-                                                <small>{genrData} </small>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
+                                <UpcomingSeasonCard
+                                    fallData={fallData}
+                                />
                             </>
                         )
                     })}
@@ -79,24 +65,8 @@ const UpcomingSeason = () => {
                     {summer?.map((fallData) => {
                         return (
                             <>
-                                <div className="content">
-                                    <Link to={`/anime-details/${fallData?.id}`}>
-                                        <LazyLoadImage src={fallData?.image} alt="img" loading='lazy'/>
-                                    </Link>
-                                    <div className="text">
-                                        <h4>{fallData?.title?.userPreferred}</h4>
-                                        <div className="details-seasons">
-                                            <span>{fallData.type}</span>
-                                            <span>{fallData.countryOfOrigin}</span>
-                                        </div>
-                                        <span>{fallData?.releaseDate}</span>
-                                        <div className="genre-upcoming">
-                                            {fallData?.genres?.map((genrData) => (
-                                                <small>{genrData} </small>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
+                                <UpcomingSeasonCard
+                                    fallData={fallData} />
                             </>
                         )
                     })}
@@ -106,27 +76,12 @@ const UpcomingSeason = () => {
 
                 <div className="season-box">
                     <h2>Winter</h2>
-                    {winter?.map((winterData) => {
+                    {winter?.map((fallData) => {
                         return (
                             <>
-                                <div className="content">
-                                    <Link to={`/anime-details/${winterData.id}`}>
-                                        <LazyLoadImage src={winterData.image} alt="img"  loading='lazy' />
-                                    </Link>
-                                    <div className="text">
-                                        <h4>{winterData?.title?.userPreferred}</h4>
-                                        <div className="details-seasons">
-                                            <span>{winterData.type}</span>
-                                            <span>{winterData.countryOfOrigin}</span>
-                                        </div>
-                                        <span>{winterData?.releaseDate}</span>
-                                        <div className="genre-upcoming">
-                                            {winterData?.genres?.map((winterData) => (
-                                                <small>{winterData} </small>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
+                                <UpcomingSeasonCard
+                                    fallData={fallData}
+                                />
                             </>
                         )
                     })}
@@ -136,27 +91,10 @@ const UpcomingSeason = () => {
 
                 <div className="season-box">
                     <h2>Spring</h2>
-                    {spring?.map((sprinData) => {
+                    {spring?.map((fallData) => {
                         return (
                             <>
-                                <div className="content">
-                                    <Link to={`/anime-details/${sprinData.id}`}>
-                                        <LazyLoadImage src={sprinData.image} alt="img" />
-                                    </Link>
-                                    <div className="text">
-                                        <h4>{sprinData?.title?.userPreferred}</h4>
-                                        <div className="details-seasons">
-                                            <span>{sprinData.type}</span>
-                                            <span>{sprinData.countryOfOrigin}</span>
-                                        </div>
-                                        <span>{sprinData?.releaseDate}</span>
-                                        <div className="genre-upcoming">
-                                            {sprinData?.genres?.map((genrData) => (
-                                                <small>{genrData} </small>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
+              <UpcomingSeasonCard fallData={fallData}/>
                             </>
                         )
                     })}
diff --git a/src/Components/UpcomingSeasonCard.jsx b/src/Components/UpcomingSeasonCard.jsx
new file mode 100644
index 00000000..d84e04eb
--- /dev/null
+++ b/src/Components/UpcomingSeasonCard.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Link } from "react-router-dom";
+const UpcomingSeasonCard = ({fallData}) => {
+  return (
+    <div className="content">
+    <Link to={`/anime-details/${fallData?.id}`}>
+        <LazyLoadImage src={fallData?.image} alt="img" />
+    </Link>
+    <div className="text">
+        <h4>{fallData?.title?.userPreferred}</h4>
+        <div className="details-seasons">
+            <span>{fallData.type}</span>
+            <span>{fallData.countryOfOrigin}</span>
+        </div>
+        <span>{fallData?.releaseDate}</span>
+        <div className="genre-upcoming">
+            {fallData?.genres?.map((genrData) => (
+                <small>{genrData} </small>
+            ))}
+        </div>
+    </div>
+</div>
+  )
+}
+
+export default UpcomingSeasonCard
\ No newline at end of file
diff --git a/src/css/navbar.css b/src/css/navbar.css
index 5730309e..1434ad3c 100644
--- a/src/css/navbar.css
+++ b/src/css/navbar.css
@@ -191,7 +191,7 @@
     margin: 15px 19px;
   }
 }
-@media(max-width:1350px){
+@media(max-width:1360px){
   .account-login{
     position: relative;
     right: 5%;
@@ -326,21 +326,25 @@
     font-size: 35px;
     left: 130px;
   }
+  .account-login{
+    position: relative;
+    left: 22%;
+  }
 }
 @media only screen and (max-width: 650px) {
   .account-login{
     position: relative;
-    left: 19%;
+    left: 20%;
   }
   .login-tab ion-icon{
     font-size: 35px;
-    left: 110px;
+    left: 21%;
   }
 }
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 610px) {
   .account-login{
     position: relative;
-    left: 17%;
+    left: 18%;
   }
   .login-tab ion-icon{
     font-size: 35px;
@@ -379,25 +383,40 @@
     font-size: 30px;
   }
 }
-@media(max-width:440px){
+@media(max-width:450px){
   .account-login{
     position: relative;
-    left: 5%;
+    left: 9%;
   }
   .login-tab ion-icon{
     left: 6px;
   }
 }
-@media(max-width:400px){
+@media(max-width:410px){
   .account-login{
-    left: 2%;
+    left: 4%;
   }
 }
-@media(max-width:355px){
+@media(max-width:385px){
   .account-login{
-    left: 0%;
+    left: 9%;
   }
   .logo>a{
     font-size: 20px;
   }
+}
+@media(max-width:360px){
+  .account-login{
+    left:4%;
+  }
+}
+@media(max-width:340px){
+  .account-login{
+    left:2%;
+  }
+}
+@media(max-width:308px){
+  .account-login{
+    left:-2%;
+  }
 }
\ No newline at end of file