diff --git a/public/choose-file.html b/public/choose-file.html
index f86179e..8d748c3 100644
--- a/public/choose-file.html
+++ b/public/choose-file.html
@@ -4,6 +4,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
   <title>Choose Login Page</title>
   <style>
     * {
@@ -92,23 +94,141 @@
       margin: auto;
       padding: 10px;;
     }
+
+    
+/* navbar styling */
+
+.navbar {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: rgba(0, 0, 0, 0.8);
+    justify-content: space-between;
+    position: fixed; /* Make navbar fixed to the top */
+    top: 0; /* Position at the top of the viewport */
+    width: 100%; /* Ensure it spans the full width */
+    z-index: 2000; /* Ensures it stays on top of other content */
+    /* background-color: #66B2FF; */
+  }
+  
+  .navbar:hover{
+    display: inline-block;
+    box-shadow: 0px 0px 5px black;
+  }
+  
+  #language{
+    position: fixed;
+    bottom: 4vh;
+    background-color: rgba(0, 0, 255, 0.718);
+    
+  
+    height: 50px;
+    padding: 10px;
+    left: 1vw;
+  }
+  
+  .gtranslate_wrapper{
+    font-size: 20px;
+    font-weight: 500;
+  }
+   
+  nav ul {
+    overflow: auto;
+  }
+  
+  nav ul li {
+    list-style: none;
+    float: right;
+    margin: 10px 16px;
+    padding: 6px;
+    font-size: 22px;
+    /* color: white; */
+    cursor: pointer;
+    color: rgb(247, 246, 240); /* Black text color */
+    transition: color 0.3s, background-color 0.3s; 
+  }
+  
+  /* nav ul li a {
+    color: #333333;
+    text-decoration: none;
+  } */
+  
+  
+  #navbar li a{
+    display:flex;
+    align-items: center;
+    justify-content:center;
+    gap:7px;
+    font-family: "Space Grotesk", sans-serif;
+  }
+  
+  #navbar li:hover{
+    color: #ff5100;
+    text-shadow: 2px 2px 2px black;
+  }
+  nav ul li:hover {
+    border-bottom: 1.7px solid  white;
+  }
+  
+  nav ul li a {
+      text-decoration: none; /* No underline */
+      color: inherit; /* Inherit color from parent */
+  }
+  
+  nav ul li:first-child {
+    margin: 10px 28px 10px 10px;
+    border: 2px solid white;
+    padding: 6px 22px;
+    border-radius: 12px;
+  }
+  
+  nav ul li:first-child:hover {
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 12px;
+    border-image: linear-gradient(
+      -225deg,
+      #231557 0%,
+      #44107a 29%,
+      #ff1361 100%,
+      #fef850 100%
+    );
+    border-image-slice: 1;
+  }
+
   </style>
 </head>
 
 <body>
   
 
-  <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
-    <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer ></script>
-  <img src="images/moon.webp" id="icon">
+  <div class="navbar">
+    <div class="logo"></div>
+    <div class="main">
+        <nav>
+            <ul id="navbar">
+                <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
+
+                <li id="language">
+                    <div class="gtranslate_wrapper"></div>
+                    <script>
+                        window.gtranslateSettings = {
+                            default_language: "en",
+                            detect_browser_language: true,
+                            wrapper_selector: ".gtranslate_wrapper",
+                            font_size: 100,
+                        };
+                    </script>
+                    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
 
   <div class="container">
     <h2>Select Who You Are</h2>
diff --git a/public/choose-signup-file.html b/public/choose-signup-file.html
index 4dc327b..82f9665 100644
--- a/public/choose-signup-file.html
+++ b/public/choose-signup-file.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Choose Signup Page</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
   <style>
     * {
       box-sizing: border-box;
@@ -93,21 +95,140 @@
     margin: auto;
     padding: 10px;;
     }
