diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 33b2e5f..0e86cd4 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useEffect } from "react";
 import SunImage from "../../images/sun.png";
 import MoonImage from "../../images/moon.png";
-import { Link } from "react-router-dom";
+import { NavLink,Link } from "react-router-dom";
 import Hamburger from "hamburger-react";
 
 const Header = () => {
@@ -62,24 +62,29 @@ const Header = () => {
             isOpen ? "opacity-100" : "sm:opacity-100 opacity-0"
           }`}
         >
-          <Link
+          <NavLink
             to="/"
-            className="relative bg-indigo-700 sm:px-2 pl-8 sm:py-1 py-3 cursor-pointer opacity-90 hover:opacity-100"
+            activeClassName="navbar__NavLink--active"
+            className="navbar__NavLink relative bg-indigo-700 sm:px-2 pl-8 sm:py-1 py-3 cursor-pointer opacity-90 hover:opacity-100"
           >
             Home
-          </Link>
-          <Link
+          </NavLink>
+          <NavLink
             to="/about"
-            className="relative bg-indigo-700 sm:px-2 pl-8 sm:py-1 py-3 cursor-pointer opacity-90 hover:opacity-100"
+            activeClassName="navbar__NavLink--active"
+
+            className="navbar__NavLink relative bg-indigo-700 sm:px-2 pl-8 sm:py-1 py-3 cursor-pointer opacity-90 hover:opacity-100"
           >
             About
-          </Link>
-          <Link
+          </NavLink>
+          <NavLink
             to="/contributors"
-            className="relative bg-indigo-700 sm:px-2 pl-8 sm:py-1 py-3 cursor-pointer opacity-90 hover:opacity-100"
+            activeClassName="navbar__NavLink--active"
+
+            className="navbar__NavLink relative bg-indigo-700 sm:px-2 pl-8 sm:py-1 py-3 cursor-pointer opacity-90 hover:opacity-100"
           >
             Contributors
-          </Link>
+          </NavLink>
           <img
             src={isDarkTheme ? SunImage : MoonImage}
             id="icon"
diff --git a/src/index.css b/src/index.css
index bd6213e..88c398d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+  .navbar__link:hover {
+    transform: translateY(-2px);
+    color: gray;
+  }
+  
+  .active {
+    border-bottom: 3px solid #29b6f6;
+    color: black !important;
+    transition: border-bottom .5s ease-in-out;
+  }
+  
\ No newline at end of file