Index: imaps-frontend/src/pages/Signup/Signup.jsx
===================================================================
--- imaps-frontend/src/pages/Signup/Signup.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Signup/Signup.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -3,6 +3,4 @@
 import illustration from "../../assets/illustration_img.png";
 import styles from "./Signup.module.css";
-import Logo from "../../components/Logo/Logo";
-import netconfig from "../../scripts/net/netconfig.js";
 
 export default function Signup() {
@@ -10,17 +8,10 @@
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
   const [message, setMessage] = useState("");
-  const [messageType, setMessageType] = useState("");
+  const [messageType, setMessageType] = useState(""); // New state to manage message type
   const navigate = useNavigate();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
-    if (password !== confirmPassword) {
-      setMessageType("error");
-      setMessage("Passwords do not match.");
-      return;
-    }
 
     const payload = {
@@ -31,5 +22,5 @@
 
     try {
-      const response = await fetch(netconfig.auth.register, {
+      const response = await fetch("http://localhost:8080/api/auth/register", {
         method: "POST",
         headers: {
@@ -43,7 +34,8 @@
         setMessage("User registered successfully!");
 
+        // Wait 3 seconds and then redirect to login page
         setTimeout(() => {
           navigate("/login");
-        }, 1000);
+        }, 3000);
       } else if (response.status === 409) {
         setMessageType("error");
@@ -61,68 +53,61 @@
 
   return (
-      <div className={styles.wrapper}>
-        <Logo></Logo>
-        <div className={styles.illustration}>
-          <img src={illustration} alt="illustration" />
-        </div>
-        <div className={styles.form}>
-          <div className={styles.heading}>CREATE AN ACCOUNT</div>
-          <form onSubmit={handleSubmit}>
-            <div>
-              <label htmlFor="name">Username</label>
-              <input
-                  type="text"
-                  id="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Enter your username"
-                  required
-              />
-            </div>
-            <div>
-              <label htmlFor="email">E-Mail</label>
-              <input
-                  type="email"
-                  id="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="Enter your email"
-                  required
-              />
-            </div>
-            <div>
-              <label htmlFor="password">Password</label>
-              <input
-                  type="password"
-                  id="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Enter your password"
-                  required
-              />
-            </div>
-            <div>
-              <label htmlFor="confirmPassword">Confirm Password</label>
-              <input
-                  type="password"
-                  id="confirmPassword"
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  placeholder="Confirm your password"
-                  required
-              />
-            </div>
-            <button type="submit">Submit</button>
-            {message && (
-                <p className={messageType === "success" ? styles.successMessage : styles.errorMessage}>
-                  {message}
-                </p>
-            )}
-          </form>
-          <p>
-            Have an account? <Link to="/Login"> Login </Link>
-          </p>
-        </div>
+    <div className={styles.wrapper}>
+      <div className={styles.illustration}>
+        <img src={illustration} alt="illustration" />
       </div>
+      <div className={styles.form}>
+        <div className={styles.heading}>CREATE AN ACCOUNT</div>
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="name">Username</label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter your username"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="email">E-Mail</label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="password">Password</label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+          <button type="submit">Submit</button>
+
+          {/* Display message with appropriate styling */}
+          {message && (
+            <p className={messageType === "success" ? styles.successMessage : styles.errorMessage}>
+              {message}
+            </p>
+          )}
+          <h2 align="center" className={styles.or}>
+            OR
+          </h2>
+        </form>
+        <p>
+          Have an account? <Link to="/Login"> Login </Link>
+        </p>
+      </div>
+    </div>
   );
 }
Index: imaps-frontend/src/pages/Signup/Signup.module.css
===================================================================
--- imaps-frontend/src/pages/Signup/Signup.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Signup/Signup.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,35 +1,49 @@
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+.illustration img {
+  max-height: 500px;
+  width: auto;
+}
+
 .wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: center; /* Vertically center content */
-  justify-content: center; /* Horizontally center content */
-  height: 100vh; /* Full viewport height */
-  background-color: #ffffff; /* Light background */
-  padding: 1rem;
-  gap: 2rem; /* Space between form and image */
+  height: 100vh;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.wrapper p {
+  font-size: 0.85rem;
+  margin-top: 1rem;
 }
 
 .form {
-  padding: 2rem;
-  background-color: white;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-  flex-basis: 100%;
-  max-width: 400px; /* Restrict form width */
-  text-align: center; /* Center text inside the form */
+  padding: 1.5rem;
+  -ms-flex-preferred-size: 100vw;
+  flex-basis: 100vw;
 }
 
 .form .heading {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: bold;
-  color: #258de6;
-  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.or {
+  margin: 1rem 0;
 }
 
 .form label {
   display: block;
-  margin: 1.25rem 0 0.5rem 0;
-  font-size: 0.9rem;
-  font-weight: bold;
-  color: #555;
+  margin: 1.25rem 0 1rem 0;
 }
 
@@ -37,19 +51,12 @@
   height: 40px;
   width: 100%;
-  padding: 10px 15px;
+  padding: 15px;
   background-color: #f1f9ff;
   border: 2px solid #bce0fd;
   border-radius: 8px;
-  font-size: 1rem;
-}
-
-.form input:focus {
-  outline: none;
-  border-color: #258de6;
-  background-color: #e6f4ff;
 }
 
 .form button {
-  height: 45px;
+  height: 40px;
   width: 100%;
   background-color: #258de6;
@@ -58,97 +65,89 @@
   letter-spacing: 1px;
   border: none;
+  display: block;
+  margin: 0 auto;
+  font-weight: bold;
   margin-top: 1.5rem;
-  font-weight: bold;
   border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
 }
 
-.form button:hover {
-  filter: brightness(90%);
+@media (min-width: 542px) {
+  body {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+  .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 100vh;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+    padding: 1.5rem;
+    max-width: 1100px;
+  }
+  .form {
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+  }
+  .form input {
+    width: 250px;
+  }
+  .illustration img {
+    max-width: 80%;
+    height: auto;
+  }
 }
 
-.form button:active {
-  transform: scale(0.96);
+@media (max-width: 680px) {
+  .illustration {
+    display: none;
+  }
 }
 
-.form p {
-  text-align: center;
-  margin-top: 1rem;
-  font-size: 0.9rem;
+.signUp .illustration {
+  order: 2;
+  justify-self: flex-end;
+  margin-left: 2rem;
 }
 
-.form p a {
-  color: #258de6;
-  text-decoration: none;
+button:hover {
+  filter: brightness(95%);
+}
+
+button:active {
+  transform: scale(0.98);
+}
+
+/* Error message style */
+.errorMessage {
+  color: #e74c3c; /* Red color for error */
+  background-color: #fbeaea;
+  padding: 10px;
+  border: 1px solid #e74c3c;
+  border-radius: 5px;
+  margin-top: 1rem;
+  text-align: center;
+  font-size: 0.9rem;
   font-weight: bold;
 }
 
-.form p a:hover {
-  text-decoration: underline;
-}
-
-.illustration {
-  text-align: center; /* Center image container */
-}
-
-.illustration img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 10px;
-  display: block;
-  margin: 0 auto; /* Center the image */
-}
-
-@media (min-width: 768px) {
-  .wrapper {
-    flex-direction: row;
-    gap: 4rem; /* Space between form and image */
-  }
-
-  .form {
-    flex-basis: 50%;
-  }
-
-  .illustration {
-    flex-basis: 50%;
-  }
-
-  .illustration img {
-    max-height: 600px;
-    width: auto;
-  }
-}
-
-@media (max-width: 768px) {
-  .wrapper {
-    flex-direction: column;
-    text-align: center; /* Center all content in column layout */
-  }
-
-  .illustration {
-    margin-bottom: 2rem; /* Space between image and form */
-  }
-}
-
-.errorMessage,
+/* Success message style */
 .successMessage {
+  color: #2ecc71; /* Green color for success */
+  background-color: #ebf9f1;
+  padding: 10px;
+  border: 1px solid #2ecc71;
+  border-radius: 5px;
+  margin-top: 1rem;
+  text-align: center;
   font-size: 0.9rem;
   font-weight: bold;
-  text-align: center;
-  margin-top: 1rem;
-  padding: 10px;
-  border-radius: 8px;
 }
-
-.errorMessage {
-  color: #e74c3c;
-  background-color: #fbeaea;
-  border: 1px solid #e74c3c;
-}
-
-.successMessage {
-  color: #2ecc71;
-  background-color: #ebf9f1;
-  border: 1px solid #2ecc71;
-}
