diff --git a/src/App.css b/src/App.css
index 36aeb4b..f782913 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,16 +1,16 @@
-
-
 @import "slick-carousel/slick/slick.css";
 @import "slick-carousel/slick/slick-theme.css";
 
-*{
+* {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 .App {
   text-align: center;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 .App-logo {
@@ -24,7 +24,6 @@
   }
 }
 
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -52,8 +51,6 @@
 /* General Styles */
 body {
   font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
   background-color: #f4f4f4;
 }
 
@@ -63,7 +60,6 @@ header {
   color: white;
   padding: 1rem 0;
   text-align: center;
-  
 }
 
 header h1 {
@@ -73,11 +69,9 @@ header h1 {
 
 header nav ul {
   list-style: none;
-  padding: 0;
   display: flex;
   justify-content: center;
   margin-top: 1rem;
-  
 }
 
 header nav ul li {
@@ -86,49 +80,68 @@ header nav ul li {
   padding: 10px;
   border-radius: 10px;
   background-color: #282c34;
+  transition: background-color 0.3s ease;
 }
 
+header nav ul li:hover {
+  background-color: #444;
+}
 
+/* Grid List Styles */
 .movie-list, .sport-list {
   display: grid; 
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
   justify-items: center;
   align-items: center;
+  padding: 20px;
 }
 
 .movie, .sport {
   border-radius: 5px;
   text-align: center;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 15px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.movie:hover, .sport:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
 }
 
 .movie h2, .sport h2 {
-  font-size: 15px;
+  font-size: 1rem;
   margin: 0.5rem 0;
-  color: white;
+  color: #333;
 }
 
 .movie p, .sport p {
-  font-size: 14px;
-  color: #c1bdbd;
+  font-size: 0.875rem;
+  color: #666;
 }
 
+/* Button Styles */
 .movie button, .sport button {
   background-color: #ff0000;
   border: none;
   color: white;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 0.875rem;
   padding: 0.5rem 1rem;
   border-radius: 3px;
   transition: background-color 0.3s ease;
 }
 
-.movie button:hover {
-  background-color: #ff0000;
+.movie button:hover, .sport button:hover {
+  background-color: #cc0000;
 }
 
-.slider-container{
+/* Slider Styles */
+.slider-container {
   width: 100%;
   overflow: hidden;
+  margin: 20px 0;
 }
 
diff --git a/src/components/Header.js b/src/components/Header.js
index 5779677..f49689a 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -24,42 +24,40 @@ function Header({ onSearch }) {
 
   const handleSearch = (e) => {
     setSearchTerm(e.target.value);
-    onSearch(e.target.value);
+    if (onSearch) {
+      onSearch(e.target.value);
+    }
   };
 
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
-    console.log(isMenuOpen);
   };
 
   return (
-    <header
-      className="header container-fluid d-flex align-items-center justify-content-between p-3"
-    >
-      <div className="logo " style={{height:"70px"}}>
+    <header className="header container-fluid d-flex align-items-center justify-content-between p-3">
+      <div className="logo" style={{ height: "70px" }}>
         <a href="https://eventmint.vercel.app/">
-          <img src={Logo} alt="Logo" className="aspect-[3/2] object-contain"/>
+          <img src={Logo} alt="Logo" className="aspect-[3/2] object-contain" />
         </a>
       </div>
+
       <div className="search-location-container d-flex justify-center align-items-center w-100">
-        <div
-          className="search-bar input-group w-75"
-          style={{ marginLeft: "5px", marginRight:"-17px" }}
-        >
+        <div className="search-bar input-group w-75" style={{ marginLeft: "5px", marginRight: "-17px" }}>
+          <label htmlFor="search-input" className="visually-hidden">Search</label>
           <input
+            id="search-input"
             type="text"
             className="form-control"
             placeholder="Search for Movies, Events, Plays, Sports and Activities"
             value={searchTerm}
-            onChange={handleSearch} // Update the search term on input change
+            onChange={handleSearch}
           />
           <span className="input-group-text">
             <i className="bi bi-search"></i>
           </span>
         </div>
-        <select
-          className="location form-select w-auto ml-10"
-        >
+
+        <select className="location form-select w-auto ml-10">
           <option value="Nagpur">Nagpur</option>
           <option value="Mumbai">Mumbai</option>
           <option value="Delhi">Delhi</option>
@@ -70,10 +68,7 @@ function Header({ onSearch }) {
 
       <div className="location-signin d-flex align-items-center">
         {user ? (
-          <button
-            className="btn btn-outline-primary"
-            onClick={() => dispatch(logout(navigate))}
-          >
+          <button className="btn btn-outline-primary" onClick={() => dispatch(logout(navigate))}>
             Log out
           </button>
         ) : (
@@ -86,6 +81,7 @@ function Header({ onSearch }) {
             </button>
           </div>
         )}
+
         <div className="side-menu-toggle ml-4">
           <button className="btn btn-outline-secondary" onClick={toggleMenu}>
             ☰