+
+    
+/* navbar styling */
+
+.navbar {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: rgba(0, 0, 0, 0.8);
+    justify-content: space-between;
+    position: fixed; /* Make navbar fixed to the top */
+    top: 0; /* Position at the top of the viewport */
+    width: 100%; /* Ensure it spans the full width */
+    z-index: 2000; /* Ensures it stays on top of other content */
+    /* background-color: #66B2FF; */
+  }
+  
+  .navbar:hover{
+    display: inline-block;
+    box-shadow: 0px 0px 5px black;
+  }
+  
+  #language{
+    position: fixed;
+    bottom: 4vh;
+    background-color: rgba(0, 0, 255, 0.718);
+    
+  
+    height: 50px;
+    padding: 10px;
+    left: 1vw;
+  }
+  
+  .gtranslate_wrapper{
+    font-size: 20px;
+    font-weight: 500;
+  }
+   
+  nav ul {
+    overflow: auto;
+  }
+  
+  nav ul li {
+    list-style: none;
+    float: right;
+    margin: 10px 16px;
+    padding: 6px;
+    font-size: 22px;
+    /* color: white; */
+    cursor: pointer;
+    color: rgb(247, 246, 240); /* Black text color */
+    transition: color 0.3s, background-color 0.3s; 
+  }
+  
+  /* nav ul li a {
+    color: #333333;
+    text-decoration: none;
+  } */
+  
+  
+  #navbar li a{
+    display:flex;
+    align-items: center;
+    justify-content:center;
+    gap:7px;
+    font-family: "Space Grotesk", sans-serif;
+  }
+  
+  #navbar li:hover{
+    color: #ff5100;
+    text-shadow: 2px 2px 2px black;
+  }
+  nav ul li:hover {
+    border-bottom: 1.7px solid  white;
+  }
+  
+  nav ul li a {
+      text-decoration: none; /* No underline */
+      color: inherit; /* Inherit color from parent */
+  }
+  
+  nav ul li:first-child {
+    margin: 10px 28px 10px 10px;
+    border: 2px solid white;
+    padding: 6px 22px;
+    border-radius: 12px;
+  }
+  
+  nav ul li:first-child:hover {
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 12px;
+    border-image: linear-gradient(
+      -225deg,
+      #231557 0%,
+      #44107a 29%,
+      #ff1361 100%,
+      #fef850 100%
+    );
+    border-image-slice: 1;
+  }
+
   </style>
 </head>
 
 <body>
-  <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
-    <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer ></script>
-     
+  <div class="navbar">
+    <div class="logo"></div>
+    <div class="main">
+        <nav>
+            <ul id="navbar">
+                <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
+
+                <li id="language">
+                    <div class="gtranslate_wrapper"></div>
+                    <script>
+                        window.gtranslateSettings = {
+                            default_language: "en",
+                            detect_browser_language: true,
+                            wrapper_selector: ".gtranslate_wrapper",
+                            font_size: 100,
+                        };
+                    </script>
+                    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
+ 
   <img src="images/moon.webp" id="icon">
 
   <div class="container">
diff --git a/public/contact-us.html b/public/contact-us.html
index 9101190..fdc9d39 100644
--- a/public/contact-us.html
+++ b/public/contact-us.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact Us</title>
     <link rel="stylesheet" href="./css/contact-us.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <style>
         /* Style for the message area */
         #messageArea {
@@ -31,6 +33,37 @@
        };
      </script>
      <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer ></script>
+     <div class="navbar">
+        <div class="logo"></div>
+        <div class="main">
+            <nav>
+                <ul id="navbar">
+                    <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                    <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                    <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                    <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                    <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                    <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
+
+                   
+                </ul>
+            </nav>
+        </div>
+    </div>
+    
+    <script>
+        // Adding background color to the header on scroll
+        window.onscroll = function () {
+            var navbar = document.querySelector(".navbar");
+            if (window.scrollY > 50) {
+                navbar.style.backgroundColor = "rgba(0, 0, 0, 0.8)"; // Dark background on scroll
+                navbar.querySelectorAll("a").forEach(a => a.style.color = "white"); // Change link color
+            } else {
+                navbar.style.backgroundColor = "transparent"; // Revert back to transparent background
+                navbar.querySelectorAll("a").forEach(a => a.style.color = "white"); // Revert link color
+            }
+        };
+    </script>
     <img src="images/moon.webp" id="icon">
     <div class="maindiv">
         <div class="imgdiv">
