diff --git a/about.html b/about.html
index 8d6ae46..72825fe 100644
--- a/about.html
+++ b/about.html
@@ -337,13 +337,14 @@
     padding-bottom: 5rem;
 }
 .about h1{
-    font-size: 4rem;
+    font-size: 5rem;
     margin-bottom: 1rem;
     font-weight: 600;
 }
 .about p{
     width: 70%;
     font-size: 1.8rem;
+    font-style: italic;
 }
 .cards{
     width: 100%;
@@ -357,9 +358,16 @@
     padding: 2rem;
     border-radius: 2rem;
     background-color: #f8f9fa;
+    transition: all;
+    transition-duration: 1s;
+    transition-delay: 0s;
+   
 }
 .card:hover{
     scale: 105%;
+    transform: scale(1.02);
+    box-shadow: 2px 3px 4px 4px rgb(51, 9, 88);
+
 }
 .card h2{
     font-size: 2.8rem;
@@ -432,7 +440,7 @@ <h1>Resum Resume</h1>
 </nav>
     <div class="panel-1">
         <div class="about">
-            <h1>About</h1>
+            <h1 style="color: #4c0359;">About</h1>
             <p>LinkedIn Resume Builder simplifies your job search by converting your LinkedIn profile into a professional resume. In just a few clicks, you can generate a polished resume from your profile, saving time and effort. With accurate data and a selection of professional templates, it’s the easiest way to create a standout resume quickly and efficiently.</p>
         </div>
         <div class="cards">
diff --git a/index.html b/index.html
index b8fca17..b54aebb 100644
--- a/index.html
+++ b/index.html
@@ -48,14 +48,52 @@
             transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
             position: relative;
             z-index: 1;
+           
         }
+        
 
         .features-card:hover {
             transform: translateY(-10px) scale(1.1);
             box-shadow: 0 4px 8px #0073b1; 
             z-index: 3;
+            animation-name: cardani;
+            animation-duration: 1s;
+            animation-delay: 0s;
+            animation-iteration-count: infinite;
+            border: 2px solid red;
+        }
+        @keyframes cardani {
+          10%{
+            border-color: #ff6f61;
+          }
+          20%{
+            border-color: #de8c3e;
+          }
+          30%{
+            border-color: brown;
+          }
+          40%{
+            border-color: aqua;
+          }
+
+          50%{
+            border-color: chartreuse;
+          }
+          60%{
+            border-color: burlywood;
+          }
+          70%{
+            border-color: red;
+          }
+
+          80%{
+            border-color: blue;
+          }
+
+          90%{
+            border-color: black;
+          }
         }
-
         .features-card img {
             width: 60px;
             height: 60px;
@@ -267,7 +305,44 @@
         transform: translateY(-10px) scale(1.1);
         box-shadow: 0 4px 8px #0073b1;
         z-index: 3;
+        border: 2px solid grey;
+        animation-name: cardanii;
+        animation-duration: 2s;
+        animation-delay:0s;
+        animation-iteration-count: infinite;
       }
