diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
index 20aa6f69..38b05b03 100644
--- a/src/Components/TopContainer.css
+++ b/src/Components/TopContainer.css
@@ -1,15 +1,4 @@
-.nav-item a span {
-  white-space: nowrap;
-  color: white;
-}
-
-.nav-item a:hover span {
-  color: #cf00a3; /* Pink color on hover */
-}
-.notification-item:hover {
-  background-color: #cf00a3;
-  color: white; /* Optional: Change text color for better contrast */
-}
+/* General navbar styles */
 .navbar {
   width: 100%;
   height: auto;
@@ -25,78 +14,68 @@
   margin-left: 120px;
 }
 
-.profileContainer .go-pro-btn {
-  padding: 10px 20px; /* Adjust padding to change the button size */
-}
-
+/* Navigation items container */
 .largeview {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
+  flex-direction: row; /* Ensure horizontal alignment */
 }
 
+/* Individual nav items */
 .largeview .nav-item {
   margin-right: 10px;
 }
 
+/* Nav item links */
 .largeview .nav-item a {
   color: #ffffff;
   text-decoration: none;
   transition: color 0.3s ease, font-size 0.3s ease;
-  align-self: right;
+  display: flex;
+  align-items: center; /* Center items vertically */
 }
 
+/* Hover effect for nav item links */
 .largeview .nav-item a:hover {
   color: #cf00a3;
   font-size: 1.05rem;
 }
 
+/* Input box styles */
 .inputBox {
   position: relative;
-}
-
-.o1 { order: 1; }
-.o2 { order: 2; }
-.o3 { order: 3; }
-
-.input-div{
   display: flex;
-  width: 100%;
-  justify-content: start;
   align-items: center;
-  gap: 0.5rem;
 }
 
-.container .inputBox input{
-  padding: 0.5rem 2rem;
-  
-
+.inputBox input {
+  padding: 0.5rem 2rem; /* Add padding to the right for the icon */
+  border-radius: 4px;
+  border: 1px solid #ccc;
 }
 
-@media screen and (max-width: 1500px) {
-  .mobview .inputBox {
-    margin-top: 10px; /* Add 10px space above the search box */
-    padding: 5px 5px;
-  }
-
-  .mobview .searchbtn {
-    font-size: 1.3rem; /* Adjust the search button size */
-  }
-
-  .mobview #search_results {
-    top: 50px; /* Adjust position of search results */
-  }
+.inputBox input:focus {
+  outline: none; /* Remove default outline on focus */
+  border-color: #cf00a3; /* Change border color on focus */
 }
 
+/* Search button styles */
 .searchbtn {
+  position: absolute;
+  top: 10px;
+  right: 320px; /* Adjust to align with input padding */
   color: #757380;
   font-size: 1.5rem;
+  cursor: pointer; /* Ensure cursor indicates clickable */
 }
 
+/* Search results container */
 #search_results {
   position: absolute;
   top: 40px;
+  height: 200px;
   background: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: 100%;
@@ -109,15 +88,104 @@
   font-weight: bold;
 }
 