diff --git a/public/contributor.html b/public/contributor.html
index 82ab25d..0d0d70f 100644
--- a/public/contributor.html
+++ b/public/contributor.html
@@ -6,6 +6,8 @@
     <title>Research Nexas</title>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="./css/contributor.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <style>
         .homeBtn {
             position: fixed;
@@ -24,6 +26,36 @@
 
   <a href="./index.html" class="homeBtn">Home</a>
 
+  <div class="navbar">
+    <div class="logo"></div>
+    <div class="main">
+        <nav>
+            <ul id="navbar">
+                <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                <li title="Our Services"><a href="#services"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                <li title="About Us"><a href="#about_show"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                <li title="Main Page"><a href="#"><i class='bx bx-home' ></i>Home</a></li>
+
+                <li id="language">
+                    <div class="gtranslate_wrapper"></div>
+                    <script>
+                        window.gtranslateSettings = {
+                            default_language: "en",
+                            detect_browser_language: true,
+                            wrapper_selector: ".gtranslate_wrapper",
+                            font_size: 100,
+                        };
+                    </script>
+                    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
+
+
   <div class="contributor-container">
     <!-- Hero Section -->
     <section class="contributor-hero">
diff --git a/public/css/contact-us.css b/public/css/contact-us.css
index b8161d6..27ff3d3 100644
--- a/public/css/contact-us.css
+++ b/public/css/contact-us.css
@@ -6,6 +6,106 @@
     font-family: 'Poppins', sans-serif;
 }
 
+
+/* navbar styling */
+
+.navbar {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: rgba(0, 0, 0, 0.8);
+    justify-content: space-between;
+    position: fixed; /* Make navbar fixed to the top */
+    top: 0; /* Position at the top of the viewport */
+    width: 100%; /* Ensure it spans the full width */
+    z-index: 2000; /* Ensures it stays on top of other content */
+    /* background-color: #66B2FF; */
+  }
+  
+  .navbar:hover{
+    display: inline-block;
+    box-shadow: 0px 0px 5px black;
+  }
+  
+  #language{
+    position: fixed;
+    bottom: 4vh;
+    background-color: rgba(0, 0, 255, 0.718);
+    
+  
+    height: 50px;
+    padding: 10px;
+    left: 1vw;
+  }
+  
+  .gtranslate_wrapper{
+    font-size: 20px;
+    font-weight: 500;
+  }
+   
+  nav ul {
+    overflow: auto;
+  }
+  
+  nav ul li {
+    list-style: none;
+    float: right;
+    margin: 10px 16px;
+    padding: 6px;
+    font-size: 22px;
+    /* color: white; */
+    cursor: pointer;
+    color: rgb(247, 246, 240); /* Black text color */
+    transition: color 0.3s, background-color 0.3s; 
+  }
+  
+  /* nav ul li a {
+    color: #333333;
+    text-decoration: none;
+  } */
+  
+  
+  #navbar li a{
+    display:flex;
+    align-items: center;
+    justify-content:center;
+    gap:7px;
+    font-family: "Space Grotesk", sans-serif;
+  }
+  
+  #navbar li:hover{
+    color: #ff5100;
+    text-shadow: 2px 2px 2px black;
+  }
+  nav ul li:hover {
+    border-bottom: 1.7px solid  white;
+  }
+  
+  nav ul li a {
+      text-decoration: none; /* No underline */
+      color: inherit; /* Inherit color from parent */
+  }
+  
+  nav ul li:first-child {
+    margin: 10px 28px 10px 10px;
+    border: 2px solid white;
+    padding: 6px 22px;
+    border-radius: 12px;
+  }
+  
+  nav ul li:first-child:hover {
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 12px;
+    border-image: linear-gradient(
+      -225deg,
+      #231557 0%,
+      #44107a 29%,
+      #ff1361 100%,
+      #fef850 100%
+    );
+    border-image-slice: 1;
+  }
+
 .gtranslate_wrapper{
     background-color: white;
     position: absolute;
diff --git a/public/css/contributor.css b/public/css/contributor.css
index aa00ec6..7f69829 100644
--- a/public/css/contributor.css
+++ b/public/css/contributor.css
@@ -11,6 +11,125 @@ body {
   background-color: #f5f5f5;
 }
 
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1a1f36;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #0a66c2;
+  border-radius: 6px;
+  border: 3px solid #1a1f36;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #064a91;
+}
+
+
+/* navbar styling */
+
+.navbar {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: rgba(0, 0, 0, 0.8);
+  justify-content: space-between;
+  position: fixed; /* Make navbar fixed to the top */
+  top: 0; /* Position at the top of the viewport */
+  width: 100%; /* Ensure it spans the full width */
+  z-index: 2000; /* Ensures it stays on top of other content */
+  /* background-color: #66B2FF; */
+}
+
+.navbar:hover{
+  display: inline-block;
+  box-shadow: 0px 0px 5px black;
+}
+
+#language{
+  position: fixed;
+  bottom: 4vh;
+  background-color: rgba(0, 0, 255, 0.718);
+  
+
+  height: 50px;
+  padding: 10px;
+  left: 1vw;
+}
+
+.gtranslate_wrapper{
+  font-size: 20px;
+  font-weight: 500;
+}
+ 
+nav ul {
+  overflow: auto;
+}
+
+nav ul li {
+  list-style: none;
+  float: right;
+  margin: 10px 16px;
+  padding: 6px;
+  font-size: 22px;
+  /* color: white; */
+  cursor: pointer;
+  color: rgb(247, 246, 240); /* Black text color */
+  transition: color 0.3s, background-color 0.3s; 
+}
+
+/* nav ul li a {
+  color: #333333;
+  text-decoration: none;
+} */
+
+
+#navbar li a{
+  display:flex;
+  align-items: center;
+  justify-content:center;
+  gap:7px;
+  font-family: "Space Grotesk", sans-serif;
+}
+
+#navbar li:hover{
+  color: #ff5100;
+  text-shadow: 2px 2px 2px black;
+}
+nav ul li:hover {
+  border-bottom: 1.7px solid  white;
+}
+
+nav ul li a {
+    text-decoration: none; /* No underline */
+    color: inherit; /* Inherit color from parent */
+}
+
+nav ul li:first-child {
+  margin: 10px 28px 10px 10px;
+  border: 2px solid white;
+  padding: 6px 22px;
+  border-radius: 12px;
+}
+
+nav ul li:first-child:hover {
+  border: 2px solid transparent;
+  background-clip: content-box;
+  border-radius: 12px;
+  border-image: linear-gradient(
+    -225deg,
+    #231557 0%,
+    #44107a 29%,
+    #ff1361 100%,
+    #fef850 100%
+  );
+  border-image-slice: 1;
+}
+
+
 .contributor-container {
   margin: 0 auto;
 }
