diff --git a/index.html b/index.html
index 94360ca7..a4c136d7 100644
--- a/index.html
+++ b/index.html
@@ -296,7 +296,7 @@
             Gupta</p>
         <br>
         <p style="color:rgb(177, 177, 177);">&copy; <span id="copyright">32949832</span> Tejas Gupta</p>
-    </div>
+    </div> 
     <div class="end_line"></div>
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
     <script src="website/script.js"></script>
diff --git a/website/afterloginpage.html b/website/afterloginpage.html
new file mode 100644
index 00000000..0b6ba298
--- /dev/null
+++ b/website/afterloginpage.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dataverse</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+    <link rel="shortcut icon" href="web_images/3dlogo.svg" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body id="body">
+    <!-- preloader -->
+    <div id="video-loader">
+        <video src="web_images/loader.mp4" alt="Dataverse" autoplay muted>Your browser does not support the
+            video tag.</video>
+    </div>
+    <div class="buttons" id="buttons">
+        <div id="indicator"></div>
+        <div class="group">
+            <button id="darkButton" onclick="dark(false)">
+                <img src="https://static.thenounproject.com/png/4066359-200.png" class="copy" id="moon">
+            </button>
+            <button id="lightButton" onclick="light(false)">
+                <!-- <div id="theme2"> -->
+                <img src="https://cdn-icons-png.freepik.com/256/467/467619.png?semt=ais_hybrid" alt="" class="copy"
+                    id="sun">
+                <!-- </div> -->
+            </button>
+        </div>
+        <button id="defaultButton" onclick="systemDefault()">
+            <img src="web_images/settings.webp" class="copy" id="default">
+        </button>
+    </div>
+    <button class="top" id="top" onclick="topFunction()"><img src="web_images/top.webp" alt=""></button>
+    <nav id="navbar">
+        <img src="web_images/3dlogo.svg" alt="Dataverse Logo" class="logo" id="normal">
+        <img src="web_images/3d_glow.webp" alt="Dataverse Logo" class="logo" id="glow">
+        <div class="scrollBar" id="progress_bar"></div> <!--PROGRESS BAR-->
+        <a href="profile.html">
+            <button class="loginSignupbtn">
+              <span class="button-text">profile</span>
+              <img src="web_images/user.png" alt="User Icon" class="user-icon">
+            </button>
+          </a>
+    </nav>
+
+    <button class="burger" id="burger" onclick="show()"></button>
+    <button id="cross" class="burger" onclick="hide()"></button>
+    <div class="burger" id="lines">
+        <div class="line" id="l1"></div>
+        <div class="line" id="l2"></div>
+        <div class="line" id="l3"></div>
+    </div>
+    <div class="plane" id="plane">
+        <table>
+            <tr>
+                <td><a href="index.html" class="table_link">Home</a></td>
+            </tr>
+            <tr>
+                <td><a href="https://github.com/multiverseweb/Dataverse" class="table_link">Github Repository</a></td>
+            </tr>
+            <tr>
+                <td><a href="https://github.com/multiverseweb/Dataverse/blob/main/README.md"
+                        class="table_link">Documentation</a></td>
+            </tr>
+            <tr>
+                <td><a href="website/contributor.html" class="table_link">Contributors</a></td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://www.figma.com/proto/BBbXARgpxercxacjm0qpgX/Dataverse?type=design&node-id=45-25&t=zMFBUgENaIeqhRYZ-1&scaling=scale-down-width&page-id=0%3A1&starting-point-node-id=22%3A310&show-proto-sidebar=1&mode=design"
+                        class="table_link">Figma Design</a>
+                </td>
+            </tr>
+            <tr>
+                <td><a href="codeOfconduct.html" class="table_link" target="_blank">Code of Conduct</a></td>
+            </tr>
+            <tr>
+                <td><a href="license.html" class="table_link">License</a></td>
+            </tr>
+        </table>
+    </div>
+    <div class="scroll_icon" id="scroll_icon">SCROLL TO KNOW MORE
+        <div class="shadow" id="shadow"></div>
+    </div>
+    <div class="download" id="download">
+        <div class="left">
+            <div id="map">
+                <div class="direction"><img src="https://cdn-icons-png.flaticon.com/512/0/614.png" id="aeroplane"></div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="top_dataverse">
+                <p id="data">Data</p>
+                <p>verse</p>
+            </div>
+            <p id="intro_text">An Open-Source Software (OSS) that allows organizing, analyzing and visualizing data,
+                providing flexible tools for financial tracking and customized chart creation.
+            </p>
+            <p id="intro_text">The adjoining map shows people who are using or contributing to Dataverse.</p>
+            <button id="download_btn"
+                onclick="showCustomAlert('Dataverse is currently under development. It will be available for installastion soon.\n\nHowever, you can visit the following link to run the project locally on your computer:')">Get
+                Dataverse</button>
+
+            <div id="custom-alert" class="custom-alert">
+                <div class="custom-alert-content">
+                    <span id="alert-message"></span>
+                    <div class="row_buttons">
+                        <a
+                            href="https://github.com/multiverseweb/Dataverse?tab=readme-ov-file#deployment-specifications"><button>Try
+                                Dataverse</button></a>
+                        <button onclick="closeCustomAlert()" id="later">Later</button>
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+        <div class="scroll_animation"></div>
+    </div>
+    </div>
+    <div class="section big_container" style=" margin-top: 100px;"></div>
+    <div class="section" id="about">
+        <div class="about_left">
+            <p class="heading">So, What does this Software do?</p>
+            <p class="subheading">Visualise Data!</p>
+            <p class="text">Easily transform raw data into visually appealing charts such as bar graphs, pie charts,
+                and
+                line graphs. It also supports advanced data visualisation techniques like heatmaps, Radar charts, 3D
+                Surface Plots, etc.
+                <br><br>
+                You can also download the generated plots or save the data for later use.
+            </p>
+        </div>
+        <div class="about_right">
+            <img src="web_images/about_up.webp" class="preview up">
+            <img src="web_images/about_down.webp" class="preview down">
+        </div>
+    </div>
+    <div class="section" id="finance">
+        <div class="finance_left">
+            <img src="web_images/finance_up.webp" class="preview up">
+            <img src="web_images/finance_down.webp" class="preview down">
+        </div>
+        <div class="finance_right">
+            <p class="subheading">Track Finances!</p>
+            <p class="text">Manage your finances by providing data such as income, expense, investment, etc. and get
+                useful results such as visualization of data, extrapolated data, max expenditure, etc. Also, the
+                software automatically stores data with a timestamp.</p>
+        </div>
+    </div>
+
+    <div class="section" id="charts">
+        <p class="heading">Here are some examples of what you can do with Dataverse</p>
+        <div class="examples" id="examples">
+
+            <img src="web_images/volcano.gif" alt="">
+            <img src="web_images/live.gif" alt="">
+            <img src="https://i0.wp.com/learnbyinsight.com/wp-content/uploads/2020/09/sub-plot.png?resize=600%2C398&ssl=1"
+                alt="">
+            <img src="https://docs.sympy.org/latest/_images/plotting-16.png" alt="">
+            <img src="web_images/galaxy.webp" alt="">
+            <img src="web_images/3d.gif" alt="">
+            <img src="web_images/volcano.gif" alt="">
+            <img src="web_images/live.gif" alt="">
+            <img src="https://i0.wp.com/learnbyinsight.com/wp-content/uploads/2020/09/sub-plot.png?resize=600%2C398&ssl=1"
+                alt="">
+            <img src="https://docs.sympy.org/latest/_images/plotting-16.png" alt="">
+            <img src="website/web_images/galaxy.webp" alt="">
+            <img src="website/web_images/3d.gif" alt="">
+
+
+        </div>
+        <div class="examples" id="examples2">
+
+            <img src="https://matplotlib.org/stable/_images/sphx_glr_polar_scatter_001.png" alt="">
+            <img src="website/web_images/wordcloud.png" alt="">
+            <img src="https://www.pythoncharts.com/matplotlib/radar-charts/images/radar-chart-step1.png" alt="">
+            <img src="https://discourse.matplotlib.org/uploads/default/original/2X/4/4a1f2f7f8f90b98517aa85b8b984d4c9a3a94c72.jpeg"
+                alt="">
+            <img src="https://miro.medium.com/v2/resize:fit:1188/1*kpksgzDd6qKP2h6GM7OVCA.png" alt="">
+            <img src="https://miro.medium.com/v2/resize:fit:1140/1*Lc5VzM9Yo4775Omc-vqddQ.png" alt="">
+            <img src="web_images/portal.webp" alt="">
+            <img src="web_images/stars.webp" alt="">
+            <img src="https://matplotlib.org/stable/_images/sphx_glr_polar_scatter_001.png" alt="">
+            <img src="web_images/wordcloud.png" alt="">
+            <img src="https://www.pythoncharts.com/matplotlib/radar-charts/images/radar-chart-step1.png" alt="">
+            <img src="https://discourse.matplotlib.org/uploads/default/original/2X/4/4a1f2f7f8f90b98517aa85b8b984d4c9a3a94c72.jpeg"
+                alt="">
+            <img src="https://miro.medium.com/v2/resize:fit:1188/1*kpksgzDd6qKP2h6GM7OVCA.png" alt="">
+            <img src="https://miro.medium.com/v2/resize:fit:1140/1*Lc5VzM9Yo4775Omc-vqddQ.png" alt="">
+            <img src="web_images/portal.webp" alt="">
+            <img src="web_images/stars.webp" alt="">
+        </div>
+    </div>
+
+
+    <div class="section" id="develop">
+        <div class="develop_left">
+            <p class="heading">Want to contribute to this Project?</p>
+            <div class="subheading" id="technologies">
+                <div class="circle" id="red"></div>
+                <div class="circle" id="yellow"></div>
+                <div class="circle" id="green"></div>
+                <p>Technologies Used</p>
+            </div>
+            <div class="tags" id="tags">
+                <p id="pythontag">Python</p>
+                <p id="numpytag">Numpy</p>
+                <p id="pandastag">Pandas</p>
+                <p id="matplotlibtag">Matplotlib</p>
+                <p id="pythontag">Tkinter</p>
+                <p id="mysqltag">MySQL</p>
+                <p id="htmltag">HTML</p>
+                <p id="csstag">CSS</p>
+                <p id="jstag">JavaScript</p>
+                <p id="exceltag">MS Excel</p>
+            </div>
+            <p class="text">As this is an open-source project, contributions are always welcome. Whether you're
+                interested in adding new features, fixing bugs, or improving documentation, your contributions are
+                valuable. You can contribute to the project by visiting the link to the GitHub repository provided
+                below. Join me in making Dataverse even better for everyone!</p>
+            <a href="https://github.com/multiverseweb/Dataverse?tab=readme-ov-file#contributions"
+                target="_blank"><button id="contribute">
+                    <p>Contribute</p><img
+                        src="https://static-00.iconduck.com/assets.00/github-icon-2048x1999-d37ckpm6.png" id="github">
+                </button></a>
+        </div>
+        <div class="develop_right">
+            <img src="web_images/develop_up.webp" class="preview up">
+            <img src="web_images/develop_down.webp" class="preview down">
+        </div>
+    </div>
+    <div class="design_line"></div>
+    <footer>
+        <img src="web_images/cubes.webp" class="cubes">
+        <div class="contact">
+            <div class="name">
+                <img src="web_images/2dlogo.svg" alt="" class="end-logo">
+                <a class="subheading" href="index.html" id="last_link">Dataverse</a>
+            </div>
+        </div>
+        <form name="Dataverse Reviews" method="POST" data-netlify="true" onsubmit="return validateForm()">
+            <p style="color:white">Let Me Know Your Thoughts!</p>
+            <input type="text" name="Name" placeholder="Your Name" required>
+            <input type="email" name="Email" placeholder="Your Email ID" required>
+            <input name="Message" placeholder="Your Message" required>
+            <input type="submit" value="Send" id="send">
+        </form>
+    </footer>
+    <div class="links">
+        <div class="small">
+            <div class="link_class">
+                <a href="https://github.com/multiverseweb/Dataverse/blob/main/README.md"
+                    class="table_link">Documentation</a>
+                <a href="./contributor.html" class="table_link">Contributors</a>
+                <a href="codeOfconduct.html" class="table_link" target="_blank">Code of Conduct</a>
+                <a href="license.html" class="table_link">License</a>
+            </div>
+            <div class="link_class">
+                <a href="https://www.figma.com/proto/BBbXARgpxercxacjm0qpgX/Dataverse?type=design&node-id=45-25&t=zMFBUgENaIeqhRYZ-1&scaling=scale-down-width&page-id=0%3A1&starting-point-node-id=22%3A310&show-proto-sidebar=1&mode=design"
+                    class="table_link">Figma Design</a>
+                <a href="https://tejasgupta.netlify.app">Portfolio</a>
+                <a href="https://github.com/multiverseweb">Github Profile</a>
+                <a href="https://www.linkedin.com/in/tejascodes/"> LinkedIn</a>
+            </div>
+            <script>
+                // Delay the execution by 3 seconds
+                setTimeout(function () {
+                    window.embeddedChatbotConfig = {
+                        chatbotId: "oKgfHa3hvh7Ic0ypSqDbv",
+                        domain: "www.chatbase.co"
+                    };
+
+                    var script = document.createElement("script");
+                    script.src = "https://www.chatbase.co/embed.min.js";
+                    script.setAttribute("chatbotId", "oKgfHa3hvh7Ic0ypSqDbv");
+                    script.setAttribute("domain", "www.chatbase.co");
+                    script.defer = true;
+                    document.body.appendChild(script);
+                }, 3000);
+            </script>
+
+        </div>
+        <div class="end_line"></div>
+        <p class="tejas_credits" style="color:rgb(187, 187, 187); margin-top: 20px;"> Designed & Developed by Tejas
+            Gupta</p>
+        <br>
+        <p style="color:rgb(177, 177, 177);">&copy; <span id="copyright">32949832</span> Tejas Gupta</p>
+    </div> 
+    <div class="end_line"></div>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <script src="script.js"></script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/website/login.html b/website/login.html
index 97a6f235..4424e639 100644
--- a/website/login.html
+++ b/website/login.html
@@ -2,17 +2,17 @@
 <html lang="en">
 <head>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <link rel="stylesheet" href="./style.css">
