diff --git a/backend/validators/authValidator.js b/backend/validators/authValidator.js
index ab4dac07..4fd9fac6 100644
--- a/backend/validators/authValidator.js
+++ b/backend/validators/authValidator.js
@@ -6,8 +6,8 @@ const signupSchema = z.object({
         .min(3, "Username must be at least 3 characters long")
         .max(30, "Username must be at most 30 characters long")
         .regex(/^[a-zA-Z0-9_]+$/, "Username can only contain letters, numbers, and underscores")
-        ,
-    
+    ,
+
     email: z.string()
         .trim()
         .toLowerCase()
@@ -18,7 +18,7 @@ const signupSchema = z.object({
         .min(8, "Password must be at least 8 characters long")
         .max(100, "Password must be at most 100 characters long")
         .regex(
-            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/,
+            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}+$/,
             'Password must contain uppercase, lowercase, number, and special character'
         ),
 });
diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index 9bf90fb4..98877e10 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -39,8 +39,8 @@ const SignUp: React.FC = () => {
     if (name === "username") {
       if (!value.trim()) {
         errorMessage = "Username is required";
-      } else if (!/^[A-Za-z\s]+$/.test(value)) {
-        errorMessage = "Only letters are allowed";
+      } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
+        errorMessage = "Username can contain only letters, numbers, and underscores";
       }
     }
     if (name === "email") {
@@ -77,9 +77,7 @@ const SignUp: React.FC = () => {
         : "";
     const passwordError = !formData.password.trim()
       ? "Password is required"
-      : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(
-            formData.password,
-          )
+      : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(formData.password)
         ? "Password must be 8+ characters with letters and numbers"
         : "";
     if (usernameError || emailError || passwordError) {
@@ -118,32 +116,27 @@ const SignUp: React.FC = () => {
 
   return (
     <div
-      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${
-        mode === "dark"
-          ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
-          : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
-      }`}
+      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${mode === "dark"
+        ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
+        : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
+        }`}
     >
       <div className="absolute inset-0">
         <div
-          className={`absolute -top-40 -right-40 w-96 h-96 ${
-            mode === "dark" ? "bg-purple-500" : "bg-purple-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
+          className={`absolute -top-40 -right-40 w-96 h-96 ${mode === "dark" ? "bg-purple-500" : "bg-purple-300"
+            } rounded-full blur-3xl opacity-30 animate-pulse`}
         />
         <div
-          className={`absolute -bottom-40 -left-40 w-96 h-96 ${
-            mode === "dark" ? "bg-blue-500" : "bg-blue-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
+          className={`absolute -bottom-40 -left-40 w-96 h-96 ${mode === "dark" ? "bg-blue-500" : "bg-blue-300"
+            } rounded-full blur-3xl opacity-30 animate-pulse`}
         />
         <div
-          className={`absolute top-40 left-40 w-96 h-96 ${
-            mode === "dark" ? "bg-pink-500" : "bg-pink-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
+          className={`absolute top-40 left-40 w-96 h-96 ${mode === "dark" ? "bg-pink-500" : "bg-pink-300"
+            } rounded-full blur-3xl opacity-30 animate-pulse`}
         />
         <div
-          className={`absolute top-1/2 right-1/4 w-64 h-64 ${
-            mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"
-          } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`}
+          className={`absolute top-1/2 right-1/4 w-64 h-64 ${mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"
+            } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`}
         />
       </div>
 
@@ -177,16 +170,15 @@ const SignUp: React.FC = () => {
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.2 }}
-          className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${
-            mode === "dark"
-              ? "bg-white/10 backdrop-blur-xl border-white/20 text-white"
-              : "bg-white border-gray-200 text-black"
-          }`}
+          className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${mode === "dark"
+            ? "bg-white/10 backdrop-blur-xl border-white/20 text-white"
+            : "bg-white border-gray-200 text-black"
+            }`}
         >
+
           <h2
-            className={`text-2xl font-bold text-center mb-8 ${
-              mode === "dark" ? "text-white" : "text-gray-800"
-            }`}
+            className={`text-2xl font-bold text-center mb-8 ${mode === "dark" ? "text-white" : "text-gray-800"
+              }`}
           >
             Create Account
           </h2>
@@ -300,9 +292,8 @@ const SignUp: React.FC = () => {
       </div>
 
       <div
-        className={`${
-          mode === "dark" ? "from-slate-900" : "from-slate-100"
-        } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent pointer-events-none`}
+        className={`${mode === "dark" ? "from-slate-900" : "from-slate-100"
+          } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`}
       />
     </div>
   );