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..bc62173c 100644
--- a/Site Web/client/src/pages/Trends.js	
+++ b/Site Web/client/src/pages/Trends.js	
@@ -1,9 +1,18 @@
 import React from 'react';
 import Navbar from '../components/Navbar';
+import Notif from '../components/Notif';
 
 const Trends = () => {
     return (
-        <Navbar />
+        <>
+            <Navbar />
+            <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"/>
+        </>
     );
 };
 
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..3f40fc04
--- /dev/null
+++ b/Site Web/client/src/styles/component/_notif.scss	
@@ -0,0 +1,36 @@
+/*.conteneur_notif{
+  display: flex;
+  justify-content: center;
+  margin-top: 1%;
+  margin-bottom: 1%;
+
+  display: flex;
+  alignItems: center;
+
+}*/
+
+.conteneur_notif {
+  display: flex;
+  align-items:center;
+  justify-content: start;
+
+  margin-left: 10%;
+  margin-top: 1%;
+  margin-bottom: 1%;
+}
+
+
+.contenue_notif:nth-child(2) {
+  margin-right: 10px;
+}
+
+/*
+.messageUserNotif{
+  display: flex;
+  align-items: flex-start;
+}
+
+.message_Notif{
+
+}
+*/
\ 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..6b7b816d 100644
--- a/Site Web/client/src/styles/index.scss	
+++ b/Site Web/client/src/styles/index.scss	
@@ -8,3 +8,5 @@
 @import'./component/ConfigurationDuProfil.scss';
 @import './component/newPoste';
 
+@import './component/notif';
+