+      @keyframes cardanii {
+          10%{
+            border-color: #ff6f61;
+          }
+          20%{
+            border-color: #de8c3e;
+          }
+          30%{
+            border-color: brown;
+          }
+          40%{
+            border-color: aqua;
+          }
+
+          50%{
+            border-color: chartreuse;
+          }
+          60%{
+            border-color: burlywood;
+          }
+          70%{
+            border-color: red;
+          }
+
+          80%{
+            border-color: blue;
+          }
+
+          90%{
+            border-color: black;
+          }
+        }
 
       /* < !-- Features Section --><style>.features {
 
@@ -852,6 +927,9 @@
             height: 100%;
             background-color: #3f10ea;
         }
+        #resumec{
+          columns: rgb(20, 198, 8);
+        }
       
     </style>
   </head>
@@ -884,7 +962,7 @@
     <!-- home section starts -->
     <section class="home" id="Home">
         <div class="content">
-            <h3>Build Your Resume in Seconds from LinkedIn</h3>
+            <h3 id="resumec">Build Your Resume in Seconds from LinkedIn</h3>
             <p>Easily generate a professional resume using your LinkedIn profile. Select a template, enter your LinkedIn URL,
                 and get a downloadable resume in a few clicks. Save time and create a resume that stands out.</p>
             <a href="signup.html" class="btn">Get Started</a>
diff --git a/signup.html b/signup.html
index b35de20..99f7ca1 100644
--- a/signup.html
+++ b/signup.html
@@ -1,107 +1,103 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sign Up - LinkedIn Resume Builder</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
-
-
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-
-    <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" />
+    <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" />
     <link rel="icon" href="images/favicon-removebg-preview.png">
 
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
-    />
-
-    <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"
-    />
-
-
     <style>
         :root {
-            
             --deep-teal: #003d4d;
             --off-white: #f8f9fa;
             --dark-slate: #2f4f4f;
             --soft-gold: #d9c79e;
-
         }
 
-        * {
-            margin: 0; 
+        body {
+            background-color: var(--off-white);
+            font-family: 'Roboto', sans-serif;
+            display: flex;
+            flex-direction: column;
+            margin: 0;
             padding: 0;
-            box-sizing: border-box;
-            font-family: Verdana, Geneva, Tahoma, sans-serif;
-            outline: none;
-            /* border: none; */
-            text-decoration: none;
-            text-transform: capitalize;
-            transition: .2s linear;
+            min-height: 100vh;
         }
 
-        /* body {
-            background-color: var(--off-white);
+        .navbar {
+            background-color: var(--deep-teal);
+            padding: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .navbar h1 {
+            color: var(--off-white);
+            margin: 0;
+            font-size: 1.5rem;
+            transition: color 0.3s ease;
+        }
+
+        .navbar h1:hover {
+            color: var(--soft-gold);
+        }
+
+        .navbar ul {
+            list-style-type: none;
             margin: 0;
             padding: 0;
             display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            flex-direction: column;
-        } */
-    body {
-    background-color: var(--off-white); 
-    margin: 0;
-    padding: 0; 
-    min-height: 100vh;
-    display:flex;
-    flex-direction: column;
-} 
+            gap: 20px;
+        }
 
+        .navbar ul li a {
+            color: var(--off-white);
+            text-decoration: none;
+            font-size: 16px;
+        }
+
+        .navbar ul li a:hover {
+            color: var(--soft-gold);
+            transition: color 0.3s ease;
+        }
 
         .container {
             background-color: white;
-            padding: 20px;
+            padding: 30px;
             border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
             max-width: 400px;
             width: 100%;
-            margin-top:10px;
+            margin: 20px auto;
             text-align: center;
-            display: flex; 
+            display: flex;
             flex-direction: column;
             justify-content: center;
-            position:relative;
-            margin-bottom: 40px;
-            flex-grow: 1;
-
         }
 
-        
         .logo {
-            font-size: 2rem; /* Decreased size for single line */
+            font-size: 1.8rem;
             color: var(--deep-teal);
             font-weight: 600;
-            margin-bottom:20px;
-            cursor: pointer; /* Change cursor to pointer */
+            margin-bottom: 20px;
+            cursor: pointer;
         }
 
         .logo:hover {
-            color: var(--soft-gold); /* Change color on hover */
+            color: var(--soft-gold);
         }
 
         h2 {
             color: var(--dark-slate);
-            margin-bottom: 20px;
+            margin-bottom: 15px;
+            font-size: 1.4rem;
         }
 
         input[type="text"],
@@ -112,18 +108,20 @@
             margin: 10px 0;
             border: 1px solid #ccc;
             border-radius: 4px;
