diff --git a/src/App.css b/src/App.css
index 214f685..b162bbb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -85,30 +85,30 @@ header nav ul li {
 }
 
 
-.movie-list {
+.movie-list, .sport-list {
   display: grid; 
   grid-template-columns: repeat(5, 1fr);
   justify-items: center;
   align-items: center;
 }
 
-.movie {
+.movie, .sport {
   border-radius: 5px;
   text-align: center;
 }
 
-.movie h2 {
+.movie h2, .sport h2 {
   font-size: 15px;
   margin: 0.5rem 0;
   color: white;
 }
 
-.movie p {
+.movie p, .sport p {
   font-size: 14px;
   color: #c1bdbd;
 }
 
-.movie button {
+.movie button, .sport button {
   background-color: #ff0000;
   border: none;
   color: white;
diff --git a/src/assets/styles/ImageSlider.css b/src/assets/styles/ImageSlider.css
index 34fe93b..50d3981 100644
--- a/src/assets/styles/ImageSlider.css
+++ b/src/assets/styles/ImageSlider.css
@@ -4,6 +4,7 @@
   position: relative;
   top: 75px;
   min-height: 45vh;
+  overflow: hidden;
 }
 
 .slick-slide {
diff --git a/src/assets/styles/Sport.css b/src/assets/styles/Sport.css
index 1ea0869..e101460 100644
--- a/src/assets/styles/Sport.css
+++ b/src/assets/styles/Sport.css
@@ -35,11 +35,13 @@
 .sport-ranking {
   position: absolute;
   text-align: left;
-  bottom: 100px;
+  display: flex;
+  align-items: center;
+  bottom: 114px;
   width: 230px;
   color: var(--text-color);
   background-color: rgba(0, 0, 0, 0.8);
-  padding: 10px;
+  padding: 5px;
   border-radius: 0 0 5px 5px;
   font-size: 14px;
   font-weight: bold;
@@ -54,7 +56,7 @@
   font-size: 12px;
 }
 
-.participants {
+.participants-inlist {
   font-size: 12px;
   color: var(--text-color);
 }
@@ -62,7 +64,7 @@
 .sport-name {
   font-size: 20px;
   text-align: left;
-  margin: 15px 0 5px 10px;
+  /* margin: 15px 0 5px 10px; */
   font-weight: bold;
   color: #333;
 }
diff --git a/src/assets/styles/SportsDetails.css b/src/assets/styles/SportsDetails.css
index 59990ac..f97cb77 100644
--- a/src/assets/styles/SportsDetails.css
+++ b/src/assets/styles/SportsDetails.css
@@ -1,163 +1,180 @@
 /* Global Styles */
 body {
-    font-family: 'Roboto', sans-serif;
-    line-height: 1.6;
-    color: #333;
-    background-color: #f4f4f4;
-  }
-  
-  /* Header and Footer Styles */
-  header,
-  footer {
-    background-color: #222;
-    color: #fff;
-    padding: 1.5em;
-    text-align: center;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  }
-  
-  footer {
-    margin-top: 40px;
-  }
-  
-  /* Sports Details Container */
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f4f4f4;
+}
+
+/* Header and Footer Styles */
+header,
+footer {
+  background-color: #222;
+  color: #fff;
+  padding: 1.5em;
+  text-align: center;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+footer {
+  margin-top: 40px;
+}
+
+/* Sports Details Container */
+.sports-details-container {
+  width: 800px;
+
+  margin: 40px auto;
+  padding: 25px;
+  background-color: #fff;
+  border-radius: 15px;
+  border: 1px solid #ddd;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.sub-container {
+  display: flex;
+  padding-bottom: 100px;
+  gap: 10%;
+}
+
+
+.right-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+/* Sport Image */
+.sport-image img {
+  width: 500px;
+  height: 400px;
+  object-fit: cover;
+  border-radius: 15px;
+  transition: transform 0.3s ease;
+}
+
+.sport-image img:hover {
+  transform: scale(1.05);
+}
+
+/* Sport Info */
+.sport-name {
+  font-size: 30px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #2c3e50;
+}
+
+.sport-category {
+  font-size: 16px;
+  color: #7f8c8d;
+  margin-bottom: 20px;
+}
+
+.sport-ranking,
+.participants {
+  font-size: 18px;
+  margin-bottom: 15px;
+}
+
+.participants {
+  background-color: black;
+  color: yellow;
+  padding: 10px;
+  border-radius: 10px;
+  width: fit-content;
+  font-weight: bold;
+}
+
+/* Carousel Styles */
+.carousel-container {
+  margin: 20px 0;
+}
+
+.participant-member,
+.photo {
+  text-align: center;
+  margin: 10px;
+}
+
+.participant-member img,
+.photo img {
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.participant-member img:hover,
+.photo img:hover {
+  transform: scale(1.1);
+}
+
+/* Sport Trailer */
+.sport-trailer iframe {
+  border-radius: 15px;
+  width: 100%;
+  max-width: 700px;
+  max-height: 390px;
+}
+
+/* Button Styles */
+.buttons-sec {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.book-tickets-button,
+.back-button {
+  padding: 10px 20px;
+  background-color: #2980b9;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.book-tickets-button:hover,
+.back-button:hover {
+  background-color: #3498db;
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
   .sports-details-container {
-    max-width: 800px;
-    margin: 40px auto;
-    padding: 25px;
-    background-color: #fff;
-    border-radius: 15px;
-    border: 1px solid #ddd;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
+    width: 100%;
   }
-  
-  .left-section,
-  .right-section {
-    display: flex;
+
+  .sub-container {
     flex-direction: column;
     align-items: center;
+    padding-bottom: 0;
   }
-  
-  /* Sport Image */
-  .sport-image img {
-    width: 100%;
-    max-width: 300px;
-    height: auto;
-    object-fit: cover;
-    transition: transform 0.3s ease;
-  }
-  
-  .sport-image img:hover {
-    transform: scale(1.05);
-  }
-  
-  /* Sport Info */
-  .sport-name {
-    font-size: 30px;
-    font-weight: bold;
-    margin-bottom: 15px;
-    color: #2c3e50;
-  }
-  
-  .sport-category {
-    font-size: 16px;
-    color: #7f8c8d;
-    margin-bottom: 20px;
-  }
-  
-  .sport-ranking,
-  .participants {
-    font-size: 18px;
-    margin-bottom: 15px;
-  }
-  
-  .participants {
-    background-color: black;
-    color: yellow;
-    padding: 10px;
-    width: fit-content;
-    font-weight: bold;
-  }
-  
-  /* Carousel Styles */
-  .carousel-container {
-    margin: 20px 0;
-  }
-  
-  .participant-member,
-  .photo {
+
+  .right-section {
+    align-items: center;
     text-align: center;
-    margin: 10px;
   }
-  
-  .participant-member img,
-  .photo img {
-    width: 110px;
-    height: 110px;
-    border-radius: 50%;
-    object-fit: cover;
-    transition: transform 0.3s ease;
-  }
-  
-  .participant-member img:hover,
-  .photo img:hover {
-    transform: scale(1.1);
-  }
-  
-  /* Sport Trailer */
-  .sport-trailer iframe {
-    border-radius: 15px;
-    width: 100%;
-    max-width: 700px;
-    max-height: 390px;
+
+  .sport-image img {
+    width: 80vw;
+    height: auto;
   }
-  
-  /* Button Styles */
+
   .buttons-sec {
-    margin-top: 30px;
-    display: flex;
-    justify-content: space-between;
-    gap: 10px;
+    flex-direction: column;
+    align-items: center;
   }
-  
+
   .book-tickets-button,
   .back-button {
-    padding: 10px 20px;
-    background-color: #2980b9;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  
-  .book-tickets-button:hover,
-  .back-button:hover {
-    background-color: #3498db;
-  }
-  
-  /* Media Queries */
-  @media (max-width: 768px) {
-    .sports-details-container {
-      grid-template-columns: 1fr;
-    }
-  
-    .sport-image img {
-      width: 100%;
-      height: auto;
-    }
-  
-    .buttons-sec {
-      flex-direction: column;
-      align-items: center;
-    }
-  
-    .book-tickets-button,
-    .back-button {
-      width: 100%;
-    }
+    width: 100%;
   }
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/assets/styles/SportsList.css b/src/assets/styles/SportsList.css
index 3d5c411..b330cd8 100644
--- a/src/assets/styles/SportsList.css
+++ b/src/assets/styles/SportsList.css
@@ -12,9 +12,10 @@
     min-height: 100vh;
     margin-inline: auto;
     position: relative;
+    flex-wrap: wrap;
 
     padding: 10px;
-    margin-bottom: 100px;
+    /* margin-bottom: 100px; */
   }
   
   .sport-list::-webkit-scrollbar {
diff --git a/src/components/Sport.js b/src/components/Sport.js
index 776f6d6..7e4a87a 100644
--- a/src/components/Sport.js
+++ b/src/components/Sport.js
@@ -9,7 +9,7 @@ function Sport({ id, image, name, ranking, participants, category }) {
       <p className="sport-ranking">
         <span className="ranking-badge">🏅</span>
         <span className="ranking-points"> {ranking} </span>
-        <span className="participants">({participants} Participants)</span>
+        <span className="participants-inlist">&nbsp;({participants} Participants)</span>
       </p>
       <h2 className="sport-name">{name}</h2>
       <p className="sport-category">{category}</p>
diff --git a/src/components/SportsDetails.js b/src/components/SportsDetails.js
index dcaff7e..6809dc0 100644
--- a/src/components/SportsDetails.js
+++ b/src/components/SportsDetails.js
@@ -102,36 +102,38 @@ const SportDetails = () => {
     <>
       <Header />
       <Navbar />
-      <div className="sport-details-container">
-        <div className="left-section">
-          <div className="sport-image">
-            <img src={sport.image} alt={`${sport.name}`} />
-          </div>
-        </div>
-        <div className="right-section">
-          <div className="name-ranking">
-            <div className="sport-name">{sport.name}</div>
-            <div className="ranking">
-              Ranking: {sport.ranking}
+      <div className="sports-details-container">
+        <div className="sub-container">
+          <div className="left-section">
+            <div className="sport-image">
+              <img src={sport.image} alt={`${sport.name}`} />
             </div>
           </div>
-          <div className="participants">
-            Participants: {sport.participants}
-          </div>
-          <div className="category">
-            Category: {sport.category}
+          <div className="right-section">
+            <div className="name-ranking">
+              <div className="sport-name">{sport.name}</div>
+              <div className="ranking">
+                Ranking: {sport.ranking}
+              </div>
+            </div>
+            <div className="participants">
+              Participants: {sport.participants}
+            </div>
+            <div className="category">
+              Category: {sport.category}
+            </div>
           </div>
         </div>
 
-        
+
         <div className='buttons-sec'>
-            <Link to="/book-tickets">
-              <button className='book-tickets-button'>Book Tickets</button>
-            </Link>
-            <Link to="/sports-activities">
-              <button className='back-button'>Back</button>
-            </Link>
-          </div>
+          <Link to="/book-tickets">
+            <button className='book-tickets-button'>Book Tickets</button>
+          </Link>
+          <Link to="/sports-activities">
+            <button className='back-button'>Back</button>
+          </Link>
+        </div>
       </div>
       <Footer />
     </>