diff --git a/src/frontend/src/imgs/ilu1.gif b/src/frontend/src/imgs/ilu1.gif
new file mode 100644
index 0000000..5334f08
Binary files /dev/null and b/src/frontend/src/imgs/ilu1.gif differ
diff --git a/src/frontend/src/imgs/ilu1.png b/src/frontend/src/imgs/ilu1.png
new file mode 100644
index 0000000..34a3d6b
Binary files /dev/null and b/src/frontend/src/imgs/ilu1.png differ
diff --git a/src/frontend/src/pages/onboarding.html b/src/frontend/src/pages/onboarding.html
index 54dd69a..227ceec 100644
--- a/src/frontend/src/pages/onboarding.html
+++ b/src/frontend/src/pages/onboarding.html
@@ -12,31 +12,37 @@
 
     <style>
         body {
-            background-color: #f2f2f2;
+            background-color: #fbf6f0;
+            color: #000000;
             padding-top: 100px;
+            font-family: Arial, sans-serif;
+            min-height: 100vh;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
         }
 
-        /* Navbar styles */
-        .navbar-nav .nav-link:hover {
-            color: #01BF9B !important;
-        }
-
-        .navbar-nav {
-            text-align: center;
-        }
+    .navbar-nav .nav-link:hover {
+        color: #6895D2 !important;
+    }
 
-        .navbar-nav .nav-item {
-            padding: 0 10px;
-        }
+    .navbar-nav {
+        text-align: center;
+    }
 
-        .dropdown {
-            margin-left: auto;
-        }
+    .navbar-nav .nav-item {
+        padding: 0 10px;
+    }
 
-        .dropdown-menu .nav-dropdown {
-            left: 280px !important;
-        }
+    .dropdown {
+        margin-left: auto;
+    }
 
+    .dropdown-menu .nav-dropdown {
+        left: 100%;
+    }
         .page-left {
             padding-left: 60px;
         }
@@ -59,63 +65,62 @@
         .card {
             width: 500px;
         }
+
+        /* Fact styling */
+        .fact {
+            font-size: 1.2rem; /* Increased font size */
+            color: #555; /* Darkened text color */
+            font-style: italic; /* Italicized text */
+        }
     </style>
 </head>
 <body>
-<nav class="navbar fixed-top navbar-expand-lg" style="background-color: #ffffff; border-bottom: 1px solid #dddddd; padding: 10px 0;">
-    <div class="container-fluid">
-        <!-- Brand/logo -->
-        <a class="navbar-brand" href="#">
-            <img src="C:\Users\gayat\Desktop\CreditIQ Crew - Financial Inclusion\PsyCred\src\frontend\src\imgs\logo.png" alt="PsyCred Logo" style="height: 40px; width: auto;">
-        </a>
-
-        <!-- Toggler/collapsible Button -->
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <!-- Navbar links -->
-        <div class="collapse navbar-collapse" id="navbarNavDropdown">
-            <ul class="navbar-nav mx-auto">
-                <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="#" style="color: #333333;">Home</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="signup.html" style="color: #333333;">Sign up</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="login.html" style="color: #333333;">Login</a>
-                </li>
-                <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="color: #333333;">
-                        Profile
-                    </a>
-                    <ul class="dropdown-menu">
-                        <li><a class="dropdown-item nav-dropdown" href="#" style="color: #333333;">View Profile</a></li>
-                        <li><a class="dropdown-item nav-dropdown" href="#" style="color: #333333;">Edit Profile</a></li>
-                    </ul>
-                </li>
-            </ul>
+    <nav class="navbar fixed-top navbar-expand-lg" style="background-color: #f2f2f2;">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#" style="color: #2c2b29;">PsyCred</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav mx-auto">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="#" style="color: #2c2b29;">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="signup.html" style="color: #2c2b29;">Sign up</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="login.html" style="color: #2c2b29;">Login</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="color: #2c2b29;">
+                            Profile
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li><a class="dropdown-item nav-dropdown" href="#" style="color: black;">View Profile</a></li>
+                            <li><a class="dropdown-item nav-dropdown" href="#" style="color: black;">Edit Profile</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
         </div>
-    </div>
-</nav>
+    </nav>   
 
     
     <!-- Body -->
     <div class="body page-left">
         <h1 class="display-3">Get Started</h1>
 
-        <div class="card ">
-            <div class="text-bg-warning card-body">
-                Interest inventories: These assess an individual's preferences, likes, and dislikes regarding various activities, careers, or subjects.
+        <div class="card">
+            <div class="card-body">
+                <p class="fact">
+                    Interest inventories: These assess an individual's preferences, likes, and dislikes regarding various activities, careers, or subjects.
+                </p>
             </div>
         </div>
 
-        <button type="button" class="btn btn-primary">Sign up</button>
-
-        
-
-        <button type="button" class="btn btn-primary">Login</button>
+        <a href="signup.html"><button type="button" class="btn btn-primary">Sign up</button></a>
+        <a href="login.html"><button type="button" class="btn btn-primary">Login</button></a>
 
 
     </div>
