diff --git a/csedge.courses/Resources.html b/csedge.courses/Resources.html
index 4a96a11..de425b0 100644
--- a/csedge.courses/Resources.html
+++ b/csedge.courses/Resources.html
@@ -48,7 +48,7 @@
     <nav>
         <h1 id="home">CSEdge</h1>
         <img style="outline: none;" src="./Images/Menu.svg" alt="Menu">
-        <ul>
+        <ul class="navbar-links">
             <li><a href="./index.html">Home</a></li>
             <li><a href="./index.html#about">About</a></li>
             <li><a href="./index.html#internship">Internship</a></li>
diff --git a/csedge.courses/index.html b/csedge.courses/index.html
index c33b15a..60027f9 100644
--- a/csedge.courses/index.html
+++ b/csedge.courses/index.html
@@ -81,7 +81,7 @@ <h2>Chatbot</h2>
        
         <h1 id="home">CSEdge</h1>
         <img style="outline: none;" src="./Images/Menu.svg" alt="Menu">
-        <ul class=" ">
+        <ul class=" navbar-links">
             <li><a href="#home"><i class="fa-solid fa-house" style="color: #000306;"></i>Home</a></li> 
 
             <li><a href="#AboutUS"> <i class="fa-solid fa-circle-info" style="color: #000306;"></i>About</a></li>
diff --git a/csedge.courses/internship.html b/csedge.courses/internship.html
index 4bc8c14..a27eb39 100644
--- a/csedge.courses/internship.html
+++ b/csedge.courses/internship.html
@@ -42,7 +42,7 @@
     <nav>
         <h1 id="home">CSEdge</h1>
         <img style="outline: none;" src="./Images/Menu.svg" alt="Menu">
-        <ul>
+        <ul class="navbar-links">
             <li><a href="./index.html">Home</a></li>
             <li><a href="./index.html#about">About</a></li>
             <li><a href="#internship">Internship</a></li>
diff --git a/csedge.courses/navbar.css b/csedge.courses/navbar.css
index dcbd033..7f42c45 100644
--- a/csedge.courses/navbar.css
+++ b/csedge.courses/navbar.css
@@ -32,11 +32,29 @@ nav ul {
 }
 nav ul li{
     padding-right: 2rem;
+    position: relative;
 }
 nav ul li a:hover {
     color: #222;
     transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-  
+}
+
+.navbar-links li a::after {
+    content: ' ' !important;
+    display: inline-flex;
+    position: absolute;
+    width: 0%;
+    height: 2px !important;
+    top: 30px;
+    left: 0px;
+}
+
+
+.navbar-links li:hover > a::after {
+    display: inline-flex;
+    transition: all 0.2s linear;
+    width: 100% !important;
+    background-color: #222 !important;
 }
 
 @media screen and (max-width: 768px) {