diff --git a/signup.html b/signup.html
index 94e7ee3..7c71d64 100644
--- a/signup.html
+++ b/signup.html
@@ -4,12 +4,96 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sign Up - Weather App</title>
+    <style>
+        /* General Styles */
+        body {
+            font-family: 'Poppins', sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #89f7fe, #66a6ff);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
 
-</style>
+        .container {
+            background: rgba(255, 255, 255, 0.9);
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+            text-align: center;
+            width: 350px;
+        }
+
+        h2 {
+            color: #333;
+            margin-bottom: 20px;
+            font-size: 28px;
+            font-weight: bold;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+            text-align: left;
+        }
+
+        .form-group label {
+            font-weight: bold;
+            color: #444;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 14px;
+            transition: 0.3s;
+        }
+
+        .form-group input:focus {
+            border-color: #66a6ff;
+            outline: none;
+            box-shadow: 0px 0px 5px rgba(102, 166, 255, 0.5);
+        }
+
+        button {
+            background: linear-gradient(135deg, #66a6ff, #89f7fe);
+            color: white;
+            padding: 12px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            width: 100%;
+            transition: 0.3s;
+        }
+
+        button:hover {
+            background: linear-gradient(135deg, #5a95f5, #77e0ff);
+        }
+
+        p {
+            margin-top: 15px;
+            font-size: 14px;
+            color: #555;
+        }
+
+        p a {
+            color: #66a6ff;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        p a:hover {
+            text-decoration: underline;
+        }
+    </style>
 </head>
 <body>
     <div class="container">
-        <h2>Sign Up </h2>
+        <h2>Sign Up</h2>
         <form id="signup-form" onsubmit="return validateForm()">
             <div class="form-group">
                 <label for="username">Username:</label>
@@ -34,37 +118,36 @@ <h2>Sign Up </h2>
 
     <script>
         // Function to validate the form
-function validateForm() {
-    // Get form values
-    var username = document.getElementById("username").value;
-    var email = document.getElementById("email").value;
-    var password = document.getElementById("password").value;
-    var confirmPassword = document.getElementById("confirm-password").value;
-
-    // Check if all fields are filled
-    if (username == "" || email == "" || password == "" || confirmPassword == "") {
-        alert("All fields must be filled!");
-        return false;
-    }
-
-    // Check if password and confirm password match
-    if (password !== confirmPassword) {
-        alert("Passwords do not match!");
-        return false;
-    }
-
-    // Check if the email format is correct
-    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
-    if (!emailPattern.test(email)) {
-        alert("Please enter a valid email address!");
-        return false;
-    }
-
-    // Form is valid
-    alert("Sign up successful!");
-    return true;
-}
+        function validateForm() {
+            // Get form values
+            var username = document.getElementById("username").value;
+            var email = document.getElementById("email").value;
+            var password = document.getElementById("password").value;
+            var confirmPassword = document.getElementById("confirm-password").value;
+
+            // Check if all fields are filled
+            if (username == "" || email == "" || password == "" || confirmPassword == "") {
+                alert("All fields must be filled!");
+                return false;
+            }
+
+            // Check if password and confirm password match
+            if (password !== confirmPassword) {
+                alert("Passwords do not match!");
+                return false;
+            }
+
+            // Check if the email format is correct
+            var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+            if (!emailPattern.test(email)) {
+                alert("Please enter a valid email address!");
+                return false;
+            }
 
+            // Form is valid
+            alert("Sign up successful!");
+            return true;
+        }
     </script>
 </body>
 </html>