diff --git a/public/css/login_style.css b/public/css/login_style.css
index abbe2ff..44d95e7 100644
--- a/public/css/login_style.css
+++ b/public/css/login_style.css
@@ -26,6 +26,106 @@ body {
 }
 
 
+/* navbar styling */
+
+.navbar {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: rgba(0, 0, 0, 0.8);
+  justify-content: space-between;
+  position: fixed; /* Make navbar fixed to the top */
+  top: 0; /* Position at the top of the viewport */
+  width: 100%; /* Ensure it spans the full width */
+  z-index: 2000; /* Ensures it stays on top of other content */
+  /* background-color: #66B2FF; */
+}
+
+.navbar:hover{
+  display: inline-block;
+  box-shadow: 0px 0px 5px black;
+}
+
+#language{
+  position: fixed;
+  bottom: 4vh;
+  background-color: rgba(0, 0, 255, 0.718);
+  
+
+  height: 50px;
+  padding: 10px;
+  left: 1vw;
+}
+
+.gtranslate_wrapper{
+  font-size: 20px;
+  font-weight: 500;
+}
+ 
+nav ul {
+  overflow: auto;
+}
+
+nav ul li {
+  list-style: none;
+  float: right;
+  margin: 10px 16px;
+  padding: 6px;
+  font-size: 22px;
+  /* color: white; */
+  cursor: pointer;
+  color: rgb(247, 246, 240); /* Black text color */
+  transition: color 0.3s, background-color 0.3s; 
+}
+
+/* nav ul li a {
+  color: #333333;
+  text-decoration: none;
+} */
+
+
+#navbar li a{
+  display:flex;
+  align-items: center;
+  justify-content:center;
+  gap:7px;
+  font-family: "Space Grotesk", sans-serif;
+}
+
+#navbar li:hover{
+  color: #ff5100;
+  text-shadow: 2px 2px 2px black;
+}
+nav ul li:hover {
+  border-bottom: 1.7px solid  white;
+}
+
+nav ul li a {
+    text-decoration: none; /* No underline */
+    color: inherit; /* Inherit color from parent */
+}
+
+nav ul li:first-child {
+  margin: 10px 28px 10px 10px;
+  border: 2px solid white;
+  padding: 6px 22px;
+  border-radius: 12px;
+}
+
+nav ul li:first-child:hover {
+  border: 2px solid transparent;
+  background-clip: content-box;
+  border-radius: 12px;
+  border-image: linear-gradient(
+    -225deg,
+    #231557 0%,
+    #44107a 29%,
+    #ff1361 100%,
+    #fef850 100%
+  );
+  border-image-slice: 1;
+}
+
+
 
 #icon{
   width: 30px;