+            font-size: 1rem;
         }
 
         button {
             width: 100%;
-            padding: 15px;
+            padding: 12px;
             background-color: var(--deep-teal);
             color: white;
             border: none;
             border-radius: 4px;
-            font-size: 18px;
+            font-size: 1rem;
             cursor: pointer;
-            margin-top:10px;
+            margin-top: 10px;
+            transition: background-color 0.3s ease;
         }
 
         button:hover {
@@ -133,197 +131,118 @@
         .login-btn {
             background-color: var(--soft-gold);
             margin-top: 10px;
+            color: var(--deep-teal);
         }
 
         .login-btn:hover {
             background-color: var(--deep-teal);
+            color: white;
         }
 
-
         .footer {
-            margin-top: 20px; /* Space between container and footer */
+            margin-top: auto;
+            width: 100%;
+            background-color: var(--deep-teal);
+            color: white;
+            padding: 20px 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 0.9rem;
+        }
+
+        .footer-content {
+            display: flex;
+            justify-content: space-around;
+            width: 100%;
+            max-width: 1200px;
+            flex-wrap: wrap;
+            gap: 20px;
             text-align: center;
-            width: 100%; /* Ensure the footer takes full width */
-            background-color: var(--deep-teal); /* Background color for the footer */
-            color: white; /* Text color */
-            padding: 13px 0; /* Padding for spacing */
-            position: relative; /* Positioning at the bottom */
-            bottom: 0; /* Align to the bottom */
         }
 
-        .footer p {
-            color: #fff; /* Text color for footer */
-            font-size: 14px;
+        .footer-section h3 {
+            font-size: 1.1rem;
+            margin-bottom: 10px;
+        }
+
+        .footer-section ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .footer-section ul li {
+            margin-bottom: 8px;
         }
 
-        .footer a {
+        .footer-section a {
             color: var(--soft-gold);
             text-decoration: none;
+            font-size: 0.9rem;
         }
 
-        .footer a:hover {
-            text-decoration: underline;
+        .footer-section a:hover {
+            color: white;
         }
 
-        .navbar {
-    background-color: var(--deep-teal); /* Updated navbar background color */
-    padding: 31px 20px; /* Increased top and bottom padding */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.navbar h1 {
-    color: var(--off-white); /* Changed to use off-white for better contrast */
-    margin: 0;
-    font-size: 2rem;
-    margin-left: 15px; /* Adjust this value to move the logo right */
-    transition: color 0.3s ease; /* Smooth transition for color change */
-}
-
-.navbar h1:hover {
-    color: var(--soft-gold); /* Color change on hover */
-}
-
-.navbar ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 20px;
-    margin-right: 30px; /* Adjust this value to move the items left */
-}
-
-.navbar ul li {
-    display: inline;
-}
-
-.navbar ul li a {
-    color: var(--off-white); /* Updated navbar link color */
-    text-decoration: none;
-    font-size: 18px;
-}
-
-.navbar ul li a:hover {
-    color: var(--soft-gold); /* Updated hover color to Soft Gold */
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-        /* footer section styles  starts */
-
-      :root {
-        --deep-teal: #003d4d;
-        --off-white: #f8f9fa;
-        --dark-slate: #2f4f4f;
-        --soft-gold: #d9c79e;
-      }
-      .footer {
-        width: 100%;
-        background-color: var(--deep-teal);
-        color: white;
-        padding: 13px 0;
-      }
-      .footer-content {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-      }
-
-      .ul {
-        padding: 0;
-        list-style: none;
-        font-family: Verdana, Geneva, Tahoma, sans-serif;
-        text-align: center;
-      }
-      .footer-bottom {
-        text-align: center;
-        color: #fff;
-        font-size: 14px;
-        margin: 0px;
-        margin-top: 3px;
-      }
-      .footer-bottom p{
-        margin:0 0 10px;
-      }
-
-      .footer a {
-        color: var(--soft-gold);
-        text-decoration: none;
-        font-size: 16px;
-      }
-
-      .social-icons {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 20px;
-      }
-      .social-icons a:hover {
-        color: var(--light-grey);
-        transform: scale(1.2) translateY(-5px);
-      }
-
-      .footer a:hover {
-        text-decoration: underline;
-      }
-
-      .footer-section h3 {
-        margin-bottom: 14px;
-        font-size: 28px;
-      }
-      /* footer section style ends */
-
-      @media (max-width: 768px) {
-    .footer-section h3 {
-        font-size: 18px;
-    }
-    
-    .footer a {
-        font-size: 13px;
-    }
-
-    .footer-section {
-        margin-bottom: 0;
-        gap:18px;
-    }
-
-    .footer-bottom{
-        font-size: 12px;
-        margin: 0px;
-        margin-top:8px;
-    }
-}
-
-@media (max-width:450px){
-
-    .footer-section h3 {
-        font-size: 14px;
-    }
-    
-    .footer a {
-        font-size: 11px;
-    }
-
-    .footer-section {
-        margin-bottom: 0;
-        
-    }
-
-    .footer-bottom{
-        font-size: 10px;
-        margin: 0px;
-        margin-top:5px;
-    }
-}
+        .social-icons a {
+            color: var(--soft-gold);
+            margin: 0 8px;
+            font-size: 1.2rem;
+            transition: transform 0.3s ease;
+        }
+
+        .social-icons a:hover {
+            transform: scale(1.2) translateY(-3px);
+        }
 
+        .footer-bottom {
+            margin-top: 15px;
+            font-size: 0.8rem;
+            text-align: center;
+            color: #ddd;
+        }
+
+        @media (max-width: 768px) {
+            .footer-content {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .navbar h1 {
+                font-size: 1.2rem;
+            }
+
+            .navbar ul li a {
+                font-size: 14px;
+            }
+        }
+
+        @media (max-width: 450px) {
+            .container {
+                padding: 20px;
+            }
 
+            h2 {
+                font-size: 1.2rem;
+            }
+
+            .footer-section h3 {
+                font-size: 1rem;
+            }
+
+            .footer-section a {
+                font-size: 0.8rem;
+            }
+        }
     </style>
 </head>
+
 <body>
 
-    
     <nav class="navbar">
-        <h1> Resume</h1>
+        <h1 id="iconh1">Resume Builder</h1>
         <ul>
             <li><a href="index.html">Home</a></li>
             <li><a href="about.html">About</a></li>
@@ -334,97 +253,84 @@ <h1> Resume</h1>
     </nav>
 
     <div class="container">
-        <div class="logo" onclick="window.location.href='index.html'">Resum Resume</div>
+        <div class="logo" onclick="window.location.href='index.html'">Resume Builder</div>
         <h2>Create Your Account</h2>
-
-
-        <!-- <form action="#" method="POST">
-            <input id="name" type="text" placeholder="Full Name" required>
-            <input id="email" type="email" placeholder="Email Address" required>
-            <input id="password" type="password" placeholder="Password" required>
-            <input id="confirmPassword" type="password" placeholder="Confirm Password" required>
-            <button type="submit" class="signupbtn">Sign Up</button> -->
-
-
         <form id="signupForm" action="#" method="POST">
             <input type="text" placeholder="Full Name" required>
             <input type="email" placeholder="Email Address" required>
             <input type="password" placeholder="Password" required>
             <input type="password" placeholder="Confirm Password" required>
             <button type="submit">Sign Up</button>
-
         </form>
         <button class="login-btn" onclick="window.location.href='login.html'">Go to Login</button>
     </div>
 
-     <!-- footer-section -->
-     <footer class="footer">
+    <footer class="footer">
         <div class="footer-content">
-          <div class="footer-section">
-            <h3>About Us</h3>
-            <ul class="ul">
-              <li><a href="#">Our Story</a></li>
-              <li><a href="#">Team</a></li>
-              <li><a href="#">Careers</a></li>
-            </ul>
-          </div>
-          <div class="footer-section">
-            <h3>Services</h3>
-            <ul class="ul">
-              <li><a href="#">Resume Builder</a></li>
-              <li><a href="#">CV Templates</a></li>
-              <li><a href="#">Career Advice</a></li>
-            </ul>
-          </div>
-          <div class="footer-section">
-            <h3>Support</h3>
-            <ul class="ul">
-              <li><a href="#">FAQ</a></li>
-              <li><a href="#">Contact Us</a></li>
-              <li><a href="#">Privacy Policy</a></li>
-            </ul>
-          </div>
-          <div class="footer-section">
-            <h3>Connect With Us</h3>
-            <div class="social-icons">
-              <a href="#"><i class="fab fa-facebook-f"></i></a>
-              <a href="#"><i class="fab fa-x-twitter"></i></a>
-              <a href="#"><i class="fab fa-linkedin-in"></i></a>
-              <a href="#"><i class="fab fa-instagram"></i></a>
+            <div class="footer-section">
+                <h3>About Us</h3>
+                <ul>
+                    <li><a href="#">Our Story</a></li>
+                    <li><a href="#">Team</a></li>
+                    <li><a href="#">Careers</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Services</h3>
+                <ul>
+                    <li><a href="#">Resume Builder</a></li>
+                    <li><a href="#">CV Templates</a></li>
+                    <li><a href="#">Career Advice</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Support</h3>
+                <ul>
+                    <li><a href="#">FAQ</a></ <li><a href="#">Contact Us</a></li>
+                    <li><a href="#">Privacy Policy</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Connect With Us</h3>
+                <div class="social-icons">
+                    <a href="#"><i class="fab fa-facebook-f"></i></a>
+                    <a href="#"><i class="fab fa-x-twitter"></i></a>
+                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                </div>
             </div>
-          </div>
         </div>
         <div class="footer-bottom">
-          <p>&copy; 2024 Resume Builder. All rights reserved.</p>
+            <p>&copy; 2024 Resume Builder. All rights reserved.</p>
         </div>
-      </footer>
+    </footer>
 
     <script>
         const signUp = document.querySelector(".signupbtn");
-    
+
         signUp.addEventListener("click", (e) => {
             e.preventDefault();
-    
+
             const name = document.querySelector("#name").value;
             const email = document.querySelector("#email").value;
             const password = document.querySelector("#password").value;
             const confirmPassword = document.querySelector("#confirmPassword").value;
-    
+
             if (!name || !email || !password || !confirmPassword) {
                 alert("All fields are required");
                 return;
             }
-    
+
             const userData = {
                 name,
                 email,
                 password,
                 confirmPassword
             };
-    
+
             registerUser(userData);
         });
-    
+
         const registerUser = async (user) => {
             try {
                 const res = await fetch("http://localhost:5000/auth/signup", {
@@ -432,39 +338,40 @@ <h3>Connect With Us</h3>
                     headers: { "content-type": "application/json" },
                     body: JSON.stringify(user)
                 });
-    
+
                 const data = await res.json();
                 window.location.href = "http://127.0.0.1:5500/Resum-Resume/login.html";
-    
+
             } catch (error) {
                 console.log(error.message);
                 alert("Check the credentials");
             }
         };
-    
+
         document.getElementById('signupForm').addEventListener('submit', function (event) {
             event.preventDefault();
-    
+
             var formData = new FormData(this);
-    
+
             fetch('signup-process.php', {
                 method: 'POST',
                 body: formData
             })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    window.location.href = 'index.html';
-                } else {
-                    alert('Sign Up failed: ' + data.message);
-                }
-            })
-            .catch(error => {
-                console.log('Error:', error);
-            });
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        window.location.href = 'index.html';
+                    } else {
+                        alert('Sign Up failed: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.log('Error:', error);
+                });
         });
     </script>
-    
+
 
 </body>
-</html>
\ No newline at end of file
+
+</html>