diff --git a/frontend/src/components/HomeComponents/NavList.js b/frontend/src/components/HomeComponents/NavList.js
index 3589b92..c247de8 100644
--- a/frontend/src/components/HomeComponents/NavList.js
+++ b/frontend/src/components/HomeComponents/NavList.js
@@ -18,6 +18,38 @@ export default function NavList() {
   return (
     <div>
       <div id="menulinks" class="menulinks duration-500 md:static md:min-h-fit absolute min-h-[28vh] left-[0%] top-[-100%] md:w-auto w-[100%] flex justify-center py-5 fixed ">
+
+      <ul className="flex md:flex-row flex-col md:items-center md:gap-[4vw] gap-8 text-white font-Roboto font-semibold">
+  <li>
+    <NavLink
+      to="/"
+      className={({ isActive }) => (isActive ? "text-[#FFCC33]" : "")}
+    >
+      Product
+    </NavLink>
+  </li>
+  <li>
+    <NavLink
+      onClick={() => {
+        ScrollDown();
+      }}
+      className="hover:text-[#FFCC33]"
+    >
+      Services
+    </NavLink>
+  </li>
+  <li>
+    <NavLink to="/login" className="hover:text-[#FFCC33]">
+      Login
+    </NavLink>
+  </li>
+  <li>
+    <NavLink to="/signup" className="hover:text-[#FFCC33]">
+      Signup
+    </NavLink>
+  </li>
+</ul>
+=======
         <ul className="flex md:flex-row flex-col md:items-center md:gap-[4vw] gap-8 text-white font-Roboto font-semibold ">
           <li>
             <NavLink
@@ -29,6 +61,9 @@ export default function NavList() {
           </li>
           <li>
             <NavLink
+                      className={({ isActive }) => 
+                                   `hoverEffect ${isActive ? "text-[#0945E8" : ""}`
+                                }
               onClick={() => {
                 ScrollDown();
               }}
@@ -37,12 +72,21 @@ export default function NavList() {
             </NavLink>
           </li>
           <li>
-            <NavLink to="/login">Login</NavLink>
+            <NavLink to="/login" 
+               className={({ isActive }) => 
+                                   `hoverEffect ${isActive ? "text-[#0945E8" : ""}`
+                                }
+            >Login</NavLink>
           </li>
           <li>
-            <NavLink to="/signup">Signup</NavLink>
+            <NavLink to="/signup" 
+                className={({ isActive }) => 
+                                   `hoverEffect ${isActive ? "text-[#0945E8" : ""}`
+                                }
+            >Signup</NavLink>
           </li>
         </ul>
+
       </div>
       <div className="flex items-center gap-6">
           <ion-icon
diff --git a/frontend/src/components/HomeComponents/navbar.css b/frontend/src/components/HomeComponents/navbar.css
index fb68922..4fff5b5 100644
--- a/frontend/src/components/HomeComponents/navbar.css
+++ b/frontend/src/components/HomeComponents/navbar.css
@@ -17,3 +17,7 @@ ion-icon {
     }   
     
   
+    .hoverEffect:hover {
+      color: #0945e8;
+    }
+    
\ No newline at end of file