diff --git a/login.css b/login.css
index d87e3d37..4a4b7b97 100644
--- a/login.css
+++ b/login.css
@@ -156,4 +156,22 @@ body {
 .toggle-password svg {
     width: 20px;
     height: 20px;
+}
+
+#home-btn{
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: #4a8ae4; /* Bright teal background */
+    color: white; 
+    font-size: 1.7rem; /* Larger font size */
+    cursor: pointer; 
+    transition: background-color 0.3s, transform 0.3s;/* Added smooth transitions */
+    padding: 10px; /* Increased padding for a larger button */
+    border: none;
+    border-radius: 8px; /* More rounded button */
+}
+
+#home-btn:hover {
+    background-color: #012e49; 
 }
\ No newline at end of file
diff --git a/login.html b/login.html
index 121bc701..3f634020 100644
--- a/login.html
+++ b/login.html
@@ -8,27 +8,11 @@
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="login.css" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 
 <body>
-    <header class="main-head">
-        <nav>
-            <h1 id="logo">BuddyTrail</h1>
-            <ul>
-                <li><a href="#locations" class='navhover'>Location</a></li>
-                <li><a href="#itineraries" class='navhover'>Travel Itineraries</a></li>
-                <li><a href="#reviews" class='navhover'>Reviews</a></li>
-                <li><a href="#benefits" class='navhover'>Benefits</a></li>
-                <li><a href="#contact" class='navhover'>Contact</a></li>
-                <li><a href="signIn.html" class='navhover'>Sign In</a></li>
-            </ul>
-            <!-- Toggle Button -->
-            <button class="mode-toggle" id="modeToggle">
-                <span class="sun-icon glow">☀️</span>
-            </button>
-        </nav>
-    </header>
-
+    <button id="home-btn"><i class="fa-solid fa-house"></i></button>
     <div class="container">
         <div class="login-box">
             <h2>Login</h2>
@@ -73,6 +57,12 @@ <h2>Login</h2>
     <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-auth-compat.js"></script>
     <script src="firebase.js"></script>
+    <script>
+        // Home button
+        document.getElementById('home-btn').addEventListener('click', function() {
+          window.location.href = "index.html";
+        });
+      </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/signUp.css b/signUp.css
index cf3e3e07..96149b6e 100644
--- a/signUp.css
+++ b/signUp.css
@@ -152,4 +152,22 @@ body {
 .toggle-password svg {
     width: 20px;
     height: 20px;
+}
+
+#home-btn{
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: #4a8ae4; /* Bright teal background */
+    color: white; 
+    font-size: 1.7rem; /* Larger font size */
+    cursor: pointer; 
+    transition: background-color 0.3s, transform 0.3s;/* Added smooth transitions */
+    padding: 10px; /* Increased padding for a larger button */
+    border: none;
+    border-radius: 8px; /* More rounded button */
+}
+
+#home-btn:hover {
+    background-color: #012e49; 
 }
\ No newline at end of file
diff --git a/signUp.html b/signUp.html
index aa260923..4683cc86 100644
--- a/signUp.html
+++ b/signUp.html
@@ -11,29 +11,11 @@
       href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   </head>
   <body>
-    <header class="main-head">
-      <nav>
-        <h1 id="logo">BuddyTrail</h1>
-        <ul >
-          <li><a href="#home" class='navhover '>Home</a></li>
-          <li><a href="#locations" class='navhover '>Location</a></li>
-          <li><a href="#itineraries " class='navhover'>Travel Itineraries</a></li>
-          <li><a href="#reviews" class='navhover'>Reviews</a></li>
-          <li><a href="#benefits" class='navhover'>Benefits</a></li>
-          <li><a href="#contact" class='navhover'>Contact</a></li>
-          <li><a href="signUp.html" class='navhover'>Sign In</a></li>
-
-        </ul>
-        <!-- Toggle Button -->
-        <button class="mode-toggle" id="modeToggle">
-          <span class="sun-icon glow">☀️</span>
-        </button>
-      </nav>
-    </header>
-
-    <div class="container">
+    <button id="home-btn"><i class="fa-solid fa-house"></i></button>
+    <div class="container" style="margin-top: 30px;">
       <div class="signup-box">
         <h2>Create Account</h2>
         <!-- Google Signup Option -->
@@ -90,5 +72,11 @@ <h2>Create Account</h2>
     <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-auth-compat.js"></script>
     <script src="firebase.js"></script>
+    <script>
+      // Home button
+      document.getElementById('home-btn').addEventListener('click', function() {
+        window.location.href = "index.html";
+      });
+    </script>
   </body>
 </html>