-    <link rel="shortcut icon" href="website/web_images/3dlogo.svg" type="image/x-icon">
+    <link rel="stylesheet" href="../styles/style.css">
+    <link rel="shortcut icon" href="../web_images/3dlogo.svg" type="image/x-icon">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login</title>
+    <title>Login to Dataverse</title>
     <style>
-        body{
+        body {
             background-color: black;
             overflow-x: hidden;
         }
-        .image1{
+        .image1 {
             width: 43%;
             height: 90.9%;
             object-fit: cover;
@@ -22,7 +22,7 @@
             top: -10%;
             rotate: 36deg;
         }
-        .image2{
+        .image2 {
             width: 37%;
             height: 47%;
             position: absolute;
@@ -32,48 +32,46 @@
             right: 84%;
             rotate: -46deg;
         }
-        .login-container{
+        .login-container {
             width: 40vw;
             padding-bottom: 10px;
             height: min-content;
             position: relative;
             background-color: rgba(58, 58, 58, 0.288);
             box-shadow: 0 0 5px black;
-            top:20px;
-            backdrop-filter: blur(10px);
+            top: 20px;
+            
             border-radius: 10px;
         }
+        .form-check-input:checked {
+    background-color: #004ab7; /* Change to your desired color */
+    border-color: #004ab7; /* Change to your desired color */
+}
 
         @media screen and (max-width: 660px) {
-            .login-container{
+            .login-container {
                 width: 90vw;
                 margin-bottom: 100px;
             }
-            .image1{
-                height:100px;
+            .image1 {
+                height: 100px;
                 display: none;
             }
-            .image2{
+            .image2 {
                 height: 100px;
                 overflow-x: hidden;
             }
-            #forget{
+            #forget {
                 width: 90%;
             }
         }
-        
     </style>
 </head>
 
-<body >
-    <img class="image1"  src="./web_images/2dglow.png" alt="login_bg">
-    <img class="image2"  src="./web_images/2dglowhalfbg-removebg-preview.png" alt="login_bg">
-    <img style="
-    top:10px;
-    margin-left: 10px;
-    position: relative;
-    width: 80px;
-    height: 80px;" src="./web_images/3d_glow.webp" alt="Dataverse Logo">
+<body>
+    <img class="image1" src="../web_images/2dglow.png" alt="login_bg">
+    <img class="image2" src="../web_images/2dglowhalfbg-removebg-preview.png" alt="login_bg">
+    <img style="top:10px; margin-left: 10px; position: relative; width: 80px; height: 80px;" src="../web_images/3d_glow.webp" alt="Dataverse Logo">
     <center>
         <div class="login-container" style="padding-top: 20px; margin-top: 0px;">
             <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font-size: 35px">HEY! WELCOME BACK</h1>
@@ -93,32 +91,57 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
                     • Must not contain spaces, special characters, or emojis.
                 </div>
             </div>
+            <!-- Remember Me Checkbox -->
+            <div style="text-align: left; margin-left: 35%;">
+                <input type="checkbox" id="rememberMe" style="margin-top: -5px; width: 15px; height: 15px;">
+                <label for="rememberMe" style="color: white;">Remember Me</label>
+            </div>
             <button type="button" class="btn btn-primary" id="loginButton" style="width: 50%; font-weight: 400;">LOGIN</button>
             <div style="text-align: center; margin-top: 10px;">
-                <p>Don't have an account ?  <a href="signup.html" style="text-decoration: underline; color: #004ab7;"> Sign Up</a></p>
+                <p style="color: white;">Don't have an account? <a href="signup.html" style="text-decoration: underline; color: #004ab7;"> Sign Up</a></p>
             </div>
         </div>
         <!--login form end-->
     </center>
-    <a href="../index.html"><button class="goBack">Go To Home</button></a>
+    <a href="../../index.html"><button class="goBack">Go To Home</button></a>
     <script>
+        // On page load, check local storage for email
+        window.onload = function() {
+            const savedEmail = localStorage.getItem('email');
+            if (savedEmail) {
+                document.getElementById('emailInput').value = savedEmail;
+                document.getElementById('rememberMe').checked = true;
+            }
+        };
+
         document.getElementById('loginButton').addEventListener('click', function() {
             const emailInput = document.getElementById('emailInput');
             const passwordInput = document.getElementById('passwordInput');
             const emailValue = emailInput.value.trim();
-    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-    if (!emailRegex.test(emailValue)) {
-        alert('Invalid email address');
-        return;
-    }
+            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            if (!emailRegex.test(emailValue)) {
+                alert('Invalid email address');
+                return;
+            }
+
+            // Check if "Remember Me" is checked
+            const rememberMe = document.getElementById('rememberMe').checked;
+            if (rememberMe) {
+                localStorage.setItem('email', emailValue);
+            } else {
+                localStorage.removeItem('email');
+            }
+
+            // Clear the input fields
             emailInput.value = '';
             passwordInput.value = '';
             // Redirect to index.html
-            window.location.href = '/index.html';
             alert('Login successful!');
+            localStorage.setItem('loggedInEmail',emailInput.value);
+            window.location.href = 'afterloginpage.html';
         });
     </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-    <script src="website/script.js"></script>
+    <script src="../scripts/script.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/website/profile.html b/website/profile.html
new file mode 100644
index 00000000..0012f544
--- /dev/null
+++ b/website/profile.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="./style.css">
+    <link rel="shortcut icon" href="website/web_images/3dlogo.svg" type="image/x-icon">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>profile</title>
+    <style>
+        #body{
+        background-color: black; 
+    
+        }
+        .con{
+            color: white;
+            padding-left: 100px;
+        }
+    </style>
+    </head>
+    <body id="body">
+    <div class="con">
+
+    
+            <h1>Your Profile</h1>
+            <p id="emailDisplay"></p>
+        
+        </div>
+   
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const emailDisplay = document.getElementById('emailDisplay');
+            const loggedInEmail = localStorage.getItem('loggedInEmail');
+           
+                emailDisplay.textContent = `hello! ${loggedInEmail}`;
+          
+        });
+    </script>
+</body>
+    </html
\ No newline at end of file
diff --git a/website/signup.html b/website/signup.html
index a9233f48..c4d805bd 100644
--- a/website/signup.html
+++ b/website/signup.html
@@ -41,8 +41,32 @@
             top: 20px;
             border-radius: 10px;
         }
-        
-
+        #errorContainer{
+            position: absolute;
+            top: 40%;
+            left: 50%;
+            width: 90vw;
+            
+            max-width: 650px;
+            transform: translate(-50%, -50%);
+            background-color: rgb(51, 51, 51);
+            backdrop-filter: blur(4px);
+            padding: 0px;
+            border-radius: 4px;
+            text-align: center;
+            color: white;
+        }
+    #closeButton {
+            position: absolute;
+            top: 1px;
+            right: 10px;
+            padding-bottom: 100px;
+            background: none;
+            border: none;
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+        }
         @media screen and (max-width: 660px) {
             .login-container{
                 width: 90vw;
@@ -99,10 +123,17 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
         </div>
         <a href="../index.html"><button class="goBack">Go To Home</button></a>
         <script>
+            function closeError() {
+                document.getElementById('errorContainer').style.display = 'none';
+            }
             document.getElementById('signupButton').addEventListener('click', function() {
                 const emailInput = document.getElementById('emailInput');
                 const passwordInput = document.getElementById('passwordInput');
                 const confirmPasswordInput = document.getElementById('confirmPasswordInput');
+                const password = passwordInput.value;
+                const hasLetter = /[a-zA-Z]/;
+                const hasNumber = /\d/;
+                const hasInvalidChars = /[^a-zA-Z0-9]/;
                 const errorContainer = document.getElementById('errorContainer');
                 const emailValue = emailInput.value.trim();
                 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
@@ -112,17 +143,49 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
                 // Clear previous error messages
                 errorContainer.style.display = 'none';
                 errorContainer.innerHTML = '';
+                
                 // Validate email format and trusted domain
                 if (!emailRegex.test(emailValue) || !trustedDomains.includes(emailDomain)) {
-                    errorContainer.innerHTML = 'Please use a valid email address from trusted providers (e.g., Gmail, Outlook, Yahoo) etc.';
+                    
+                    errorContainer.innerHTML = '<div id="errorContainer"><button id="closeButton" onclick="closeError()">×</button><p>Please use a valid email address from trusted providers (e.g., Gmail, Outlook, Yahoo) etc.</p></div>';
+                   
                     errorContainer.style.display = 'block'; // Show error message
+                    
                     return;
                 }
                 // Check if passwords match
                 if (passwordInput.value !== confirmPasswordInput.value) {
-                    errorContainer.innerHTML = 'Both passwords do not match.';
+                    errorContainer.innerHTML = '<div id="errorContainer"><button id="closeButton" onclick="closeError()">×</button><p>Both passwords do not match.</p></div>';
+                   
+                    errorContainer.style.display = 'block'; // Show error message
+                    
+                    return;
+                  
+                }
+                if (password.length < 8 || password.length > 20) {
+                    errorContainer.innerHTML = '<div id="errorContainer"><button id="closeButton" onclick="closeError()">×</button><p>Password must be between 8 and 20 characters long.</p></div>';
+                   
+                    errorContainer.style.display = 'block'; // Show error message
+                    
+                    return;
+                    
+                }
+                if (!hasLetter.test(password) || !hasNumber.test(password)) {
+                    errorContainer.innerHTML = '<div id="errorContainer"><button id="closeButton" onclick="closeError()">×</button><p>Password must contain both letters and numbers.</p></div>';
+                   
+                    errorContainer.style.display = 'block'; // Show error message
+                    
+                    return;
+                    
+                }
+                if (hasInvalidChars.test(password)) {
+                    errorContainer.innerHTML = '<div id="errorContainer"><button id="closeButton" onclick="closeError()">×</button><p>Password must not contain spaces, special characters, or emojis.</p></div>';
+                   
                     errorContainer.style.display = 'block'; // Show error message
+                    
                     return;
+                    
+                    
                 }
                 // Clear input fields
                 emailInput.value = '';
