diff --git a/about.html b/about.html
index 5279ce3..78c4fe4 100644
--- a/about.html
+++ b/about.html
@@ -5,295 +5,268 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About Us - LinkedIn Resume Builder</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&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/5.15.3/css/all.min.css"
-    />
-
-    <link rel="icon" href="images/favicon-removebg-preview.png" />
-
-    <link rel="stylesheet" href="style.css" />
-   <style>
-        :root{
-         --purple: #aca7eb;
-        }
-
-        body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #acb4bc;
-            margin: 0;
-            padding: 0;
-        }
-
-        .header {
-            background-color: #aca7eb;
-            padding: 20px;
-            text-align: center;
-            color: white;
-        }
-
-        .header h1 {
-            margin: 0;
-            font-size: 36px;
-        }
-        .content1{
-            display: flex;
-            justify-content: flex-start;
-            margin-top: 120px;
-        }
-        .gif{
-            margin-left: 100px;
-        }
-        .content {
-            max-width: 800px;
-            margin: 50px auto;
-            background-color: #fff;
-            border-radius: 10px;
-            padding: 30px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease-in-out;
-            box-shadow: 0 12px 12px;
-        }
-
-        .content:hover{
-            transform:scale(1.1);
-            transform: 0.5s ease;
-        }
-
-        .content h2 {
-            font-size: 28px;
-            color: white;
-            border-radius: 5px;
-            padding: 2px 5px;
-            margin-bottom: 20px;
-            background-color: black;
-            text-align: center;
-        }
-
-        .content h2:hover{
-            background-color: #0073b1;
-        }
-
-
-        .content p {
-            font-size: 18px;
-            color: #555;
-            line-height: 1.6;
-            margin-bottom: 20px;
-        }
-
-
-        .content ul {
-            padding-left: 20px;
-            margin-bottom: 20px;
-        }
-
-        .content ul li {
-            font-size: 18px;
-            color: #555;
-            margin-bottom: 10px;
-        }
-
-        .footer {
-            text-align: center;
-            padding: 15px;
-            font-size: 24px;
-            color: #666;
-            background-color: #f4f4f9;
-            margin-top: 45px;
-            
-        }
-        .footer p{
-            margin-bottom: 0;
-        }
-
-        .back-button {
-            display: block;
-            text-align: center;
-            margin-top: 35px;
-            margin-bottom: 0px;
-        }
-
-        .back-button a {
-            padding: 10px 20px;
-            background-color: #aca7eb;
-            color: white;
-            text-decoration: none;
-            border-radius: 5px;
-        }
-
-        .back-button a:hover {
-            background-color: var(--purple);
-        }
-        .navbar {
-            background-color: #aca7eb;
-            padding: 15px 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .navbar h1 {
-            color: white;
-            margin: 0;
-            font-size: 24px;
-        }
-
-        .navbar ul {
-            list-style-type: none;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            gap: 20px;
-        }
-
-        .navbar ul li {
-            display: inline;
-        }
-
-        .navbar ul li a {
-            color: white;
-            text-decoration: none;
-            font-size: 18px;
-        }
-
-        .navbar ul li a:hover {
-            text-decoration: underline;
-        }
-
-        /* Main Content Placeholder */
-        .content {
-            padding: 20px;
-        }
-
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            .navbar {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-
-            .navbar ul {
-                flex-direction: column;
-                gap: 10px;
-            }
-
-            .navbar h1 {
-                margin-bottom: 10px;
-            }
-            .navbar ul li a {
-            color: rgb(53, 52, 52);
-            text-decoration: none;
-            font-size: 18px;
-        }
-        }
-     /* Responsive Styles */
-@media (max-width: 1200px) {
-    .content {
-        padding: 20px;
-    }
+    <style>
+:root {
+    --deep-teal: #003d4d; /* Updated primary color */
+    --off-white: #f8f9fa; /* Updated background color */
+    --dark-slate: #2f4f4f; /* Text color */
+    --soft-gold: #d9c79e; /* Accent color */
+}
 
-    .content1 {
-        justify-content: center;
-    }
+* {
+    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;
 }
 
-@media (max-width: 768px) {
-    .content {
-        padding: 15px;
-        margin: 15px;
-    }
+body {
+    background-color: var(--off-white); /* Updated background color */
+    margin: 0;
+    padding: 0;
+}
 
-    .content1 {
-        flex-direction: column;
-    }
+.header {
+    background-color: var(--deep-teal); /* Updated header color */
+    padding: 20px;
+    text-align: center;
+    color: var(--off-white); /* Text color for better contrast */
+}
 
-    .content h2 {
-        font-size: 24px;
-    }
+.header h1 {
+    margin: 0;
+    font-size: 36px;
+}
 
-    .content p, .content ul li {
-        font-size: 16px;
-    }
+.content1 {
+    display: flex;
+    justify-content: flex-start;
+}
 
-    img {
-        margin: 10px 0;
-    }
+.gif {
+    margin-left: 100px;
 }
 
+.content {
+    max-width: 70%; /* Further reduced width to prevent hiding the GIFs */
+    margin: 30px auto; /* Centered margin */
+    background-color: #f5f5f5; /* Slightly off-white background */
+    border-radius: 10px;
+    padding: 20px; /* Padding to maintain space inside the box */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease; /* Transition for scaling and glow */
+}
 
-@media (max-width: 768px) {
-    .content {
-        padding: 10px;
-        margin: 10px;
-    }
+.content:hover {
+    transform: scale(1.05); /* Slightly reduced scale effect for a minimalist look */
+    box-shadow: 0 0 15px rgba(0, 77, 79, 0.8); /* Glow effect with Dark Teal color */
+    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Ensure smooth transition */
+}
 
-    .content h2 {
-        font-size: 20px;
-    }
+.content h2 {
+    font-size: 28px;
+    color: var(--dark-slate); /* Updated heading color */
+    border-radius: 5px;
+    padding: 2px 5px;
+    margin-bottom: 20px;
+    background-color: var(--soft-gold); /* Updated background color for h2 */
+    text-align: center; /* Center align the heading */
+    transition: background-color 0.5s ease, color 0.5s ease;
+}
 
-    .content p, .content ul li {
-        font-size: 14px;
-    }
+.content h2:hover {
+    background-color: var(--deep-teal); /* Updated hover effect to match the theme */
+    color: var(--off-white);
+    transition: background-color 0.5s ease, color 0.5s ease; /* Transition for background and color */
+}
+
+.content p {
+    font-size: 18px;
+    color: var(--dark-slate); /* Updated paragraph color to Dark Slate */
+    line-height: 1.6;
+    margin-bottom: 20px;
+    text-align: left; /* Left-align paragraph text */
+}
+
+.content ul {
+    padding-left: 20px; /* Indent list */
+    margin-bottom: 20px;
+    text-align: left; /* Ensure ul is left aligned */
+}
+
+.content ul li {
+    font-size: 18px;
+    color: var(--dark-slate); /* Updated list item color */
+    margin-bottom: 10px;
+    text-align: left; /* Left-align list items */
+}
+
+
+/* Footer Styles */
+.footer {
+    background-color: var(--deep-teal); /* Match deep teal for footer background */
+    color: var(--off-white); /* Off-white text for footer for contrast */
+    padding: 30px 0; /* Consistent padding */
+    text-align: center; /* Center the text */
+    margin-top: 30px;
+}
+
+.footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 1200px; /* Max width for footer content */
+    margin: 0 auto; /* Center footer content */
+    padding: 0 20px; /* Consistent padding */
+}
+
+.footer-section {
+    flex: 1; /* Flexible sections in footer */
+    margin-bottom: 20px; /* Space between footer sections */
+    min-width: 200px; /* Minimum width for each section */
+}
+
+.footer-section h3 {
+    font-size: 18px; /* Font size for section headings */
+    font-weight: 700; /* Bold weight for section headings */
+    margin-bottom: 15px; /* Space below section headings */
+    color: var(--soft-gold); /* Soft Gold color for headings */
+}
 
-    img {
-        width: 100%;
-        height: auto;
+.footer-section ul {
+    list-style-type: none; /* No bullet points for list */
+    padding: 0; /* No padding for list */
+}
+
+.footer-section ul li {
+    margin-bottom: 8px; /* Space between list items */
+}
+
+.footer-section ul li a {
+    color: #e0e0e0; /* Light grey for links */
+    text-decoration: none; /* No underline for links */
+    transition: color 0.3s ease; /* Smooth transition for color change */
+}
+
+.footer-section ul li a:hover {
+    color: var(--soft-gold); /* Soft Gold color on hover */
+    text-decoration: none; /* Removed underline on hover for consistency */
+}
+
+.footer-bottom {
+    text-align: center; /* Centered text for the footer bottom */
+    padding-top: 20px; /* Padding for footer bottom */
+    margin-top: 20px; /* Margin for separation */
+    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border for separation */
+}
+
+.back-button {
+    display: block;
+    text-align: center;
+    margin-top: 20px; /* Decrease this value to move the button up */
+    margin-bottom: 0px;
+}
+
+.back-button a {
+    padding: 10px 20px;
+    background-color: var(--deep-teal); /* Updated back button color */
+    color: var(--off-white); /* Text color for back button */
+    text-decoration: none;
+    border-radius: 5px;
+}
+
+.back-button a:hover {
+    background-color: var(--soft-gold); /* Updated hover color */
+}
+
+.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;
+}
+
+/* Main Content Placeholder */
+.content {
+    padding: 20px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
     }
 
-    .back-button a {
-        font-size: 14px;
-        padding: 8px 16px;
+    .navbar ul {
+        flex-direction: column;
+        gap: 10px;
     }
 
-    .footer {
-        font-size: 16px;
+    .navbar h1 {
+        margin-bottom: 10px;
     }
 }
-@media (max-width: 769px) {
-.navbar,
-  .icons {
-    display: none;
-  }
-}
+
     </style>
 </head>
 <body>
 
- <header>  <!-- Navbar -->
-    <input type="checkbox" name="" id="toggler" />
-    <label for="toggler" class="fas fa-bars"></label>
-    <a href="#" class="logo">Resume Builder</a>
-    <nav class="navbar">
-     <ul>
-         <li><a href="index.html">Home</a>
-         <li><a href="about.html">About</a>
-         <li><a href="resume.html">Build Resume</a>
-     </ul>
- </nav>
- <div class="sidebar">
-     <span class="close-btn">&times;</span>
-     <a href="index.html">Home</a></li>
-         <a href="about.html">About</a></li>
-         <a href="resume.html">Build Resume</a>
- 
-     <!-- Sidebar icons -->
-     <div class="sidebar-icons">
-       <a href="about.html" class="fas fa-info-circle"></a>
-       <a href="#" class="fas fa-envelope"></a>
-       <a href="login.html" id="loginIcon" class="fas fa-user"></a>
-     </div>
-   </div></header>
+   <!-- Navbar -->
+   <nav class="navbar">
+    <h1>Resum Resume</h1>
+    <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="resume.html">Build Resume</a></li>
+        <li><a href="signup.html">Sign Up</a></li>
+        <li><a href="login.html">Login</a></li>
+    </ul>
+</nav>
     <div class="content1">
-        <img src="Li.gif" alt="" height="150px">
         <div class="content">
             <div class="action">
     
@@ -327,7 +300,6 @@ <h2>Why Use LinkedIn Resume Builder?</h2>
                 <li><strong>Accurate data:</strong> Directly pulls information from your LinkedIn profile.</li>
             </ul>
         </div>
-        <img src="Li.gif" alt="" height="150px">
     </div>
     <div class="back-button">
         <a href="index.html">Go Back to Home</a>
diff --git a/index.html b/index.html
index 5cc6121..c624249 100644
--- a/index.html
+++ b/index.html
@@ -19,134 +19,404 @@
         Toggle Dark Mode
     </label>
     <style>
-  /*<label for ="dark-mode-toggle">
+
+    <label for="dark-mode-toggle" style="margin: 20px; display: block; text-align: center;">
+
+<label for="dark-mode-toggle">
+
     <input type="checkbox" id="dark-mode-toggle" />
     Toggle Dark Mode
-</label>*/
 
-        /* Features Section */
-        .features {
-            padding: 60px 20px;
-            background-color: #f9f9f9;
-        }
+    </label>
 
-        .features h2 {
-            text-align: center;
-            color: #333;
-            margin-bottom: 40px;
-            font-size: 32px;
-        }
+</label>
 
-        .features-cards {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 30px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
 
-        .features-card {
-            background-color: white;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: calc(25% - 30px);
-            text-align: center;
+<!-- Features Section -->
+<style>
+.features {
+    padding: 60px 20px;
+    background-color: #f9f9f9; /* Consider changing this to a darker tone if needed */
+}
 
-            transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
-            position: relative;
-            z-index: 1;
-        }
+.features h2 {
+    text-align: center;
+    color: #333; /* Consider changing this for better contrast */
+    margin-bottom: 40px;
+    font-size: 32px;
+}
 
-        .features-card:hover {
-        transform: translateY(-10px) scale(1.1);
-        box-shadow: 0 4px 8px #0073b1; 
-        z-index: 3;
-        }
+.features-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
 
-        .features-card img {
-            width: 260px;
-            height: 260px;
-            margin-bottom: 15px;
-            height: 50%; /* Set height to 50% of the card */
-            /* /* object-fit: cover;  */
-            border-radius: 10px;
-            
+.features-card {
+    background-color: #fff; /* You might want to change this to a softer off-white */
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: calc(25% - 30px);
+    text-align: center;
 
-            transition: transform 0.3s ease;
-        }
+    transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
+    position: relative;
+    z-index: 1;
+}
 
-        .features-card:hover {
-            transform: translateY(-5px);
-        }
+.features-card:hover {
+    transform: translateY(-10px) scale(1.1);
+    box-shadow: 0 4px 8px #0073b1; /* Consider adjusting this to match the modern minimalist theme */
+    z-index: 3;
+}
+.features-card img {
+    width: 60px; /* Set the width for the icon images */
+    height: 60px; /* Set the height for the icon images */
+    margin-bottom: 20px;
+    border-radius: 10px; /* Rounded corners for the images */
+    transition: transform 0.3s ease;
+}
 
-        .features-card img {
-            width: 60px;
-            height: 60px;
-            margin-bottom: 20px;
+.features-card:hover {
+    transform: translateY(-5px); /* Slight lift effect on hover */
+}
 
-        }
+.features-card h3 {
+    color: var(--deep-teal); /* Use the deep teal color for headings */
+    margin: 15px 0;
+    font-size: 22px;
+}
+
+.features-card p {
+    color: var(--dark-slate); /* Use dark slate for paragraph text */
+    font-size: 16px;
+}
+
+/* Testimonials Section */
+.testimonials {
+    padding: 60px 20px;
+    background-color: var(--off-white); /* Use the off-white background color */
+}
+
+.testimonials h2 {
+    text-align: center;
+    color: var(--dark-slate); /* Use dark slate for heading text */
+    margin-bottom: 40px;
+    font-size: 32px;
+}
+
+
+.testimonial-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
 
         .features-card h3 {
-            color: #6e65f0;
+            color: #aca7eb;
             margin: 15px 0;
             font-size: 22px;
         }
 
+
+
+.testimonial-card {
+    background-color: var(--off-white); /* Use off-white for testimonial cards */
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: calc(33.33% - 30px);
+    text-align: center;
+}
+
         .features-card p {
-            color: #52525a;
+            color: #666;
             font-size: 16px;
         }
 
-        /* Testimonials Section */
-        .testimonials {
-            padding: 60px 20px;
-            background-color: #ffffff;
+
+.testimonial-card img {
+    width: 80px; /* Profile image width */
+    height: 80px; /* Profile image height */
+    border-radius: 50%; /* Circular shape for profile images */
+    margin-bottom: 20px;
+}
+.testimonial-card h3 {
+    color: var(--deep-teal); /* Use deep teal for testimonial headings */
+    margin: 10px 0;
+    font-size: 20px;
+}
+
+.testimonial-card p {
+    color: var(--dark-slate); /* Use dark slate for testimonial text */
+    font-size: 16px;
+    font-style: italic; /* Italic style for testimonial text */
+}
+
+/* Footer Styles */
+.footer {
+    background-color: var(--deep-teal); /* Use deep teal for footer background */
+    color: #ffffff; /* White text for footer */
+    padding: 40px 0;
+}
+
+.footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 1200px; /* Max width for footer content */
+    margin: 0 auto; /* Center footer content */
+    padding: 0 20px;
+}
+
+.footer-section {
+    flex: 1; /* Flexible sections in footer */
+    margin-bottom: 20px; /* Space between footer sections */
+    min-width: 200px; /* Minimum width for each section */
+}
+
+
+.text {
+    padding-right: 20px; /* Right padding for text sections */
+    max-width: 50%; /* Maximum width for text sections */
+}
+
+        .testimonial-card h3 {
+            color: #aca7eb;
+            margin: 10px 0;
+            font-size: 20px;
         }
 
-        .testimonials h2 {
-            text-align: center;
-            color: #333;
-            margin-bottom: 40px;
-            font-size: 32px;
+
+
+.image {
+    max-width: 50%; /* Maximum width for image sections */
+}
+
+        .testimonial-card p {
+            color: #666;
+            font-size: 16px;
+            font-style: italic;
         }
 
-        .testimonial-cards {
+
+
+.image img {
+    width: 100%; /* Full width for images */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 5px; /* Rounded corners for images */
+}
+
+.footer-section h3 {
+    font-size: 18px; /* Font size for section headings */
+    font-weight: 700; /* Bold weight for section headings */
+    margin-bottom: 15px; /* Space below section headings */
+    color: #ffffff; /* White color for headings */
+}
+
+.footer-section ul {
+    list-style-type: none; /* No bullet points for list */
+    padding: 0; /* No padding for list */
+}
+
+.footer-section ul li {
+    margin-bottom: 8px; /* Space between list items */
+}
+
+.footer-section ul li a {
+    color: #e0e0e0; /* Light grey for links */
+    text-decoration: none; /* No underline for links */
+    transition: color 0.3s ease; /* Smooth transition for color change */
+}
+
+.footer-section ul li a:hover {
+    color: #ffffff; /* White color on hover */
+    text-decoration: underline; /* Underline on hover */
+}
+
+.social-icons {
+    margin-top: 15px; /* Space above social icons */
+}
+
+.social-icons a {
+    color: #ffffff; /* White color for social icons */
+    font-size: 20px; /* Font size for social icons */
+    margin-right: 15px; /* Space between social icons */
+    transition: color 0.3s ease; /* Smooth transition for color change */
+}
+
+.social-icons a:hover {
+    color: var(--light-grey); /* Use light grey on hover for social icons */
+}
+
+.footer-bottom {
+    text-align: center; /* Center the text in the footer bottom */
+    padding-top: 20px; /* Space above footer bottom */
+    margin-top: 20px; /* Space above footer bottom */
+    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border for separation */
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column; /* Stack navbar items vertically */
+        align-items: flex-start; /* Align items to the start */
+    }
+
+    .navbar ul {
+        flex-direction: column; /* Stack navbar links vertically */
+        gap: 10px; /* Space between navbar links */
+        margin-top: 10px; /* Space above navbar links */
+    }
+
+    .hero-content {
+        flex-direction: column; /* Stack hero content vertically */
+    }
+
+    .hero-text {
+        padding-right: 0; /* Remove right padding for hero text */
+        margin-bottom: 30px; /* Space below hero text */
+    }
+
+    .features-card, .testimonial-card {
+        width: 100%; /* Full width for cards on small screens */
+    }
+
+    .footer-content {
+        flex-direction: column; /* Stack footer content vertically */
+    }
+
+    .footer-section {
+        margin-bottom: 30px; /* Space below footer sections */
+    }
+}
+
+
+        /* Footer Styles */
+        .footer {
+            background-color: #aca7eb;
+            color: #ffffff;
+            padding: 40px 0;
+        }
+
+        .footer-content {
             display: flex;
             flex-wrap: wrap;
-            justify-content: center;
-            gap: 30px;
+            justify-content: space-between;
             max-width: 1200px;
             margin: 0 auto;
+            padding: 0 20px;
         }
 
-        .testimonial-card {
-            background-color: #f9f9f9;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: calc(33.33% - 30px);
-            text-align: center;
+        .footer-section {
+            flex: 1;
+            margin-bottom: 20px;
+            min-width: 200px;
         }
 
-        .testimonial-card img {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            margin-bottom: 20px;
+        .text {
+            padding-right: 20px; 
+            max-width: 50%; 
         }
+        .image {
+            max-width: 50%; 
+        }
+        .image img {
+            width: 100%; 
+            height: auto;
+            border-radius: 5px; 
 
-        .testimonial-card h3 {
-            color:  #6e65f0;
-            margin: 10px 0;
+
+        .footer-section h3 {
+            font-size: 18px;
+            font-weight: 700;
+            margin-bottom: 15px;
+            color: #ffffff;
+        }
+
+        .footer-section ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .footer-section ul li {
+            margin-bottom: 8px;
+
+        }
+
+        .footer-section ul li a {
+            color: #e0e0e0;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        .footer-section ul li a:hover {
+            color: #ffffff;
+            text-decoration: underline;
+        }
+
+        .social-icons {
+            margin-top: 15px;
+        }
+
+        .social-icons a {
+            color: #ffffff;
             font-size: 20px;
+            margin-right: 15px;
+            transition: color 0.3s ease;
         }
 
-        .testimonial-card p {
-            color: #52525a;
-            font-size: 16px;
-            font-style: italic;
+        .social-icons a:hover {
+            color: #e0e0e0;
+        }
+
+        .footer-bottom {
+            text-align: center;
+            padding-top: 20px;
+            margin-top: 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* Responsive Styles */
+        @media (max-width: 768px) {
+            .navbar {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .navbar ul {
+                flex-direction: column;
+                gap: 10px;
+                margin-top: 10px;
+            }
+
+            .hero-content {
+                flex-direction: column;
+            }
+
+            .hero-text {
+                padding-right: 0;
+                margin-bottom: 30px;
+            }
+
+            .features-card, .testimonial-card {
+                width: 100%;
+            }
+
+            .footer-content {
+                flex-direction: column;
+            }
+
+            .footer-section {
+                margin-bottom: 30px;
+            }
         }
 
     </style>
@@ -158,7 +428,11 @@
         
     <input type="checkbox" name="" id="toggler">
     <label for="toggler" class="fas fa-bars"></label>
+
     <a href="#" class="logo" id=""><span id="newlogo"></span></a>
+
+    <a href="#" class="logo">Resum Resume</a>
+
              
             <nav class="navbar">
                 <a href="#home">Home</a>
diff --git a/login.html b/login.html
index 521019d..ae155d4 100644
--- a/login.html
+++ b/login.html
@@ -6,19 +6,35 @@
     <title>Login - LinkedIn Resume Builder</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
+        
+        :root {
+            --deep-teal: #003d4d;
+            --off-white: #f8f9fa;
+            --dark-slate: #2f4f4f;
+            --soft-gold: #d9c79e;
 
-        :root{
-          --purple:   #6e65f0;
         }
+
+        * {
+            margin: 0; 
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            outline: none;
+            text-decoration: none;
+            text-transform: capitalize;
+            transition: .2s linear;
+        }
+
         body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #f0f4f8;
+            background-color: var(--off-white);
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
+            flex-direction: column;
         }
 
         .container {
@@ -29,10 +45,23 @@
             max-width: 400px;
             width: 100%;
             text-align: center;
+            position: relative; /* Allow footer positioning */
+        }
+
+        .logo {
+            font-size: 2rem; /* Adjusted size for single line */
+            color: var(--deep-teal);
+            font-weight: 600;
+            margin-bottom: 20px;
+            cursor: pointer; /* Change cursor to pointer */
+        }
+
+        .logo:hover {
+            color: var(--soft-gold); /* Change color on hover */
         }
 
         h2 {
-            color: #333;
+            color: var(--dark-slate);
             margin-bottom: 20px;
         }
 
@@ -48,29 +77,46 @@
         button {
             width: 100%;
             padding: 15px;
-            background-color: #aca7eb;
+            background-color: var(--deep-teal);
             color: white;
             border: none;
             border-radius: 4px;
             font-size: 18px;
             cursor: pointer;
+            margin-top: 10px; /* Added margin for spacing */
         }
 
         button:hover {
-            background-color: var(--purple);
+            background-color: var(--soft-gold);
+        }
+
+        .signup-btn {
+            background-color: var(--soft-gold);
+            margin-top: 10px;
+        }
+
+        .signup-btn:hover {
+            background-color: var(--deep-teal);
         }
 
         .footer {
-            margin-top: 20px;
+            margin-top: 20px; /* Space between container and footer */
+            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: 30px 0; /* Padding for spacing */
+            position: absolute; /* Positioning at the bottom */
+            bottom: 0; /* Align to the bottom */
         }
 
         .footer p {
-            color: #666;
+            color: #fff; /* Text color for footer */
             font-size: 14px;
         }
 
         .footer a {
-            color: #aca7eb;
+            color: var(--soft-gold);
             text-decoration: none;
         }
 
@@ -82,16 +128,20 @@
 <body>
 
     <div class="container">
+        <div class="logo" onclick="window.location.href='index.html'">Resum Resume</div>
         <h2>Log In to Your Account</h2>
-        <form action="#" method="POST">
+        <form id="loginForm" action="#" method="POST">
             <input type="email" placeholder="Email Address" required>
             <input type="password" placeholder="Password" required>
             <button type="submit">Log In</button>
         </form>
-        <div class="footer">
-            <p>Don't have an account? <a href="signup.html">Sign Up</a></p>
-        </div>
+        <button class="signup-btn" onclick="window.location.href='signup.html'">Go to Signup</button>
+    </div>
+
+    <div class="footer">
+        <p>Powered by Resume Builder &copy; 2024</p>
     </div>
+
     <script>
         document.getElementById('loginForm').addEventListener('submit', function(event) {
             event.preventDefault(); // Prevent the default form submission
diff --git a/resume.html b/resume.html
index 16dca8a..45a6a33 100644
--- a/resume.html
+++ b/resume.html
@@ -1,303 +1,290 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Resume Builder from LinkedIn</title>
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
-      rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+        rel="stylesheet"
     />
     <style>
-      *{
-        margin:10px;
-      }
-      .nav{
-        background-color: #aca7eb;
-        display: flex;
-        width: 100%;
-        margin: 0%;
-        
-      }
-      ul{
-        list-style: none;
-        display: flex;
-        align-items: end;
-        color: #fff;
-        font-size: 25px;
-        font-weight: 300;
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-      }
-      a{
-        color: #fff;
-        justify-content: space-between;
-        text-decoration: none;
-      }
-      li{
-        text-align: end;
-      }
-      .heading{
-        font-size: 70px;
-        background-color: #aca7eb;
-        color: white;
-        padding-left: 20px;
-        font-family:   sans-serif;
-      }
-      img{
-        border: 2px solid black;
-      }
-      .sub-heading{
-        margin-left: 30px;
-        padding-top: 40px;
-        font-size: 40px;
-        color: #4841bd;
-        width:fit-content;
-        font-family: Georgia, 'Times New Roman', Times, serif;
-      }
-      .sample-resume{
-        width:20%;
-        margin:10px;
-        padding: 3px;
-      }
-      .sample-color{
-        width:17%;
-        margin:10px;
-        padding: 3px;
-      }
-      .button-view{
-       padding: 15px;
-       font-size: 25px;
-       font-weight: 500;
-       font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-       border: 1px solid #4841bd;
-      }
-      :root {
-        --purple: #6e65f0;
-      }
-      body {
-        font-family: "Roboto", sans-serif;
-        background-color: #f4f4f9;
-        margin: 0;
-        padding: 0;
-      }
-
-      .container {
-        margin: 50px 120px ;
-        background-color: #fff;
-        padding: 20px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-      }
-
-      h1 {
-        text-align: center;
-        color: #333;
-      }
-
-      form {
-        display: flex;
-        flex-direction: column;
-      }
-
-      label {
-        margin: 10px 0 5px;
-        color: #333;
-        font-weight: 500;
-      }
-
-      input[type="url"],
-      select,
-      button {
-        padding: 10px;
-        font-size: 16px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        margin-bottom: 20px;
-        outline: none;
-      }
-
-      input[type="url"]:focus,
-      select:focus {
-        border-color: var(--purple);
-      }
-
-      button {
-        background-color: var(--purple);
-        color: white;
-        border: none;
-        cursor: pointer;
-      }
-
-      button:hover {
-        background-color: var(--purple);
-      }
-
-      .footer {
-        text-align: center;
-        margin-top: 20px;
-        font-size: 14px;
-        color: #666;
-      }
-      .navbar {
-        background-color: var(--purple);
-        padding: 15px 20px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .navbar h1 {
-        color: white;
-        margin: 0;
-        font-size: 24px;
-      }
-
-      .navbar ul {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        gap: 20px;
-      }
-
-      .navbar ul li {
-        display: inline;
-      }
-
-      .navbar ul li a {
-        color: white;
-        text-decoration: none;
-        font-size: 18px;
-      }
-
-      .navbar ul li a:hover {
-        text-decoration: underline;
-      }
-
-      /* Main Content Placeholder */
-      .content {
-        padding: 20px;
-      }
-
-      /* Responsive adjustments */
-      @media (max-width: 768px) {
-        .navbar {
-          flex-direction: column;
-          align-items: flex-start;
+        :root {
+            --deep-teal: #003d4d; /* Updated primary color */
+            --off-white: #f8f9fa; /* Updated background color */
+            --dark-slate: #2f4f4f; /* Text color */
+            --soft-gold: #d9c79e; /* Accent color */
         }
 
-        .navbar ul {
-          flex-direction: column;
-          gap: 10px;
+        * {
+            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: 0.2s linear;
+        }
+
+        body {
+            background-color: var(--off-white);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh; /* Ensure body takes full height */
+        }
+
+        .container {
+            margin: 50px auto; /* Center horizontally */
+            padding: 20px;
+            max-width: 500px; /* Set a max-width for the container */
+            background-color: #fff;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 10px; /* Added rounded corners */
+            transition: box-shadow 0.3s ease;
+            display: flex; /* Use flexbox to center items */
+            justify-content: center; /* Center horizontally */
+            align-items: center; /* Center vertically */
+            height: calc(100vh - 180px); /* Full height minus margins */
+        }
+
+        .container:hover {
+            box-shadow: 0 0 20px rgba(0, 77, 79, 0.8); /* Glow effect on hover */
+        }
+
+        h1 {
+            text-align: center;
+            color: var(--dark-slate); /* Updated heading color */
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%; /* Make form take full width of container */
+        }
+
+        label {
+            margin: 10px 0 5px;
+            color: var(--dark-slate); /* Updated label color */
+            font-weight: 500;
+        }
+
+        input[type="url"],
+        input[type="email"],
+        input[type="tel"],
+        select,
+        button {
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-bottom: 20px;
+            outline: none;
+            width: 100%; /* Full width for input fields */
+        }
+
+        input[type="url"]:focus,
+        input[type="email"]:focus,
+        input[type="tel"]:focus,
+        select:focus {
+            border-color: var(--purple);
+        }
+
+        button {
+            background-color: var(--deep-teal);
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        button:hover {
+            background-color: var(--soft-gold); /* Soft gold hover color */
+            color: var(--deep-teal);
+            transform: scale(1.05);
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: auto; /* Push footer to the bottom */
+            padding: 34px 0;
+            background-color: var(--deep-teal);
+            color: white;
+            font-size: 14px;
+        }
+
+        .navbar {
+            background-color: var(--deep-teal);
+            padding: 30px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
 
         .navbar h1 {
-          margin-bottom: 10px;
+            color: white;
+            margin-left: 15px;
+            font-size: 2rem;
+            transition: color 0.3s ease;
+        }
+
+        .navbar h1:hover {
+            color: var(--soft-gold);
         }
-      }
-      @media (max-width: 400px) {
+
         .navbar ul {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-evenly;
-          width: 100%;
+            list-style-type: none;
+            margin-right: 30px;
+            padding: 0;
+            display: flex;
+            gap: 20px;
         }
+
         .navbar ul li {
-          justify-content: space-evenly !important;
+            display: inline;
         }
+
         .navbar ul li a {
-          color: #eee7e7;
-          font-size: 20px;
+            color: white;
+            text-decoration: none;
+            font-size: 18px;
+            transition: color 0.3s ease;
         }
+
         .navbar ul li a:hover {
-          color: #ffffff;
-          font-size: 22px;
+            color: var(--soft-gold);
+        }
+
+        .content {
+            padding: 20px;
+            text-align: center;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .navbar {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .navbar ul {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .navbar h1 {
+                margin-bottom: 10px;
+            }
+
+            .container {
+                max-width: 90%; /* Adjusted width for mobile */
+            }
+        }
+        @media (max-width: 400px) {
+            .navbar ul {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-evenly;
+                width: 100%;
+            }
+            .navbar ul li {
+                justify-content: space-evenly !important;
+            }
+            .navbar ul li a {
+                color: #eee7e7;
+                font-size: 20px;
+            }
+            .navbar ul li a:hover {
+                color: #ffffff;
+                font-size: 22px;
+            }
         }
-      }
     </style>
-  </head>
-  <body>
-    <div class="nav">
-        <h1 class="heading">Resume Builder</h1>
+</head>
+<body>
+
+    <!-- Navbar -->
+    <nav class="navbar">
+        <h1>Resum Resume</h1>
         <ul>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="about.html">About</a></li>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="resume.html">Build Resume</a></li>
+            <li><a href="signup.html">Sign Up</a></li>
+            <li><a href="login.html">Login</a></li>
         </ul>
-      </div>
-        <div class="gallery-view">
-
-          <div class="sampleTemplates">
-           <h2 class="sub-heading">SAMPLE DESIGNS</h2>
-
-           <img class="sample-resume"src="images\sample-resume6.jpg" alt="resume6">
-           <img class="sample-resume"src="images\sample-resume1.jpg" alt="resume1">
-           <img class="sample-resume"src="images\sample-resume2.jpg" alt="resume2">
-           <img class="sample-resume"src="images\sample-resume7.jpg" alt="resume7">
-           <img class="sample-resume"src="images\sample-resume4.jpg" alt="resume4">
-           <img class="sample-resume"src="images\sample-resume5.jpg" alt="resume5">
-           <img class="sample-resume"src="images\sample-resume8.jpg" alt="resume8">
-           <a href="galleryView.html"><button class="button-view">GALLERY VIEW</button></a>
-           
-           
-          </div>
-          <div class="colorPallet">
-            <h2 class="sub-heading">COLOUR PALETTE</h2>
-            <img class="sample-color"src="images\sample-color1.png" alt="color1">
-            <img class="sample-color"src="images\sample-color2.png" alt="color2">
-            <img class="sample-color"src="images\sample-color3.png" alt="color3">
-            <img class="sample-color"src="images\sample-color4.png" alt="color4">
-            <a href="colorChoice.html"><button class="button-view">MORE CHOICES</button></a> 
-          </div>
-        </div>
-
-        <div class="main-section">
-        <h2 class="sub-heading">CREATE YOUR OWN RESUME</h2>
+    </nav>
+
     <div class="container">
-     
-      <form id="resumeForm">
-        <label for="linkedin-url">LinkedIn Profile URL</label>
-        <input
-          type="url"
-          id="linkedin-url"
-          name="linkedin-url"
-          placeholder="Enter your LinkedIn URL"
-          required
-        />
-
-        <label for="template">Choose a Resume Template</label>
-        <select id="template" name="template" placeholder="Choose Template"required>
-        <option value="classic">Choose Template</option>
-          <option value="classic">Classic Template</option>
-          <option value="modern">Modern Template</option>
-          <option value="minimalist">Minimalist Template</option>
-          <option value="Custom">Custom Template</option>
-        </select>
-
-        <button type="submit">Generate Resume</button>
-      </form>
-    </div>
+        <form id="resumeForm">
+            <label for="linkedin-url">LinkedIn Profile URL</label>
+            <input
+                type="url"
+                id="linkedin-url"
+                name="linkedin-url"
+                placeholder="Enter your LinkedIn URL"
+                required
+            />
 
+            <label for="email">Email Address</label>
+            <input
+                type="email"
+                id="email"
+                name="email"
+                placeholder="Enter your email address"
+                required
+            />
 
-      <div class="footer">
+            <label for="phone">Phone Number</label>
+            <input
+                type="tel"
+                id="phone"
+                name="phone"
+                placeholder="Enter your phone number"
+                required
+            />
+
+            <label for="template">Choose a Resume Template</label>
+            <select id="template" name="template" placeholder="Choose Template" required>
+                <option value="classic">Choose Template</option>
+                <option value="classic">Classic Template</option>
+                <option value="modern">Modern Template</option>
+                <option value="minimalist">Minimalist Template</option>
+                <option value="custom">Custom Template</option>
+            </select>
+
+            <button type="submit">Generate Resume</button>
+        </form>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
         <p>Powered by Resume Builder &copy; 2024</p>
-      </div>
     </div>
 
     <script>
-      document
-        .getElementById("resumeForm")
-        .addEventListener("submit", function (event) {
-          event.preventDefault();
-
-          const linkedInUrl = document.getElementById("linkedin-url").value;
-          const template = document.getElementById("template").value;
-
-          if (linkedInUrl && template) {
-            alert(
-              `Generating resume using ${template} template for LinkedIn profile: ${linkedInUrl}`
-            );
-            // Here you would add logic to send this data to your backend for processing
-          }
-        });
+        document
+            .getElementById("resumeForm")
+            .addEventListener("submit", function (event) {
+                event.preventDefault();
+
+                const linkedInUrl = document.getElementById("linkedin-url").value;
+                const email = document.getElementById("email").value;
+                const phone = document.getElementById("phone").value;
+                const template = document.getElementById("template").value;
+
+                if (linkedInUrl && email && phone && template) {
+                    alert(
+                        `Generating resume using ${template} template for LinkedIn profile: ${linkedInUrl}, Email: ${email}, Phone: ${phone}`
+                    );
+                    // Add logic to send this data to your backend for processing
+                }
+            });
     </script>
-  </body>
+</body>
 </html>
diff --git a/signup.html b/signup.html
index c3fe8bb..6823860 100644
--- a/signup.html
+++ b/signup.html
@@ -7,17 +7,35 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
         :root {
-          --purple: #6e65f0;
+            
+            --deep-teal: #003d4d;
+            --off-white: #f8f9fa;
+            --dark-slate: #2f4f4f;
+            --soft-gold: #d9c79e;
+
+        }
+
+        * {
+            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;
         }
+
         body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #f0f4f8;
+            background-color: var(--off-white);
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
+            flex-direction: column; /* Added for vertical alignment */
         }
 
         .container {
@@ -30,8 +48,20 @@
             text-align: center;
         }
 
+        .logo {
+            font-size: 2rem; /* Decreased size for single line */
+            color: var(--deep-teal);
+            font-weight: 600;
+            margin-bottom: 20px;
+            cursor: pointer; /* Change cursor to pointer */
+        }
+
+        .logo:hover {
+            color: var(--soft-gold); /* Change color on hover */
+        }
+
         h2 {
-            color: #333;
+            color: var(--dark-slate);
             margin-bottom: 20px;
         }
 
@@ -48,7 +78,7 @@
         button {
             width: 100%;
             padding: 15px;
-            background-color: var(--purple);
+            background-color: var(--deep-teal);
             color: white;
             border: none;
             border-radius: 4px;
@@ -57,20 +87,36 @@
         }
 
         button:hover {
-            background-color: var(--purple);
+            background-color: var(--soft-gold);
+        }
+
+        .login-btn {
+            background-color: var(--soft-gold);
+            margin-top: 10px;
+        }
+
+        .login-btn:hover {
+            background-color: var(--deep-teal);
         }
 
         .footer {
-            margin-top: 20px;
+            margin-top: 20px; /* Space between container and footer */
+            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: 30px 0; /* Padding for spacing */
+            position: absolute; /* Positioning at the bottom */
+            bottom: 0; /* Align to the bottom */
         }
 
         .footer p {
-            color: #666;
+            color: #fff; /* Text color for footer */
             font-size: 14px;
         }
 
         .footer a {
-            color: var(--purple);
+            color: var(--soft-gold);
             text-decoration: none;
         }
 
@@ -82,22 +128,25 @@
 <body>
 
     <div class="container">
+        <div class="logo" onclick="window.location.href='index.html'">Resum Resume</div>
         <h2>Create Your Account</h2>
-        <form action="#" method="POST">
+        <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>
-        <div class="footer">
-            <p>Already have an account? <a href="login.html">Log In</a></p>
-        </div>
+        <button class="login-btn" onclick="window.location.href='login.html'">Go to Login</button>
+    </div>
+
+    <div class="footer">
+        <p>Powered by Resume Builder &copy; 2024</p>
     </div>
 
     <script>
         document.getElementById('signupForm').addEventListener('submit', function(event) {
-            event.preventDefault(); // Prevent the default form submission
+            event.preventDefault();
 
             var formData = new FormData(this);
             
@@ -108,7 +157,7 @@ <h2>Create Your Account</h2>
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    window.location.href = 'index.html'; // Redirect to homepage
+                    window.location.href = 'index.html'; 
                 } else {
                     alert('Sign Up failed: ' + data.message);
                 }
diff --git a/style.css b/style.css
index 4ae9563..3f9ba9c 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,9 @@
 :root{
-    --purple: #6e65f0;
+    --deep-teal: #003d4d; /* Deep Teal */
+    --off-white: #f8f9fa; /* Off-White */
+    --dark-slate: #2f4f4f; /* Dark Slate */
+    --soft-gold: #d9c79e; /* Soft Gold */
+
 }
 
 * {
@@ -25,93 +29,111 @@ section{
     padding: 2rem 9%;
 }
 
-.heading{
+.heading {
     text-align: center;
     font-size: 4rem;
-    color: #333;
+    color: var(--dark-slate); /* Dark Slate color */
     padding: 1rem;
     margin: 2rem 0;
-    background: rgba(255,51,153,0.05);
+    background: var(--deep-teal); /* Changed background to Deep Teal */
 }
 
-.heading span{
-    color: var(--pink);
+.heading span {
+    color: var(--soft-gold); /* Soft Gold for span */
 }
 
-.btn{
+.btn {
     display: inline-block;
     margin-top: 1rem;
     border-radius: 5rem;
-    background: #333;
-    color: #fff;
+    background: var(--soft-gold); /* Soft Gold button background */
+    color: var(--dark-slate); /* Dark Slate text color */
     padding: 0.9rem 3.5rem;
     cursor: pointer;
     font-size: 1.7rem;
 }
 
-.btn:hover{
-    background: var(--purple);
+.btn:hover {
+    background: var(--deep-teal); /* Deep Teal on hover */
 }
 
-header{
+header {
     position: fixed;
     top: 0; left: 0; right: 0;
-    background: #f0f0f4;
+    background: var(--deep-teal); /* Changed background to Deep Teal */
     padding: 2rem 9%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     z-index: 1000;
-    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
 }
 
-header .logo{
+header .logo {
     font-size: 3rem;
+
     font-family: 'Poppins', sans-serif;
     color: #353047;
+
+    color: var(--off-white); /* White logo for contrast */
+    font-weight: bolder;
+}
+
+header .logo:hover {
+    font-size: 3rem;
+    color: var(--soft-gold); /* Soft Gold on hover for logo */
     font-weight: bolder;
     text-decoration: none;
 }
 
 
-header .navbar a{
+header .logo span {
+    color: var(--off-white); /* Updated to match logo color */
+
+}
+
+
+header .navbar a {
     font-size: 2rem;
-    padding: 0 1.5rem;
-    color: #0d1193;
+    padding: 15px;
+    color: var(--off-white); /* White text for better contrast */
+    text-decoration: none; /* Ensure no underline by default */
 }
 
-header .navbar a:hover{
-    color: var(--red);
-    text-decoration: none;
+header .navbar a:hover {
+    color: var(--soft-gold); /* Soft Gold on hover */
+    text-decoration: none; /* Ensure no underline by default */
 }
 
-header .icons a{
+header .icons a {
     font-size: 2.5rem;
-    color: #180c3a;
+    color: var(--off-white); /* White icons for contrast */
     margin-left: 1.5rem;
 }
 
-header .icons a:hover{
-    color: var(--purple);
+header .icons a:hover {
+    color: var(--soft-gold); /* Soft Gold hover effect for icons */
 }
 
-header #toggler{
+header #toggler {
     display: none;
 }
 
-header .fa-bars{
+header .fa-bars {
     font-size: 3rem;
-    color:#180c3a;
+
+    color: var(--off-white); /* White for better visibility */
     border-radius: .5rem;
     padding: .5rem 1.5rem;
     cursor: pointer;
-    border: .1rem solid rgba(0,0,0,0.3);
+    border: .1rem solid rgba(0, 0, 0, 0.3);
     display: none;
 }
+
 /* Default light mode styles */
 body {
-    background-color: #ffffff;
-    color: #000000;
+    background-color: var(--off-white); /* Changed from #ffffff to Off-White */
+    color: var(--dark-slate); /* Changed from #000000 to Dark Slate */
 }
 
 /* Dark mode styles */
@@ -127,39 +149,71 @@ body {
 
 /* Add more styles as needed for other elements */
 
-
-.home{
+.home {
     display: flex;
     align-items: center;
     min-height: 100vh;
-    background: url(images/background-home.png)no-repeat;
+    background: url(images/background-home.png) no-repeat;
     background-size: cover;
     background-position: center;
+    animation: floatInFromRight 2s ease-out forwards; /* Image floats from right */
 }
 
-.home .content{
+.home .content {
     max-width: 50rem;
+    opacity: 0; /* Ensure the text is hidden initially */
+    animation: floatInFromTop 2s ease-out forwards; /* Text floats from top */
 }
 
+.home .content h3,
+.home .content p,
+.home .content a {
+    opacity: 0; /* Initially hidden */
+    animation: floatInFromTop 2s ease-out forwards; /* Text enters from the top */
+    animation-delay: 0.5s; /* Delay for a smooth entrance */
+}
+
+
 .home .content h3{
     font-size: 5rem;
-    color: #0e0d0d;
+    color: var(--dark-slate); /* Changed from #333 to Dark Slate */
 }
 
 .home .content span{
     font-size: 3.5rem;
-    color: var(--purple);
+    color: var(--soft-gold); /* Changed from var(--purple) to Soft Gold */
     padding: 1rem 0;
     line-height: 1.5;
 }
 
 .home .content p{
     font-size: 1.5rem;
-    color: #0f0f16;
+    color: #666; /* Changed from #999 to a darker gray for better readability */
     padding: 1rem 0;
     line-height: 1.5;
 }
 
+@keyframes floatInFromTop {
+    0% {
+        opacity: 0;
+        transform: translateY(0); /* Starting position from above */
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0); /* Final position */
+    }
+}
+
+@keyframes floatInFromRight {
+    0% {
+        opacity: 0;
+        transform: translateX(50px); /* Starting position from the right */
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0); /* Final position */
+    }
+}
 
 /* Footer Styles */
 .footer {
@@ -255,78 +309,82 @@ body {
 
 
 /* media queries */
-@media (max-width:991px){
-
-    html{
+@media (max-width: 991px) {
+    html {
         font-size: 55%;
     }
 
-    header{
+    header {
         padding: 2rem;
     }
 
-    section{
+    section {
         padding: 2rem;
     }
 
-    .home{
+    .home {
         background-position: left;
     }
     
 }
 
-@media (max-width:768px){
-
-    html .fa-bars{
+@media (max-width: 768px) {
+    html .fa-bars {
         display: block;
     }
 
-    header .navbar{
+    header .navbar {
         position: absolute;
-        top: 100%; left: 0; right: 0;
-        background: #eee;
-        border-top: 0.1rem solid rgba(0,0,0,0.1);
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #f9f9f9; /* Updated background to a softer light color */
+        border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
         clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     }
 
-    header #toggler:checked ~ .navbar{
+    header #toggler:checked ~ .navbar {
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     }
 
-    header .navbar a{
+    header .navbar a {
         margin: 1.5rem;
         padding: 1.5rem;
-        background: #fff;
-        border: 0.1rem solid rgba(0,0,0,0.1);
+        background: #ffffff; /* Updated to a cleaner white */
+        border: 0.1rem solid rgba(0, 0, 0, 0.1);
+        color: var(--dark-slate); /* Changed text color to Dark Slate */
         display: block;
     }
 
-    .home .content h3{
+    header .navbar a:hover {
+        color: var(--soft-gold); /* Hover color set to Soft Gold */
+    }
+
+    .home .content h3 {
         font-size: 5rem;
     }
 
-    .home .content span{
+    .home .content span {
         font-size: 2.5rem;
     }
 
-    .icons-container .icons h3{
+    .icons-container .icons h3 {
         font-size: 2rem;
     }
     
-    .icons-container .icons span{
+    .icons-container .icons span {
         font-size: 1.7rem;
     }
      
 
 }
 
-@media (max-width:450px){
-
-    html{
+@media (max-width: 450px) {
+    html {
         font-size: 50%;
     }
 
-    .heading{
+    .heading {
         font-size: 3rem;
     }