+/* Notification styles */
+.notification-item:hover {
+  background-color: #cf00a3;
+  color: white; /* Change text color for better contrast */
+}
+
+/* Mobile view adjustments */
+@media screen and (max-width: 1500px) {
+  .navbar {
+    margin-left: 0; /* Adjust margin for smaller screens */
+  }
+
+  .largeview {
+    flex-direction: row; /* Ensure horizontal alignment */
+    flex-wrap: nowrap; /* Prevent wrapping to the next line */
+  }
+}
+
+@media (max-width: 830px) {
+  .navbar {
+    width: 80vw; /* Adjust navbar width for smaller screens */
+  }
+}
+
+@media (max-width: 650px) {
+  .navbar {
+    width: 80vw;
+  }
+
+  .profileIconlogin {
+    width: 140px !important;
+    font-size: 12px !important;
+  }
+}
+
+@media (max-width: 525px) {
+  .topContainer {
+    z-index: 100;
+  }
+
+  .navbar {
+    flex-direction: row;
+    flex-wrap: wrap; /* Wrap items if needed on very small screens */
+    height: min-content;
+    gap: 1rem;
+    margin-left: 0;
+    border-radius: 1rem;
+    padding: 1rem;
+    width: 100%;
+  }
+
+  .largeview {
+    flex-direction: row; /* Ensure horizontal alignment */
+  }
+
+  .inputBox {
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    padding: 0px;
+  }
+  
+  .inputBox input {
+    padding: 0.5rem;
+  }
+  
+  .profileContainer .go-pro-btn {
+    padding: 0.5rem 1rem;
+  }
+  
+  .bars {
+    padding: 1rem;
+  }
+  
+  .searchbtn {
+    position: relative;
+    width: auto;
+    margin-top: 20px;
+  }
+}
+
+/* Additional styles */
+.nav-item a span {
+  white-space: nowrap;
+  color: white;
+}
+
+.nav-item a:hover span {
+  color: #cf00a3; /* Pink color on hover */
+}
+
 #list li {
   flex-shrink: 0; /* Prevent items from shrinking */
 }
 
-/*.mobview {*/
-/*  display: none;*/
-/*}*/
-
-.bars{
+.bars {
   display: none;
 }
 
@@ -202,68 +270,3 @@
     transition: 0.3s;
   }
 }
