diff --git a/Html-files/contact.html b/Html-files/contact.html
index 72da1241..104a5f54 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -211,15 +211,35 @@
     </div>
 
     <header style=" font-family: Tahoma, sans-serif;background-color: transparent;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;">
-        <nav class="navbarbg" style="background-color: transparent;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;">
-            <ul id="header-items">
-                <li><a href="../index.html" style="color: hsl(203, 30%, 26%);">Home</a></li>
-                <li><a href="menu.html" style="color: hsl(203, 30%, 26%);">About</a></li>
-                <li><a href="services.html" style="color: hsl(203, 30%, 26%);">Services</a></li>
-                <li><a href="contact.html" style="color: hsl(203, 30%, 26%);">Contact us</a></li>
-                <li><a href="cart.html" style="color: hsl(203, 30%, 26%);">Cart</a></li>
+        <nav class="navbar fixed-top" id="top" style="display: flex; flex-direction: row; background-color: #a65961; border: 5px solid rgb(253, 175, 105); border-radius: 150px; padding-left: 100px; margin-top: 20px;">
+            <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher); color: black; font-size: 40px;">Retro</a>
+            <ul class="navbar-nav" style="display: flex;flex-direction: row;  flex-wrap: nowrap; justify-content: space-between; margin-left: 20px;">
+              <li class="nav-item" style="display: inline-block;">
+                <a class="nav-link" href="menu.html" style="font-family: var(--ff-philosopher); color: black;">Collection</a>
+              </li>
+              <li class="nav-item" style="display: inline-block;">
+                <a class="nav-link" href="services.html" style="font-family: var(--ff-philosopher); color: black;">Services</a>
+              </li>
+              <li class="nav-item" style="display: inline-block;">
+                <a class="nav-link" href="contact.html" style="font-family: var(--ff-philosopher); color: black;">Contact Us</a>
+              </li>
+              <!-- Google Translate Element -->
+              <li class="nav-item" style="display: inline-block;">
+                <div id="google_element" style="font-family: var(--ff-philosopher); color: black;"></div>
+              </li>
             </ul>
-        </nav>
+            <div class="d-flex" style="justify-content: flex-end;flex-direction: row;  margin-left: auto; padding-right: 50px;">
+              <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                <a class="nav-btn" onclick="redirectLogin()" style="color: black;">Login</a>
+              </li>
+              <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                <a class="nav-btn" onclick="redirectSignup()" style="color: black;">Sign Up</a>
+              </li>
+              <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                <a class="nav-btn" href="Html-files/cart.html" style="color: black;"><i class="fa-solid fa-cart-shopping"></i></a>
+              </li>
+            </div>
+          </nav>
 
     </header>
 
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 59189197..fc1aad2b 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -233,15 +233,35 @@
     </div>
     <div class="head_container" style="background-color: hsl(20, 43%, 93%);">
         <header>
-            <nav class="navbar">
-                <ul id="header-items">
-                    <li style="font-family: var(--ff-philosopher);"><a href="../index.html" style="color: black;">Home</a></li>
-                    <li style="font-family: var(--ff-philosopher);"><a href="menu.html" style="color: black;">About</a></li>
-                    <li style="font-family: var(--ff-philosopher);"><a href="services.html" style="color: black;">Services</a></li>
-                    <li style="font-family: var(--ff-philosopher);"><a href="contact.html" style="color: black;">Contact us</a></li>
-                    <li style="font-family: var(--ff-philosopher);"><a href="cart.html" style="color: black;">Cart</a></li>
+            <nav class="navbar fixed-top" id="top" style="display: flex; flex-direction: row; background-color: #a65961; border: 5px solid rgb(253, 175, 105); border-radius: 150px; padding-left: 100px; margin-top: 20px;">
+                <a class="navbar-brand" href="/index.html" style="font-family: var(--ff-philosopher); color: black; font-size: 40px;">Retro</a>
+                <ul class="navbar-nav" style="display: flex; flex-wrap: nowrap; justify-content: space-between; margin-left: 20px;">
+                  <li class="nav-item" style="display: inline-block;">
+                    <a class="nav-link" href="menu.html" style="font-family: var(--ff-philosopher); color: black;">Collection</a>
+                  </li>
+                  <li class="nav-item" style="display: inline-block;">
+                    <a class="nav-link" href="services.html" style="font-family: var(--ff-philosopher); color: black;">Services</a>
+                  </li>
+                  <li class="nav-item" style="display: inline-block;">
+                    <a class="nav-link" href="contact.html" style="font-family: var(--ff-philosopher); color: black;">Contact Us</a>
+                  </li>
+                  <!-- Google Translate Element -->
+                  <li class="nav-item" style="display: inline-block;">
+                    <div id="google_element" style="font-family: var(--ff-philosopher); color: black;"></div>
+                  </li>
                 </ul>