@@ -121,19 +221,7 @@ form input:focus {
   box-shadow: 0 0 8px rgba(142, 160, 240, 0.5);
 }
 
-a {
-  display: block;
-  text-align: right;
-  color: #4e54c8;
-  margin-bottom: 20px;
-  font-size: 14px;
-  text-decoration: none;
-  transition: color 0.3s;
-}
 
-a:hover {
-  color: #7076e8;
-}
 
 button {
   width: 100%;
diff --git a/public/css/style.css b/public/css/style.css
index 20a7e54..a898a4c 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -79,7 +79,7 @@ nav ul li {
   font-size: 22px;
   /* color: white; */
   cursor: pointer;
-  color: rgb(247, 246, 240); /* Black text color */
+  /* color: rgb(247, 246, 240); Black text color */
   transition: color 0.3s, background-color 0.3s; 
 }
 
@@ -1898,3 +1898,4 @@ color:#ed8309;
       background-color: rgb(95,212,196);
       color: white;
 
+}
\ No newline at end of file
diff --git a/public/fac_login.html b/public/fac_login.html
index fffff37..a1ddf62 100644
--- a/public/fac_login.html
+++ b/public/fac_login.html
@@ -6,21 +6,40 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SignIn (stakeholder)</title>
     <link rel="stylesheet" href="css/login_style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 </head>
 
-<body>  <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
-    <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script
-     src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-     defer
-   ></script>
+<body>  
+    <div class="navbar">
+        <div class="logo"></div>
+        <div class="main">
+            <nav>
+                <ul id="navbar">
+                    <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                    <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                    <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                    <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                    <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                    <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
+    
+                    <li id="language">
+                        <div class="gtranslate_wrapper"></div>
+                        <script>
+                            window.gtranslateSettings = {
+                                default_language: "en",
+                                detect_browser_language: true,
+                                wrapper_selector: ".gtranslate_wrapper",
+                                font_size: 100,
+                            };
+                        </script>
+                        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+    
     <img src="images/moon.webp" id="icon">
     <div class="container">
         <div class="image">
diff --git a/public/index.html b/public/index.html
index e476db5..2229872 100644
--- a/public/index.html
+++ b/public/index.html
@@ -118,6 +118,7 @@
                 </nav>
             </div>
         </div>
+        
         <ul class="circles">
             <li></li>
             <li></li>
diff --git a/public/login.html b/public/login.html
index 963a83b..95cba50 100644
--- a/public/login.html
+++ b/public/login.html
@@ -5,23 +5,41 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/login_style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <title>Login</title>
 </head>
 
 <body> 
     
-    <script>
-      window.gtranslateSettings = {
-        default_language: "en",
-        detect_browser_language: true,
-        wrapper_selector: ".gtranslate_wrapper",
-        font_size: 100,
-      };
-    </script>
-    <script
-    src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-    defer
-  ></script>
+    <div class="navbar">
+        <div class="logo"></div>
+        <div class="main">
+            <nav>
+                <ul id="navbar">
+                    <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                    <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                    <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                    <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                    <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                    <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
+    
+                    <li id="language">
+                        <div class="gtranslate_wrapper"></div>
+                        <script>
+                            window.gtranslateSettings = {
+                                default_language: "en",
+                                detect_browser_language: true,
+                                wrapper_selector: ".gtranslate_wrapper",
+                                font_size: 100,
+                            };
+                        </script>
+                        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
   
     <img src="images/moon.webp" id="icon">
     <div class="container">
diff --git a/public/privacy_policy.html b/public/privacy_policy.html
index 043af23..38fb42b 100644
--- a/public/privacy_policy.html
+++ b/public/privacy_policy.html
@@ -8,23 +8,23 @@
     <link rel="stylesheet" href="css/privacy_style.css">
     <link rel="stylesheet" href="css/privacy_style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 
 </head>
  
 <body>
     <div class="navbar">
         <div class="logo"></div>
-        <div>
+        <div class="main">
             <nav>
                 <ul id="navbar">
