diff --git a/frontend/src/components/navbar/index.js b/frontend/src/components/navbar/index.js
index b827d0e5..865ff37e 100644
--- a/frontend/src/components/navbar/index.js
+++ b/frontend/src/components/navbar/index.js
@@ -65,7 +65,7 @@ class Navbar extends Component {
         return (
           <NavbarItem active={false} key={path}>
             <Link to="http://gsoc.cloudcv.org" target="_blank">
-              {path}
+              <span className="hover-underline-animation">{path}</span>
             </Link>
           </NavbarItem>
         );
@@ -74,7 +74,7 @@ class Navbar extends Component {
         return (
           <NavbarItem active={false} key={path}>
             <Link to="http://gci.cloudcv.org" target="_blank">
-              {path}
+              <span className="hover-underline-animation">{path}</span>
             </Link>
           </NavbarItem>
         );
@@ -83,7 +83,13 @@ class Navbar extends Component {
       let formattedPath = path.toLowerCase().replace(/ /g, "-");
       return (
         <NavbarItem active={active} key={path}>
-          <Link to={`/${formattedPath}`}>{path === "" ? "Home" : path}</Link>
+          <Link to={`/${formattedPath}`}>
+            {path === "" ? (
+              <span className="hover-underline-animation">{"Home"}</span>
+            ) : (
+              <span className="hover-underline-animation">{path}</span>
+            )}
+          </Link>
         </NavbarItem>
       );
     });
diff --git a/frontend/src/styles/partials/_navbar.scss b/frontend/src/styles/partials/_navbar.scss
index 32b3b265..79aab265 100644
--- a/frontend/src/styles/partials/_navbar.scss
+++ b/frontend/src/styles/partials/_navbar.scss
@@ -73,6 +73,8 @@
           color: $secondary-color;
         }
 
+        
+
         a {
           display: block;
           padding: 0.5 * $gutter-width 0 0.5 * $gutter-width 0;
@@ -136,3 +138,27 @@
     }
   }
 
+  .hover-underline-animation {
+    display: inline-block;
+    position: relative;
+   
+    margin-top: -80px;
+  }
+  
+  .hover-underline-animation::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: $secondary-color;
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+  }
+  
+  .hover-underline-animation:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+  }
\ No newline at end of file