diff --git a/assets/css/signin.css b/assets/css/signin.css
index fcb49c4b..5253c3dc 100644
--- a/assets/css/signin.css
+++ b/assets/css/signin.css
@@ -9,6 +9,73 @@ body {
     align-items: center;
     height: 100vh;
 }
+.navbar {
+    position: absolute;
+    top:0;
+    left:0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rgba(255, 255,255,0.07);
+    /* backdrop-filter: blur(10px); */
+    padding: 1rem;
+}
+
+.navbar .logo {
+    font-size:2rem;
+    color: #fff;
+    font-weight: 700;
+    text-decoration: none;
+    font-family: sans-serif;
+}
+
+.navbar ul {
+    list-style: none;
+    display: flex;
+}
+
+.navbar ul li {
+    margin-left: 20px;
+    font-size: 1.3rem;
+    color:white;
+}
+
+.navbar ul li a {
+    text-decoration: none;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    transition: background-color 0.3s ease;
+}
+
+.navbar ul li a:hover {
+    background-color: #FEAFBF;
+    color: white;
+    border-radius: 5px;
+}
+.nav-link {
+    text-decoration: none;
+    position: relative;
+    padding-bottom: 2px;
+  }
+
+  .nav-link::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: rgb(255, 255, 255);
+    visibility: hidden;
+    transform: scaleX(0);
+    transition: all 0.3s ease-in-out;
+  }
+
+  .nav-link:hover::after {
+    visibility: visible;
+    transform: scaleX(1);
+  }
 
 .container {
     width: 100%;
diff --git a/assets/css/style.css b/assets/css/style.css
index ad272a9b..535cce90 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -142,6 +142,37 @@ body.nav-active {
 /*-----------------------------------*\
   #REUSED STYLE
 \*-----------------------------------*/
+/* Styling for the navbar links */
+.navbar-link {
+  position: relative;
+  display: inline-block;
+  color: #333; /* Adjust the color as needed */
+  text-decoration: none;
+  font-weight: 500;
+  padding-bottom: 5px;
+}
+
+/* Underline effect */
+.navbar-link::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #ff69b4; /* Pink color for the underline */
+  transition: width 0.3s ease-in-out;
+}
+
+/* Hover effect to show the underline */
+.navbar-link:hover::after {
+  width: 100%;
+}
+
+/* Adjust color on hover if needed */
+.navbar-link:hover {
+  color: #ff69b4; /* Optionally change text color to pink on hover */
+}
 
 .container {
   padding-inline: 16px;
diff --git a/index.html b/index.html
index 01b7a937..7c3c7dde 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,7 @@
   <header class="header" data-header>
 
 
-    <div class="container">
+    <div class="container" style="margin-left: 13rem;">
 
       <a href="#">
         <img src="./assets/images/Skillwise_logo-removebg-preview.png" width="50" height="10" alt="SkillWise home">
@@ -86,10 +86,10 @@
           </button>
         </div>
 
-        <ul class="navbar-list">
+        <ul class="navbar-list" style="width: 50vw;">
 
 
-          <li class="navbar-item">
+          <li class="navbar-item" style="margin-left: 1rem;">
             <a href="#home" class="navbar-link title-sm" data-nav-link>Home</a>
           </li>
 
@@ -118,11 +118,16 @@
           <a href="../Faq.html" class="navbar-link title-sm" data-nav-link>FAQ</a>
           </li>
 
+
+          <li class="navbar-item"></li>
+          <a href="/signin.html" class="navbar-link title-sm" data-nav-link>LogIn</a>
+          </li>
+
         </ul>
 
       </nav>
 
-      <div class="navRightSide">
+      <!-- <div class="navRightSide">
         <div class="searchBox">
           <input class="searchInput" type="text" name="" placeholder="Search something">
           <button class="searchButton SearchBTN" href="#">
@@ -162,17 +167,18 @@
 
 
 
-        <a href="../signin.html" class="btn btn-secondary">Start Free Trial</a>
 
-        <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
-          <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
-        </button>
-        <div class="containers">
-          <button id="theme-toggle">
-            <ion-icon id="theme-icon" name="sunny-outline"></ion-icon>
-          </button>
-        </div>
 
+      </div> -->
+      <a href="../signin.html" class="btn">Start Free Trial</a>
+
+      <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
+        <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
+      </button>
+      <div class="containers">
+        <button id="theme-toggle">
+          <ion-icon id="theme-icon" name="sunny-outline"></ion-icon>
+        </button>
       </div>
 
       <div class="overlay" data-overlay data-nav-toggler></div>
diff --git a/signin.html b/signin.html
index 7f9f28b8..6fa353e5 100644
--- a/signin.html
+++ b/signin.html
@@ -8,7 +8,19 @@
   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
 </head>
-<body>
+<body style="overflow: hidden;">
+  <header>
+    <nav class="navbar">
+      <a href="./index.html" class="logo">SkillWise</a>
+      <ul style="margin-right: 2rem;">
+        <li>
+          <a href="./index.html" class="nav-link" style="margin-right: 0.5rem;">Home</a>
+          <i class="fa-solid fa-house"></i>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  
     <div class="container">
         <div class="form-container">
             <!-- Add SkillWise Icon/Logo -->
diff --git a/signup.html b/signup.html
index 00e4cff6..7f1d61b7 100644
--- a/signup.html
+++ b/signup.html
@@ -9,6 +9,17 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
 </head>
 <body>
+    <header>
+        <nav class="navbar">
+          <a href="./index.html" class="logo">SkillWise</a>
+          <ul style="margin-right: 2rem;">
+            <li>
+              <a href="./index.html" class="nav-link" style="margin-right: 0.5rem;">Home</a>
+              <i class="fa-solid fa-house"></i>
+            </li>
+          </ul>
+        </nav>
+      </header>
     <div class="container">
         <div class="form-container">
             <!-- Add SkillWise Icon/Logo -->