-            </nav>
+                <div class="d-flex" style="justify-content: flex-end; margin-left: auto; padding-right: 50px;">
+                  <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                    <a class="nav-btn" onclick="redirectLogin()" style="color: black;">Login</a>
+                  </li>
+                  <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                    <a class="nav-btn" onclick="redirectSignup()" style="color: black;">Sign Up</a>
+                  </li>
+                  <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                    <a class="nav-btn" href="Html-files/cart.html" style="color: black;"><i class="fa-solid fa-cart-shopping"></i></a>
+                  </li>
+                </div>
+              </nav>
         </header>
 
         <div class="mainhead">
diff --git a/Html-files/services.html b/Html-files/services.html
index 5039f699..740fa324 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -204,15 +204,35 @@
 
     <div class="head_container_service" style="color: black;font-family: var(--ff-philosopher);">
         <header style="font-family: var(--ff-philosopher);">
-            <nav class="navbar">
-                <ul id="header-items" style="color: black;font-family: var(--ff-philosopher);">
-                    <li><a href="../index.html" style="color: black;">Home</a></li>
-                    <li><a href="menu.html" style="color: black;">About</a></li>
-                    <li><a href="services.html" style="color: black;">Services</a></li>
-                    <li><a href="contact.html" style="color: black;">Contact us</a></li>
-                    <li><a href="cart.html" style="color: black;">Cart</a></li>
+            <nav class="navbar fixed-top" id="top" style="display: flex; flex-direction: row; background-color: #a65961; border: 5px solid rgb(253, 175, 105); border-radius: 150px; padding-left: 100px; margin-top: 20px;">
+                <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher); color: black; font-size: 40px;">Retro</a>
+                <ul class="navbar-nav" style="display: flex; flex-wrap: nowrap; justify-content: space-between; margin-left: 20px;">
+                  <li class="nav-item" style="display: inline-block;">
+                    <a class="nav-link" href="menu.html" style="font-family: var(--ff-philosopher); color: black;">Collection</a>
+                  </li>
+                  <li class="nav-item" style="display: inline-block;">
+                    <a class="nav-link" href="services.html" style="font-family: var(--ff-philosopher); color: black;">Services</a>
+                  </li>
+                  <li class="nav-item" style="display: inline-block;">
+                    <a class="nav-link" href="contact.html" style="font-family: var(--ff-philosopher); color: black;">Contact Us</a>
+                  </li>
+                  <!-- Google Translate Element -->
+                  <li class="nav-item" style="display: inline-block;">
+                    <div id="google_element" style="font-family: var(--ff-philosopher); color: black;"></div>
+                  </li>
                 </ul>
-            </nav>
+                <div class="d-flex" style="justify-content: flex-end; margin-left: auto; padding-right: 50px;">
+                  <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                    <a class="nav-btn" onclick="redirectLogin()" style="color: black;">Login</a>
+                  </li>
+                  <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                    <a class="nav-btn" onclick="redirectSignup()" style="color: black;">Sign Up</a>
+                  </li>
+                  <li class="nav-item" style="list-style-type: none; display: inline-block;">
+                    <a class="nav-btn" href="Html-files/cart.html" style="color: black;"><i class="fa-solid fa-cart-shopping"></i></a>
+                  </li>
+                </div>
+              </nav>
         </header>
 
         <div class="mainhead">