Fix UI

src/components/loginform/loginForm.jsx

@@ -24,7 +24,7 @@ function LoginForm({ className }) {
     };
 
     return (
-        <div className={`${className} ${"glassCard"}`}>
+        <div className={`${className} glassCard ${styles.inputContainer}`}>
             <div className={styles.formgroup}>
                 <Input
                     type="email"

src/components/loginform/loginForm.module.css

@@ -28,6 +28,10 @@ input::placeholder{
     margin-top:23px;
 }
 
+.inputContainer {
+    padding: 15px;
+}
+
 /* style scoped (module) */
 .loginButton {
     display: inline-block;

src/pages/Login/LoginPage.jsx

@@ -3,15 +3,14 @@ import LoginForm from "../../components/loginform/loginForm.jsx";
 import Background from "../../components/background/background.jsx";
 
 function LoginPage() {
-  return <Background>
-
-      <div className={styles.container}>
-          <LoginForm />
-      </div>
-
-  </Background>
+    return (
+        <Background>
+            <div className={styles.container}>
+                <h1 className={styles.title}>Connexion</h1>
+                <LoginForm />
+            </div>
+        </Background>
+    );
 }
 
 export default LoginPage;
-
-

src/pages/Login/LoginPage.module.css

@@ -1,16 +1,23 @@
 .container {
-    position: relative;
+    position: absolute;
     z-index: 2;
     display: flex;
+    flex-direction: column;
     width: 600px;
-    overflow: hidden;
     max-height: 80%;
     justify-content: center;
     align-items: center;
     padding: 20px;
-    border-radius:12px;
-    margin-left: 33.3%;
+    border-radius: 12px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
 
-
-
+.title {
+    font-size: 36px;
+    color: white;
+    text-align: center;
+    margin-bottom: 20px;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}

src/pages/Register/RegisterPage.jsx

@@ -30,9 +30,9 @@ function RegisterPage() {
 
         <div className={styles.container}>
 
-            <div className={"glassCard"}>
+            <h1 className={styles.title}>Créer un compte</h1>
 
-                <h1>Créer un compte</h1>
+            <div className={`glassCard ${styles.inputContainer}`}>
 
                 <div className={styles.formGroup}>
                     <Input

src/pages/Register/RegisterPage.module.css

@@ -2,6 +2,7 @@
     position: relative;
     z-index: 2;
     display: flex;
+    flex-direction: column;
     width: 30%;
     justify-content: center;
     align-items: center;
@@ -9,6 +10,15 @@
     border-radius:12px;
 }
 
+.title {
+    font-size: 36px;
+    color: white;
+    text-align: center;
+    margin-bottom: 20px;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+
 :global(.glassCard) {
     --glass-bg: #ffffff9f;
 }
@@ -26,4 +36,8 @@
 h1 {
     overflow: visible;
     text-align: center;
+}
+
+.inputContainer {
+    padding: 15px;
 }