diff --git a/client/src/components/Header/Header.scss b/client/src/components/Header/Header.scss
index 61cfa62ca4f514367176922069520f752ac182dd..370c82dcf2b8097bc8d67f0ab14f4d3ea2911370 100644
--- a/client/src/components/Header/Header.scss
+++ b/client/src/components/Header/Header.scss
@@ -28,6 +28,15 @@
 }
 
 .nav-item {
+  padding: 4px;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
-}
\ No newline at end of file
+}
+
+.nav-item-active {
+  padding: 4px;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  pointer-events: none;
+  background-color: white;
+}
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index 4128437f63217bbc68ef527c4d634177b87d57eb..94a1e527f05708f33171ba81505e60b902787ee5 100644
--- a/client/src/components/Header/Header.tsx
+++ b/client/src/components/Header/Header.tsx
@@ -1,11 +1,19 @@
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
-import './Header.scss';
 import { userToDashboard } from '../../helpers/UserType';
+import './Header.scss';
+
+type NavLinkRenderProps = { isActive: boolean };
 
 function Header() {
   const { isAuth, user } = useAuth();
   
+  const activeClass = (props: NavLinkRenderProps) => {
+    if (props.isActive)
+      return 'nav-item-active';
+    return 'nav-item';
+  };
+
   return (
     <>
       <div className='header'>
@@ -13,17 +21,17 @@ function Header() {
           <span className='header-title'>Airline Booking</span>
 
           <nav className='nav'>
-            <Link to={'/'} className='nav-item'>Home</Link>
+            <NavLink to={'/'} className={activeClass}>Home</NavLink>
 
             {isAuth ?
             <div>
-              <Link to={userToDashboard(user)} className='nav-item'>Dashboard</Link>
-              <Link to={'booking/query'} className='nav-item'>Book a Flight</Link>
-              <Link to={'logout'} className='nav-item'>Logout</Link>
+              <NavLink to={userToDashboard(user)} className={activeClass} >Dashboard</NavLink>
+              <NavLink to={'booking/query'} className={activeClass}>Book a Flight</NavLink>
+              <NavLink to={'logout'} className={activeClass}>Logout</NavLink>
             </div> :
             <div>
-              <Link to={'login'} className='nav-item'>Login</Link>
-              <Link to={'register'} className='nav-item'>Register</Link>
+              <NavLink to={'login'} className={activeClass}>Login</NavLink>
+              <NavLink to={'register'} className={activeClass}>Register</NavLink>
             </div>}
           </nav>
         </div>