diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
new file mode 100644
index 00000000..560ddd15
--- /dev/null
+++ b/.idea/watcherTasks.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="sass" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="Sass" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>
\ No newline at end of file
diff --git a/Site Web/client/src/components/Configurations/ConfigurationDuCompte.js b/Site Web/client/src/components/Configurations/ConfigurationDuCompte.js
index 928e00d6..0b0c33e9 100644
--- a/Site Web/client/src/components/Configurations/ConfigurationDuCompte.js	
+++ b/Site Web/client/src/components/Configurations/ConfigurationDuCompte.js	
@@ -4,23 +4,55 @@ import { NavLink } from "react-router-dom";
 
 
 const ConfigurationDuCompte =()=>{
+
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [controlPassword, setControlPassword] = useState('');
+
     return(
         <div>
-        <h2>Modifucation information du compte</h2>
-        <div className='ligneHorizontal'>
-            <div>
-                <span>adresse mail : mail</span>
-                <span>mot de passe  : mdp</span>
-                <span>confirmer le mot de passe  : mdp</span>
+        <h2 className='ligneHorizontal'>Modifucation information du compte</h2>
+       
+            <div className="ModifucationInformationDuCompte">
+                        
+                        <div className='ModificationInformationDuCompteText'>
+                        <span>email</span>
+                        <span>mot de passe</span>
+                        <span>comfirmation mot de passe</span>
+                        </div>
+                        
+                        <div className='ModificationInformationDuCompteText'>
+                        
+                        <input  type="text" 
+                                name="email"
+                                id="email"
+                                onChange={(e) => setEmail(e.target.value)}
+                                value={email}/>
+                        <br />
+                        <div className='email error'></div>
+                        <input  type="password"
+                                name="password"
+                                id="password"
+                                onChange={(e) => setPassword(e.target.value)}
+                                value={password}/>
+                        <br/>
+                        <div className='password error'></div>
+                        <input  type="password" 
+                                name="password"
+                                id="password-conf"
+                                onChange={(e) => setControlPassword(e.target.value)}
+                                value={controlPassword}/>
+                                <div className='password error'></div>
+                        </div>
             </div>
-        </div>
-        <h2>Suppression du compte</h2>
-        <div className='ligneHorizontal'/>
-        <div >
+        <div />
+        <h2 className='ligneHorizontal'>Suppression du compte</h2>
+        <div className='buttonSuppressionCompte'>
+
         <button>
             supprimer votre compte    
         </button>
-        <span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span>
+        <span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span>
         </div> 
     </div>
     )
@@ -28,6 +60,7 @@ const ConfigurationDuCompte =()=>{
 
 
 
+
 export default ConfigurationDuCompte;
 
 
diff --git a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js
index b6b71f4e..6f0c730f 100644
--- a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js	
+++ b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js	
@@ -14,36 +14,35 @@ const ConfigurationDuProfil = ()=>{
     <div className='modificationDuProfilBackgroud'>
         <h2 className='ligneHorizontal' >Modifucation  du Profil</h2>
         <div className='modificationDuProfil' >
-            <img src={PP} className="imageDeProfil"/>
-                <span>Pseudo: </span>
-                <div className='modificationDuProfilText'>
-                <div className="inputbox">
-                    <input 
-                        type="pseudo" 
-                        name="pseudo" 
-                        id="pseudo" 
-                        value={userData.pseudo}
-                        onChange={(e) => setPseudo (e.target.value)} 
-
-                    />
+            <img src={PP} className="imageDeProfilConfiguration imageDeProfil"/>
 
+                <div className='modificationDuProfilText'>
+                <span>Pseudo: </span>
+                <span>Nom d'utilisateur:</span>
                 </div>
-                <div className="inputbox">
-                    <span>Nom d'utilisateur</span>
+                <div className='modificationDuProfilText'>
+                
                     <input 
                         type="nomUtilisateur" 
                         name="nomUtilisateur" 
                         id="nomUtilisateur" 
                         onChange={(e) => setNomUtilisateur (e.target.value)} 
-                        value={userData.pseudo}
+                        value={pseudo}
+                    />
+                    <input 
+                        type="pseudo" 
+                        name="pseudo" 
+                        id="pseudo" 
+                        value={pseudo}
+                        onChange={(e) => setPseudo (e.target.value)} 
                     />
                 </div>
-            </div>
+                
         </div>
         <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
         <div className='accesDossiersPerso'>
-            <input type="checkbox" id="accesDossiersPerso" name='cocher' />
-            <label >Cocher si oui</label>
+            <input type="checkbox" name='cocher' />
+            <label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label>
         </div> 
     </div>
 
diff --git a/Site Web/client/src/components/Configurations/PolitiqueDeConfidentialite.js b/Site Web/client/src/components/Configurations/PolitiqueDeConfidentialite.js
index 9c8c32a4..1d7df0b8 100644
--- a/Site Web/client/src/components/Configurations/PolitiqueDeConfidentialite.js	
+++ b/Site Web/client/src/components/Configurations/PolitiqueDeConfidentialite.js	
@@ -4,8 +4,8 @@ import { NavLink } from "react-router-dom";
 
 const PolitiqueDeConfidentialite =()=>{
     return(
-        <div>
-            Cette politique de confidentialité s’applique au site : Designed By GG.
+        <div className='PolitiqueDeConfidentialiteText'>
+           <p> Cette politique de confidentialité s’applique au site : Designed By GG.
             La présente politique de confidentialité a pour but d’exposer aux utilisateurs du site :
 
             La manière dont sont collectées et traitées leurs données à caractère
@@ -15,7 +15,7 @@ const PolitiqueDeConfidentialite =()=>{
             collectées et traitées ;
             A qui ces données sont transmises ;
             Eventuellement, la politique du site en matière de fichiers “cookies”
-            
+            </p>
         </div>
     )
 }
diff --git a/Site Web/client/src/components/Notif.js b/Site Web/client/src/components/Notif.js
new file mode 100644
index 00000000..8fbd7a0b
--- /dev/null
+++ b/Site Web/client/src/components/Notif.js	
@@ -0,0 +1,26 @@
+import React, {useEffect} from 'react';
+import {isEmpty} from "./Utils";
+import {useSelector} from "react-redux";
+
+const Notif = ({message} ) => {
+    const usersData = useSelector((state) => state.users.users);
+
+    return (
+        <div className='conteneur_notif'>
+            <div className={'contenue_notif'}>
+                <img id="PhotoProfile" alt="" src="lien" />
+            </div>
+            <div className={'contenue_notif'} >
+                <h6 id="NomProfile">
+                    bastien
+                </h6>
+            </div>
+            <div className={'contenue_notif'}>
+                    {message}
+            </div>
+        </div>
+
+    );
+};
+
+export default Notif;
\ No newline at end of file
diff --git a/Site Web/client/src/pages/Trends.js b/Site Web/client/src/pages/Trends.js
index f44acd36..34376b44 100644
--- a/Site Web/client/src/pages/Trends.js	
+++ b/Site Web/client/src/pages/Trends.js	
@@ -1,10 +1,19 @@
 import React from 'react';
 import Navbar from '../components/Navbar';
+import Notif from '../components/Notif';
 
 const Trends = () => {
     return (
-        <Navbar />
-    );
+        <div id={'listeNotif'}>
+            <Navbar />
+            <h1>Notification</h1>
+            <Notif message="a like"/>
+            <Notif message="a like"/>
+            <Notif message="a like"/>
+            <Notif message="a like"/>
+            <Notif message="a like"/>
+            <Notif message="a commenter votre poste"/>
+        </div>);
 };
 
 export default Trends;
\ No newline at end of file
diff --git a/Site Web/client/src/styles/_settings.scss b/Site Web/client/src/styles/_settings.scss
index 15c3b4e3..6d8e21d6 100644
--- a/Site Web/client/src/styles/_settings.scss	
+++ b/Site Web/client/src/styles/_settings.scss	
@@ -22,3 +22,10 @@ $color-5: #AABBCC;
     margin: 0;
     box-sizing: border-box;
 }
+
+.imageDeProfil{
+    object-fit: none;
+    clip-path:circle(50%);
+    
+}
+
diff --git a/Site Web/client/src/styles/component/_configurationDuCompte.scss b/Site Web/client/src/styles/component/_configurationDuCompte.scss
new file mode 100644
index 00000000..680974c5
--- /dev/null
+++ b/Site Web/client/src/styles/component/_configurationDuCompte.scss	
@@ -0,0 +1,41 @@
+
+.ModifucationInformationDuCompte{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 10%;
+}
+
+.ModificationInformationDuCompteText{
+    display: flex;
+    flex-direction: column;
+    padding-left:5%;
+    font-size: medium;
+    
+}
+
+.buttonSuppressionCompte{
+    display: flex;
+    flex-direction:row;
+    align-items:center;
+    button{
+        padding: 1%;
+        margin-bottom: 1%;
+        margin-top: 2%;
+        margin-left: 6%;
+        width: 16%;
+        max-width: 160px;
+        background-color: $color-3;
+        border: 2px solid $color-4;
+        border-radius: 20px;
+    }
+    button:hover  {
+        background-color: $color-1;
+        border-color: black;
+        
+    }
+    span{
+        padding-left: 40px;
+        max-width: 100px;
+    }
+}
diff --git a/Site Web/client/src/styles/component/ConfigurationDuProfil.scss b/Site Web/client/src/styles/component/_configurationDuProfil.scss
similarity index 65%
rename from Site Web/client/src/styles/component/ConfigurationDuProfil.scss
rename to Site Web/client/src/styles/component/_configurationDuProfil.scss
index 57307a88..ee1c7b3f 100644
--- a/Site Web/client/src/styles/component/ConfigurationDuProfil.scss	
+++ b/Site Web/client/src/styles/component/_configurationDuProfil.scss	
@@ -15,19 +15,23 @@
     display: flex;
     flex-direction: column;
     padding-left:5%;
-    width: 88%;
     font-size: medium;
+
 }
 
 span{
-    margin: 1%;
+
+    margin-bottom: 4%;
 
 }
 
-.imageDeProfil{
+.imageDeProfilConfiguration{
     width: 15%;
+    
+}
+.imageDeProfilConfiguration:hover{
+    filter: blur(1px);
 }
-
 .accesDossiersPerso{
     display: flex;
     align-items: row;
@@ -39,5 +43,15 @@ span{
 
 
 input{
-    margin-right: 0.5%;
+    margin-bottom: 2%;
+}
+
+.accesDossiersPerso{
+    display: flex;
+  
 }
+
+.textAccesDossiersPerso{
+    margin-left:18px;
+}
+
diff --git a/Site Web/client/src/styles/component/_notif.scss b/Site Web/client/src/styles/component/_notif.scss
new file mode 100644
index 00000000..13f32f2f
--- /dev/null
+++ b/Site Web/client/src/styles/component/_notif.scss	
@@ -0,0 +1,13 @@
+.conteneur_notif {
+  display: flex;
+  align-items:center;
+  justify-content: start;
+
+  margin-top: 1%;
+  margin-bottom: 1%;
+}
+
+
+.contenue_notif:nth-child(2) {
+  margin-right: 10px;
+}
\ No newline at end of file
diff --git a/Site Web/client/src/styles/component/_trends.scss b/Site Web/client/src/styles/component/_trends.scss
new file mode 100644
index 00000000..d0fa0bda
--- /dev/null
+++ b/Site Web/client/src/styles/component/_trends.scss	
@@ -0,0 +1,3 @@
+#listeNotif{
+  margin-left: 10%;
+}
\ No newline at end of file
diff --git a/Site Web/client/src/styles/index.scss b/Site Web/client/src/styles/index.scss
index 60a15dd3..77346d52 100644
--- a/Site Web/client/src/styles/index.scss	
+++ b/Site Web/client/src/styles/index.scss	
@@ -5,6 +5,9 @@
 @import './component/poste';
 @import './pages/configuration';
 @import './component/ajoutLien';
-@import'./component/ConfigurationDuProfil.scss';
+@import './component/configurationDuProfil';
 @import './component/newPoste';
 
+@import './component/notif';
+@import './component/trends';
+
diff --git a/Site Web/client/src/styles/pages/configuration.scss b/Site Web/client/src/styles/pages/configuration.scss
deleted file mode 100644
index 32e44e5f..00000000
--- a/Site Web/client/src/styles/pages/configuration.scss	
+++ /dev/null
@@ -1,8 +0,0 @@
-.ligneVertical{
-    border-right: thick solid #000;
-    height:85%;
-}
-.ligneHorizontal{
-    border-top: thick solid #000;
-    width: 78%;
-}
\ No newline at end of file