diff --git a/assets/css/register.css b/assets/css/register.css
index e3f19963..f38b0412 100644
--- a/assets/css/register.css
+++ b/assets/css/register.css
@@ -20,4 +20,18 @@
   .error {
     color: red;
     font-size: 0.9em;
+  }
+  .btn-transparent{
+    width: 100px;
+    padding: 10px;
+    border: none;
+    border-radius: 20px;
+    font-size: medium;
+    font-weight: 900;
+   background-color: white;
+   color: #4d84e2;
+  }
+  .btn-transparent:hover{
+    background-color: #1e90ff;
+    color: white;
   }
\ No newline at end of file
diff --git a/loginPage.css b/loginPage.css
index 9f6023ad..6f5f6e4e 100644
--- a/loginPage.css
+++ b/loginPage.css
@@ -4,17 +4,18 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  
 }
 
 body,
 input {
-  font-family: "Poppins", sans-serif;
+  font-family: 'Arial', sans-serif;
 }
 
 .container {
   position: relative;
   width: 100%;
-  background-color: #54c5c9;
+  background: linear-gradient(to right, white,rgb(73, 143, 248));
   min-height: 100vh;
   overflow: hidden;
 }
@@ -62,7 +63,7 @@ form.sign-in-form {
 
 .title {
   font-size: 2.2rem;
-  color: #444;
+  color:white;
   margin-bottom: 10px;
 }
 
@@ -82,7 +83,8 @@ form.sign-in-form {
 .input-field i {
   text-align: center;
   line-height: 55px;
-  color: #acacac;
+  color: #4d84e2;
+  padding: 10px;
   transition: 0.5s;
   font-size: 1.1rem;
 }
@@ -98,13 +100,14 @@ form.sign-in-form {
 }
 
 .input-field input::placeholder {
-  color: #aaa;
+  color:#4d84e2;
   font-weight: 500;
 }
 
 .social-text {
   padding: 0.7rem 0;
   font-size: 1rem;
+  color: white;
 }
 
 .social-media {
@@ -118,7 +121,7 @@ form.sign-in-form {
   display: inline-flex; 
   justify-content: center;
   align-items: center;
-  border: 2px solid #333;
+  border: 2px solid white;
   border-radius: 50%; 
   padding: 15px; 
   margin: 5px; 
@@ -134,28 +137,30 @@ form.sign-in-form {
 
 .social-icon {
   font-size: 22px; 
-  color: inherit; 
+  color: blue; 
   transition: none; 
 }
 
 
 .btn {
   width: 150px;
-  background-color: #000000;
+  background-color: white;
   border: none;
   outline: none;
   height: 49px;
   border-radius: 49px;
-  color: #fff;
+  color:#1e90ff;
   text-transform: uppercase;
-  font-weight: 600;
+  font-weight: 900;
+  font-size: medium;
   margin: 10px 0;
   cursor: pointer;
   transition: 0.5s;
 }
 
 .btn:hover {
-  background-color: #4d84e2;
+  background-color: #1e90ff;
+  color: white;
 }
 
 .panels-container {
@@ -176,7 +181,7 @@ form.sign-in-form {
   top: -10%;
   right: 48%;
   transform: translateY(-50%);
-  background-image: linear-gradient(-45deg, #000000 0%, #000000 100%);
+  background: linear-gradient(-45deg, #68acf0 0%, blue 100%);
   transition: 1.8s ease-in-out;
   border-radius: 50%;
   z-index: 6;
@@ -414,7 +419,7 @@ form.sign-in-form {
   top: 20px;
   left: 20px;
   background: #ffffff;
-  color: #000000;
+  color:#1e90ff;
   padding: 10px;
   border-radius: 10px;
   cursor: pointer;
@@ -423,7 +428,7 @@ form.sign-in-form {
 }
 
 .homeBtn:hover {
-  background: #232323;
+  background: #1e90ff;
 }
 
 .homeBtn:hover i {
@@ -431,7 +436,7 @@ form.sign-in-form {
 }
 
 .homeBtn:active {
-  background: #191919;
+  background: blue;
 }
 
 .circle {
@@ -453,12 +458,25 @@ form.sign-in-form {
 }
 
 .forgot-password a {
-  color: black;
+  color: white;
   text-decoration: underline;
   transition: color 0.3s;
 
 }
-
+.btn-transparent{
+  width: 100px;
+  padding: 10px;
+  border: none;
+  border-radius: 20px;
+  font-size: medium;
+  font-weight: 900;
+ background-color: white;
+ color: #4d84e2;
+}
+.btn-transparent:hover{
+  background-color: #1e90ff;
+  color: white;
+}
 .forgot-password a:hover {
   color: blue;
 }
diff --git a/loginPage.html b/loginPage.html
index 98b6e086..53291636 100644
--- a/loginPage.html
+++ b/loginPage.html
@@ -465,7 +465,7 @@ <h2 class="title">Sign in</h2>
             
 
             <div class="forgot-password">
-                <a href="#" onclick="forgotPassword()">Forgot Password?</a>
+                <a href="#" onclick="forgotPassword()" >Forgot Password?</a>
               </div>
             <input type="submit" value="Login" class="btn solid" />
             <p class="social-text">Or Sign in with social platforms</p>
@@ -519,7 +519,7 @@ <h2 class="title">Sign up</h2>
             <div class="social-icons">
               <div class="social-icon-frame">
                   <a href="https://www.google.com" target="_blank" class="social-icon">
-                      <i class="fab fa-google"></i>
+                      <i class="fab fa-google" ></i>
                   </a>
               </div>
               <div class="social-icon-frame">
@@ -599,7 +599,7 @@ <h3>New here ?</h3>
             <a href="index.html" class="homeBtn">
                 <i class="fas fa-home"></i>
             </a>
-            <button class="btn transparent" id="sign-up-btn">Sign up</button>
+            <button class="btn-transparent" id="sign-up-btn">Sign up</button>
           </div>
           <img src="img/log.svg" class="image" alt="" />
         </div>
@@ -607,7 +607,7 @@ <h3>New here ?</h3>
           <div class="content">
             <h3>One of us ?</h3>
             <p>Welcome to our community</p>
-            <button class="btn transparent" id="sign-in-btn">Sign in</button>
+            <button class="btn-transparent" id="sign-in-btn">Sign in</button>
           </div>
           <img src="img/register.svg" class="image" alt="" />
         </div>
diff --git a/registerpage.html b/registerpage.html
index 20b8fab8..53977ad9 100644
--- a/registerpage.html
+++ b/registerpage.html
@@ -71,7 +71,7 @@ <h2 class="title">Sign up</h2>
               <div id="strength-medium"></div>
               <div id="strength-strong"></div>
             </div>
-            <input type="submit" class="btn" value="Sign up" />           
+            <input type="submit" class="btn" value="Sign up"  style="background-color: aqua;"/>           
           </form>
         </div>
       </div>
@@ -134,7 +134,7 @@ <h3>Already Have a Account ?</h3>
               Discover new experiences with BuddyTrail! <br>Signing in to your Account.
             </p>
             <a href="./loginPage.html">
-              <button class="btn transparent" id="sign-up-btn">
+              <button class="btn-transparent" id="sign-up-btn">
                 Login
               </button>
             </a> 
@@ -148,7 +148,7 @@ <h3>One of us ?</h3>
               Welcome back to our community
             </p>
             <a href="./loginPage.html">
-              <button class="btn transparent" id="sign-in-btn">
+              <button class="btn-transparent" id="sign-in-btn" >
                 Sign in
               </button>
             </a>