diff --git a/src/frontend/src/pages/signup.html b/src/frontend/src/pages/signup.html
index 87c3bd5..42e3d22 100644
--- a/src/frontend/src/pages/signup.html
+++ b/src/frontend/src/pages/signup.html
@@ -8,39 +8,58 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
 
     <style>
-        body {
-            background-color: #f2f2f2;
+       body {
+            background-color: #fbf6f0;
+            color: #000000;
             padding-top: 100px;
+            font-family: Arial, sans-serif;
+            min-height: 100vh;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
         }
 
-        /* Navbar styles */
-        .navbar-nav .nav-link:hover {
-            color: #01BF9B !important;
-        }
+    .navbar-nav .nav-link:hover {
+        color: #6895D2 !important;
+    }
 
-        .navbar-nav {
-            text-align: center;
-        }
+    .navbar-nav {
+        text-align: center;
+    }
 
-        .navbar-nav .nav-item {
-            padding: 0 10px;
-        }
+    .navbar-nav .nav-item {
+        padding: 0 10px;
+    }
 
-        .dropdown {
-            margin-left: auto;
-        }
+    .dropdown {
+        margin-left: auto;
+    }
 
-        .dropdown-menu .nav-dropdown {
-            left: 280px !important;
-        }
+    .dropdown-menu .nav-dropdown {
+        left: 100%;
+    }
+
+    .page-content {
+        padding: 0 20px;
+        max-width: 600px;
+        margin: auto;
+    }
+
+    .btn-submit {
+        margin-top: 20px;
+        background-color: #6895D2;
+        border-color: #6895D2;
+    }
+
+    .btn-submit:hover {
+        background-color: #FDE767;
+        border-color: #FDE767;
+        color: #2c2b29;
+    }
 
-        .page-left {
-            padding-left: 60px;
-        }
 
-        .btn {
-            margin-top: 20px;
-        }
     </style>
 </head>
 <body>
@@ -77,7 +96,7 @@
     </nav>    
 
     <!-- Body -->
-    <div class="body page-left">
+    <div class="page-content">
         <h1 class="display-3">Sign up</h1>
         <p>Please enter the following details</p>
 
@@ -92,15 +111,17 @@ <h1 class="display-3">Sign up</h1>
             <!-- Education Input -->
             <div class="mb-3 dropdown">
                 <label for="edu" class="form-label">Education</label>
-                <button class="eduDrop btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="educationBtn">
-                  Select
-                </button>
-                <ul class="dropdown-menu languageSelect">
-                  <li><a class="dropdown-item" href="#">High School</a></li>
-                  <li><a class="dropdown-item" href="#">Bachelor</a></li>
-                  <li><a class="dropdown-item" href="#">Masters</a></li>
-                  <li><a class="dropdown-item" href="#">PhD</a></li>
-                </ul>
+                <div class="input-group">
+                    <button class="eduDrop btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="educationBtn">
+                        Select
+                    </button>
+                    <ul class="dropdown-menu languageSelect">
+                        <li><a class="dropdown-item" href="#">High School</a></li>
+                        <li><a class="dropdown-item" href="#">Bachelor</a></li>
+                        <li><a class="dropdown-item" href="#">Masters</a></li>
+                        <li><a class="dropdown-item" href="#">PhD</a></li>
+                    </ul>
+                </div>
             </div>
 
             <!-- Age Input -->
@@ -120,13 +141,11 @@ <h1 class="display-3">Sign up</h1>
             <!-- Zipcode Input -->
             <div class="mb-3">
                 <label for="zipcode" class="form-label">Zipcode</label>
-                <input type="text" class="form-control" id="pincode" name="pincode" pattern="[0-9]{5}" maxlength="5" required>
+                <input type="text" class="form-control" id="zipcode" name="zipcode" pattern="[0-9]{5}" maxlength="5" required>
                 <div class="invalid-feedback">Please enter a valid 5-digit zipcode</div>
             </div>
 
-            <a href="login.html"><button type="submit" class="btn btn-primary">Submit</button></a>
-
-            
+            <button type="submit" class="btn btn-primary btn-submit">Submit</button>
         </form>
 
     </div>
diff --git a/src/frontend/src/pages/start.html b/src/frontend/src/pages/start.html
index 02d2c3c..c2776a3 100644
--- a/src/frontend/src/pages/start.html
+++ b/src/frontend/src/pages/start.html
@@ -12,13 +12,22 @@
 
     <style>
         body {
-            background-color: #f2f2f2;
+            background-color: #FBF6F0;
+            color: #000000;
             padding-top: 100px;
+            font-family: Arial, sans-serif;
+            min-height: 100vh;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
         }
-
+    
         /* Navbar styles */
+    
         .navbar-nav .nav-link:hover {
-            color: #01BF9B !important;
+            color: #6895D2!important;
         }
 
         .navbar-nav {
@@ -34,53 +43,74 @@
         }
 
         .dropdown-menu .nav-dropdown {
-            left: 280px !important;
+            left: 100%;
         }
-
-        .page-left {
-            padding-left: 60px;
+    
+        .btn-outline-success {
+            color: #D04848;
+            border-color: #D04848;
         }
-
-        .btn {
-            margin-top: 20px;
+    
+        .btn-outline-success:hover {
+            background-color: #FFFFFF; 
+            color: #3E0061;
+        }
+    
+        .btn-secondary {
+            background-color: #FFDA77;
+            border-color: #FFDA77;
+        }
+    
+        .btn-secondary:hover {
+            background-color: #D04848;
+            border-color: #D04848;
+        }
+    
+        .container {
+            text-align: center;
+        }
+    
+        .btn-container {
+            margin-top: 30px;
         }
+    
     </style>
+    
 </head>
 <body>
     <!-- Navigation Bar -->
-    <nav class="navbar fixed-top navbar-expand-lg" style="background-color: #f2f2f2;">
+    <nav class="navbar fixed-top navbar-expand-lg">
         <div class="container-fluid">
-            <a class="navbar-brand" href="#" style="color: #2c2b29;">PsyCred</a>
+            <a class="navbar-brand" href="#">PsyCred</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNavDropdown">
                 <ul class="navbar-nav mx-auto">
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="#" style="color: #2c2b29;">Home</a>
+                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="signup.html" style="color: #2c2b29;">Sign up</a>
-                    </li>
+                        <a class="nav-link" href="signup.html">Sign up</a></li>
                     <li class="nav-item">
-                        <a class="nav-link" href="login.html" style="color: #2c2b29;">Login</a>
-                    </li>
+                        <a class="nav-link" href="login.html">Login</a></li>
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="color: #2c2b29;">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                             Profile
                         </a>
                         <ul class="dropdown-menu">
-                            <li><a class="dropdown-item nav-dropdown" href="#" style="color: black;">View Profile</a></li>
-                            <li><a class="dropdown-item nav-dropdown" href="#" style="color: black;">Edit Profile</a></li>
+                            <li><a class="dropdown-item" href="#">View Profile</a></li>
+                            <li><a class="dropdown-item" href="#">Edit Profile</a></li>
                         </ul>
                     </li>
                 </ul>
             </div>
         </div>
-    </nav>    
+    </nav>
 
     <!-- Body -->
-    <div class="body page-left">
+    <div class="container">
+
         <h1 class="display-3">Hey there!</h1>
         <p>Please select your language to get started</p>
 
@@ -99,63 +129,49 @@ <h1 class="display-3">Hey there!</h1>
             </ul>
         </div>
 
-        <button type="button" class="btn btn-outline-success">Get Started</button>
+        <div class="btn-container">
+            <a href="onboarding.html"><button type="button" class="btn btn-outline-success">Get Started</button></a>
+        </div>
     </div>
 
     <!-- JavaScript -->
-<script>
-    // Language codes object
-    const languageCodes = {
-        "English": "en",
-        "Hindi": "hi",
-        "Marathi": "mr",
-        "Telugu": "te",
-        "Tamil": "ta",
-        "Kannada": "kn",
-        "Malayalam": "ml"
-    };
-
-    // Function to set a cookie
-    function setCookie(name, value, days) {
-        const date = new Date();
-        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-        const expires = "expires=" + date.toUTCString();
-        document.cookie = name + "=" + value + ";" + expires + ";path=/";
-    }
-
-    // Function to handle language selection
-    document.querySelectorAll('.languageSelect .dropdown-item').forEach(item => {
-        item.addEventListener('click', function() {
-            const selectedLanguage = this.getAttribute('data-lang');
-            const languageName = languageCodes[selectedLanguage];
-            
-            // Create lang object with selected language
-            const lang = {
-                language: selectedLanguage,
-                code: languageName
-            };
-
-            // Make a POST request to the API endpoint
-            fetch('http://10.50.48.177:5001/api/v1/setlanguage', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(lang)
-            })
-            .then(response => {
-                if (response.ok) {
-                    console.log('Language set successfully:', selectedLanguage);
-                } else {
-                    console.error('Failed to set language:', response.statusText);
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
+    <script>
+        // Function to handle language selection
+        document.querySelectorAll('.languageSelect .dropdown-item').forEach(item => {
+            item.addEventListener('click', function() {
+                const selectedLanguage = this.getAttribute('data-lang');
+                const languageName = this.textContent; // Get the selected language text
+
+                // Set the dropdown button text to the selected language
+                document.querySelector('.btn-secondary').textContent = languageName;
+
+                // Create lang object with selected language
+                const lang = {
+                    language: selectedLanguage,
+                    code: languageCodes[selectedLanguage]
+                };
+
+                // Make a POST request to the API endpoint
+                fetch('http://10.50.48.177:5001/api/v1/setlanguage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(lang)
+                })
+                .then(response => {
+                    if (response.ok) {
+                        console.log('Language set successfully:', selectedLanguage);
+                    } else {
+                        console.error('Failed to set language:', response.statusText);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
             });
         });
-    });
-</script>
+    </script>
 
 </body>
 </html>
