diff --git a/src/components/background/background.jsx b/src/components/background/background.jsx
index 0a5838b..b77ce82 100644
--- a/src/components/background/background.jsx
+++ b/src/components/background/background.jsx
@@ -1,15 +1,55 @@
-import styles from "./background.module.css"; 
+import styles from "./background.module.css";
+import { useEffect, useRef } from "react";
+
 const Background = ({ children, className }) => {
+  const circlesRef = useRef([]);
+
+  const getRandomTranslation = () => {
+    const randomX = Math.floor(Math.random() * 100) - 30; 
+    const randomY = Math.floor(Math.random() * 100) - 30;
+    return { x: randomX, y: randomY };
+  };
+
+  useEffect(() => {
+    circlesRef.current.forEach((circle) => {
+      if (circle) {
+        const { x, y } = getRandomTranslation();
+        circle.style.setProperty('--random-x', `${x}px`);
+        circle.style.setProperty('--random-y', `${y}px`);
+      }
+    });
+  }, []);
+
   return (
     <div className={`${styles["background-container"]} ${className || ''}`}>
-      <div className={styles["circle"] + " " + styles["circle-1"]}></div>
-      <div className={styles["circle"] + " " + styles["circle-2"]}></div>
-      <div className={styles["circle"] + " " + styles["circle-3"]}></div>
-      <div className={styles["circle"] + " " + styles["circle-4"]}></div>
-      <div className={styles["circle"] + " " + styles["circle-5"]}></div>
+      <div
+        ref={(el) => (circlesRef.current[0] = el)}
+        className={`${styles["circle"]} ${styles["circle-1"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
+      <div
+        ref={(el) => (circlesRef.current[1] = el)}
+        className={`${styles["circle"]} ${styles["circle-2"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
+      <div
+        ref={(el) => (circlesRef.current[2] = el)}
+        className={`${styles["circle"]} ${styles["circle-3"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
+      <div
+        ref={(el) => (circlesRef.current[3] = el)}
+        className={`${styles["circle"]} ${styles["circle-4"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
+      <div
+        ref={(el) => (circlesRef.current[4] = el)}
+        className={`${styles["circle"]} ${styles["circle-5"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
       {children}
     </div>
   );
 };
 
-export default Background;
\ No newline at end of file
+export default Background;
diff --git a/src/components/background/background.module.css b/src/components/background/background.module.css
index 41d0a05..6d3c524 100644
--- a/src/components/background/background.module.css
+++ b/src/components/background/background.module.css
@@ -57,4 +57,19 @@
   background-color: rgba(240, 240, 41, 0.827);
   top: 2%;
   right: 2%;
+}
+.circle-1,.circle-2, .circle-3, .circle-4, .circle-5 {
+  animation: float 6s ease-in-out infinite;
+}
+.circle {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(var(--random-x), var(--random-y));
+  }
 }
\ No newline at end of file
diff --git a/src/components/form/form.jsx b/src/components/form/form.jsx
index 2771332..5fedf71 100644
--- a/src/components/form/form.jsx
+++ b/src/components/form/form.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+/*import { useState } from "react";
 import login from "../../utils/login.js";
 import getUser from "../../utils/getUser.js";
 import styles from "./form.module.css";
@@ -11,13 +11,13 @@ function LoginForm({ className }) {
         getUser();
     }
     return (
-        <div className={className}>
+        <div className={`${className} ${"glassCard"}`}>
             <div className={styles.formgroup}>
                 <input type="email" id="email" value={email}  placeholder="Adresse mail" onChange={e => setEmail(e.target.value)} required/>
             </div>
 
             <div className={styles.formgroup}>
-                <input type="password" id="password" value={password} placeholder="Adresse mail" onChange={e => setPassword(e.target.value)} required/>
+                <input type="password" id="password" value={password} placeholder="Mot de passe" onChange={e => setPassword(e.target.value)} required/>
                 <br/>
             </div>
             <div className={styles.logButton} >
@@ -26,5 +26,77 @@ function LoginForm({ className }) {
         </div>
     );
 }
+export default LoginForm;*/
+
+import { useState } from "react";
+import login from "../../utils/login.js";
+import getUser from "../../utils/getUser.js";
+import styles from "./form.module.css";
+
+function LoginForm({ className }) {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+
+    async function handleSubmit(e) {
+        e.preventDefault();
+        await login(email, password);
+        getUser();
+    }
+
+    const toggleShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    return (
+        <div className={`${className} ${"glassCard"}`}>
+            <div className={styles.formgroup}>
+                <input
+                    type="email"
+                    id="email"
+                    className="glassCard"
+                    value={email}
+                    placeholder="Adresse mail"
+                    onChange={e => setEmail(e.target.value)}
+                    required
+                />
+            </div>
+            <div className={styles.formgroup}>
+                <div style={{ position: 'relative', width: '100%' }}>
+                    <input
+                        type={showPassword ? "text" : "password"}
+                        id="password"
+                        value={password}
+                        placeholder="Mot de passe"
+                        onChange={e => setPassword(e.target.value)}
+                        required
+                        style={{ width: '100%', paddingRight: '40px' }} // Espace pour le bouton
+                    />
+                    <button
+                        type="button"
+                        onClick={toggleShowPassword}
+                        style={{
+                            position: 'absolute',
+                            width: '30px',
+                            right: '10px',
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            fontSize: '16px',
+                        }}
+                    >
+                        {showPassword ? '👁️' : '🔒'}
+                    </button>
+                </div>
+            </div>
+            <div className={styles.logButton}>
+                <button className={styles.loginButton} onClick={handleSubmit}>Se connecter</button>
+            </div>
+        </div>
+    );
+}
+
 export default LoginForm;
 
diff --git a/src/components/form/form.module.css b/src/components/form/form.module.css
index a58ec84..009b834 100644
--- a/src/components/form/form.module.css
+++ b/src/components/form/form.module.css
@@ -5,9 +5,10 @@ input {
     padding: 0px 10px;
     border: none;
     border-radius: 10px;
-    font-size: 16px;
+    font-size: 19px;
     color: #111;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.06) inset;
+    background: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 2px 6px rgba(91, 90, 90, 0.06) inset;
 }
 
 input::placeholder{
@@ -27,21 +28,22 @@ input::placeholder{
 /* style scoped (module) */
 .loginButton {
     display: inline-block;
-    padding: 0.55rem 1rem;
-    height: 55px;
-    border-radius: 6px;
-    background-color: #2b6cb0;
-    color: #fff;
+    height: 50px;
+    width:90%;
+    border-radius: 16px;
+    margin-bottom:3%;
+    margin-top:3%;
+    background-color: rgba(255, 255, 255, 0.335);
+    color: #000000;
     font-weight: 600;
     border: none;
-    box-shadow: 0 2px 6px rgba(43,108,176,0.15);
     cursor: pointer;
     transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
     font-size: 15px;
 }
 
 .loginButton:hover {
-    background-color: #235a9a;
+    background-color: #54585e;
     transform: translateY(-2px);
     box-shadow: 0 6px 14px rgba(43,108,176,0.18);
 }
@@ -51,18 +53,6 @@ input::placeholder{
     box-shadow: 0 3px 8px rgba(43,108,176,0.12);
 }
 
-.loginButton:focus {
-    outline: 2px solid rgba(43,108,176,0.24);
-    outline-offset: 2px;
-}
 
 
-.loginButton:active {
-    transform: translateY(0);
-    box-shadow: 0 3px 8px rgba(43,108,176,0.12);
-}
 
-.loginButton:focus {
-    outline: 2px solid rgba(43,108,176,0.24);
-    outline-offset: 2px;
-}
diff --git a/src/index.css b/src/index.css
index d208144..39d9264 100644
--- a/src/index.css
+++ b/src/index.css
@@ -38,8 +38,8 @@ body {
 
 
 .glassCard {
-  width: 240px;
-  height: 360px;
+  width: 100%;
+  padding: 12px 12px 12px 12px;
   background: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
diff --git a/src/pages/Login/LoginPage.module.css b/src/pages/Login/LoginPage.module.css
index b913811..fc62d28 100644
--- a/src/pages/Login/LoginPage.module.css
+++ b/src/pages/Login/LoginPage.module.css
@@ -2,7 +2,7 @@
     position: relative;
     z-index: 2;
     display: flex;
-    width: 30%;
+    width: 600px;
     overflow: hidden;
     max-height: 80%;
     justify-content: center;