-                    <li title="Login"><a href="choose-file.html">Login</a></li>
-                    <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a
-                            href="choose-signup-file.html">Register</a></li>
-                    <li title="Contact Us"><a href="./contact-us.html">Contact Us</a></li>
-                    <li title="Our Services"><a href="index.html">Services</a></li>
-                    <li title="About Us"><a href="index.html">About</a></li>
-                    <li title="Main Page"><a href="index.html">Home</a></li>
-
+                    <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                    <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                    <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                    <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                    <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                    <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
                     <li id="language">
                         <div class="gtranslate_wrapper"></div>
                         <script>
@@ -37,6 +37,7 @@
                         </script>
                         <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
                     </li>
+                   
                 </ul>
             </nav>
         </div>
diff --git a/public/signup.html b/public/signup.html
index 1652ad5..91b2605 100644
--- a/public/signup.html
+++ b/public/signup.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/login_style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
   <title>Registration</title>
   <style>
     .error {
@@ -40,18 +42,36 @@
 
 <body>
   
+  <div class="navbar">
+    <div class="logo"></div>
+    <div class="main">
+        <nav>
+            <ul id="navbar">
+                <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
+
+                <li id="language">
+                    <div class="gtranslate_wrapper"></div>
+                    <script>
+                        window.gtranslateSettings = {
+                            default_language: "en",
+                            detect_browser_language: true,
+                            wrapper_selector: ".gtranslate_wrapper",
+                            font_size: 100,
+                        };
+                    </script>
+                    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
 
-
-  <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
-    <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer ></script>
+  
   <img src="images/moon.webp" id="icon">
   <div class="container">
     <div class="image">
diff --git a/public/stk_login.html b/public/stk_login.html
index 4d2bdd9..94b78bb 100644
--- a/public/stk_login.html
+++ b/public/stk_login.html
@@ -6,22 +6,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SignIn (stakeholder)</title>
     <link rel="stylesheet" href="css/login_style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 </head>
 
 <body>
-    <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
-    <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script
-     src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-     defer
-   ></script>
+    <div class="navbar">
+        <div class="logo"></div>
+        <div class="main">
+            <nav>
+                <ul id="navbar">
+                    <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                    <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                    <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                    <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                    <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                    <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
+    
+                    <li id="language">
+                        <div class="gtranslate_wrapper"></div>
+                        <script>
+                            window.gtranslateSettings = {
+                                default_language: "en",
+                                detect_browser_language: true,
+                                wrapper_selector: ".gtranslate_wrapper",
+                                font_size: 100,
+                            };
+                        </script>
+                        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
     <img src="images/moon.webp" id="icon">
     <div class="container">
         <div class="image">
diff --git a/public/stk_signup.html b/public/stk_signup.html
index 583b157..d155248 100644
--- a/public/stk_signup.html
+++ b/public/stk_signup.html
@@ -6,22 +6,41 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SignUp (stakeholder)</title>
     <link rel="stylesheet" href="css/login_style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 </head>
 
 <body>
-    <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
-    <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script
-     src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-     defer
-   ></script>
+
+    <div class="navbar">
+        <div class="logo"></div>
+        <div class="main">
+            <nav>
+                <ul id="navbar">
+                    <li title="Login"><a href="choose-file.html"><i class='bx bxs-user-circle' ></i>Login</a></li>
+                    <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="choose-signup-file.html"><i class='bx bx-log-in-circle' ></i>Register</a></li>
+                    <li title="Contact Us"><a href="./contact-us.html"><i class='bx bxs-contact' ></i>Contact Us</a></li>
+                    <li title="Our Services"><a href="./index.html"><i class='bx bx-bar-chart-square'></i>Services</a></li>
+                    <li title="About Us"><a href="./index.html"><i class='bx bx-vertical-bottom'></i>About</a></li>
+                    <li title="Main Page"><a href="./index.html"><i class='bx bx-home' ></i>Home</a></li>
+    
+                    <li id="language">
+                        <div class="gtranslate_wrapper"></div>
+                        <script>
+                            window.gtranslateSettings = {
+                                default_language: "en",
+                                detect_browser_language: true,
+                                wrapper_selector: ".gtranslate_wrapper",
+                                font_size: 100,
+                            };
+                        </script>
+                        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+    
     <img src="images/moon.webp" id="icon">
     <div id="box2">
         <p>Please Try Again! Account Already Exists</p>