-
-@media (max-width: 830px) {
-  .navbar {
-    width: 80vw;
-  }
-}
-
-@media (max-width: 650px) {
-  .navbar {
-    width: 80vw;
-  }
-
-  .profileIconlogin {
-    width: 140px !important;
-    font-size: 12px !important;
-  }
-}
-
-
-
-@media (max-width: 525px){
-  .topContainer{
-    z-index: 100;
-  }
-  .navbar{
-    flex-direction: row;
-    flex-wrap: wrap;
-    height: min-content;
-    gap: 1rem;
-    margin-left: 0;
-    border-radius: 1rem;
-    padding: 1rem;
-    width: 100%;
-  }
-  .o1 { order: 1; }
-  .o2 { order: 3; }
-  .o3 { order: 2; }
-
-  .topContainer .inputBox{
-    width: 100%;
-    height: auto;
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    padding: 0px;
-  }
-  .container .inputBox input{
-    padding: 0.5rem;
-    
-
-  }
-  .profileContainer .go-pro-btn{
-    padding: 0.5rem 1rem;
-  }
-  .bars{
-    padding: 1rem;
-  }
- 
-
-  .searchbtn{
-    position: relative;
-    width: auto;
-
-  }
-}
diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js
index 7cb54e90..96c933d8 100644
--- a/src/Components/TopContainer.js
+++ b/src/Components/TopContainer.js
@@ -35,7 +35,7 @@ function TopContainer() {
   useEffect(() => {
     if (input.length > 0) {
       const results = search.filter((item) =>
-        item.title.toLowerCase().includes(input.toLocaleLowerCase())
+        item.title.toLowerCase().includes(input.toLowerCase())
       );
       setSearchResult(results);
     } else {
@@ -91,14 +91,12 @@ function TopContainer() {
     setMobMenu(!mobMenu);
   };
 
-  // Function to handle sign out
   const handleSignOut = () => {
     localStorage.removeItem('username');
     setIsLoggedIn(false);
     setUsername('');
   };
 
-  // Check local storage for username on component mount
   useEffect(() => {
     const storedUsername = localStorage.getItem('username');
     if (storedUsername) {
@@ -127,38 +125,19 @@ function TopContainer() {
           </div>
         </div>
 
-        {/*<div className="mobview o1">*/}
-        {/*  <div className="bars" onClick={toggleMenu}><FontAwesomeIcon icon={faBars} /></div>*/}
-        {/*  <div id="shortview" className={mobMenu ? 'show' : ''}>*/}
-        {/*    <ul className="open">*/}
-        {/*      <li><a href='/'><FontAwesomeIcon icon={faHome} /> Home</a></li>*/}
-        {/*      <li><a href='/about'><FontAwesomeIcon icon={faInfoCircle} /> About Us</a></li>*/}
-        {/*      <li><a href='/services'><FontAwesomeIcon icon={faWrench} /> Services</a></li>*/}
-        {/*      <li><a href='/careers'><FontAwesomeIcon icon={faBriefcase} /> Careers</a></li>*/}
-        {/*      <li><a href='/freelancer'><FontAwesomeIcon icon={faUsers} /> Freelancer</a></li>*/}
-        {/*      <li><a href='/contacts'><FontAwesomeIcon icon={faEnvelope} /> Contact</a></li>*/}
-        {/*      <li><a href='/RateUs'><FontAwesomeIcon icon={faStar} /> RateUs</a></li>*/}
-        {/*      <li><a href='/blogs'><FontAwesomeIcon icon={faNewspaper} /> Blogs</a></li>*/}
-        {/*      <li><a href='/faq'><FontAwesomeIcon icon={faQuestionCircle} /> FAQ</a></li>*/}
-        {/*    </ul>*/}
-        {/*  </div>*/}
-        {/*</div>*/}
-
         <div className="inputBox o2">
           <div className="input-div">
-          <i style={{ cursor: isMobile ? 'pointer' : 'default' }} onClick={searchbtnclick} className="searchbtn">
-            <BiSearchAlt />
-          </i>
-
-          <input
-            ref={searchbar}
-            type="text"
-            placeholder="Search projects, users"
-            onChange={(e) => setInput(e.target.value)}
-          />
+            <i style={{ cursor: isMobile ? 'pointer' : 'default' }} onClick={searchbtnclick} className="searchbtn">
+              <BiSearchAlt />
+            </i>
+            <input
+              ref={searchbar}
+              type="text"
+              placeholder="Search projects, users"
+              onChange={(e) => setInput(e.target.value)}
+            />
           </div>
           
-          
           {searchResult ? (
             <div id="search_results">
               {searchResult.map((item, index) => (
@@ -175,29 +154,25 @@ function TopContainer() {
           ) : null}
         </div>
 
-        <div className="profileContainer o3" >
+        <div className="profileContainer o3">
           <a href="/pricing">
             <button className="go-pro-btn">Go Pro</button>
           </a>
 
-
-          <div className="notification-container"  style={{ gap: "10px" }} ref={dropdownRef}>
+          <div className="notification-container" style={{ gap: "5px" }} ref={dropdownRef}>
             <div className="profileIcon" onClick={toggleDropdown}>
               <FaBell />
             </div>
             {isDropdownOpen && (
               <div className="dropdown-content">
                 <div className="notification-item">
-                  User "JohnDoe" has uploaded a new project titled "Introduction
-                  to Machine Learning." Check it out now!
+                  User "JohnDoe" has uploaded a new project titled "Introduction to Machine Learning." Check it out now!
                 </div>
                 <div className="notification-item">
-                  User "JaneSmith" has commented on your project "Data
-                  Visualization with D3.js." View the comment now.
+                  User "JaneSmith" has commented on your project "Data Visualization with D3.js." View the comment now.
                 </div>
                 <div className="notification-item">
-                  User "TechMaster" has updated the project "Building a RESTful
-                  API with Node.js." See what's new!
+                  User "TechMaster" has updated the project "Building a RESTful API with Node.js." See what's new!
                 </div>
               </div>
             )}
@@ -223,7 +198,7 @@ function TopContainer() {
               </div>
             </>
           ) : (
-            <Link to="/Login" className="profileIconlogin"style={{ marginRight: "20px" }}>
+            <Link to="/Login" className="profileIconlogin" style={{ marginRight: "20px" }}>
               Launch Your Journey
             </Link>
           )}