diff --git a/Site Web/src/assets/img/coeurs.png b/Site Web/src/assets/img/coeurs.png
new file mode 100644
index 00000000..7f184cd7
Binary files /dev/null and b/Site Web/src/assets/img/coeurs.png differ
diff --git a/Site Web/src/assets/img/coeursPlein.png b/Site Web/src/assets/img/coeursPlein.png
new file mode 100644
index 00000000..463c75df
Binary files /dev/null and b/Site Web/src/assets/img/coeursPlein.png differ
diff --git a/Site Web/src/assets/img/commentaire.png b/Site Web/src/assets/img/commentaire.png
new file mode 100644
index 00000000..8a9619de
Binary files /dev/null and b/Site Web/src/assets/img/commentaire.png differ
diff --git a/Site Web/src/assets/img/photoProfileTest.png b/Site Web/src/assets/img/photoProfileTest.png
new file mode 100644
index 00000000..cd5d617f
Binary files /dev/null and b/Site Web/src/assets/img/photoProfileTest.png differ
diff --git a/Site Web/src/components/Poste.js b/Site Web/src/components/Poste.js
new file mode 100644
index 00000000..f873a536
--- /dev/null
+++ b/Site Web/src/components/Poste.js	
@@ -0,0 +1,51 @@
+import React, { Component, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import PP  from "../assets/img/photoProfileTest.png";
+import coeurs from "../assets/img/coeurs.png";
+import commentaire from "../assets/img/commentaire.png";
+import "../styles/components/_poste.scss";
+
+const Poste = () => {
+    
+    return (
+        <div id="cadrePoste">
+		    <div id="hautPoste">
+			    <div id="cadreInfoPoste">
+				    <img id="PProfile" src={PP} alt="photo de profile"/>
+				    <h6 id="NomProfile">Lena 1er</h6>
+			    </div>
+			    <div>6 jours</div>
+            </div>
+		    <div id="contenuePoste">
+			    /*https://my.linkpreview.net/*/
+                {linkpreview("https://www.youtube.com")}
+		    </div>
+		    <div id="basPoste">
+			    <div id="like">
+				    <img src={coeurs}/>
+				    <div>10k</div>
+			    </div>
+			    <div id="commentaire">
+				    <img src={commentaire}/>
+				    <div>10k</div>
+			    </div>
+		    </div>
+	    </div>
+    );
+}
+
+function linkpreview(link){
+	const [preview, setPreview] = useState('');
+
+	var key = '89aa1d8dffb8b79473be782f14a2d53b';
+    link = 'http://api.linkpreview.net/?key='+key+'&q' + link;
+	
+	console.log(link);
+	useEffect(() => {
+		fetch(link).then(res => res.json()).then(setPreview)
+	}, []);
+    return <div>{JSON.stringify(preview)}</div>;
+
+}
+
+export default Poste; 
\ No newline at end of file
diff --git a/Site Web/src/styles/components/_poste.scss b/Site Web/src/styles/components/_poste.scss
new file mode 100644
index 00000000..370de5ea
--- /dev/null
+++ b/Site Web/src/styles/components/_poste.scss	
@@ -0,0 +1,49 @@
+  
+#cadrePoste{
+    background: white;
+    border: 2px solid;
+    border-radius: 5px;
+    border-color: grey;
+    width: 40%;
+    margin-left: auto;
+    margin-right: auto;
+}
+    
+#hautPoste{
+    display: flex;
+    align-items:center;
+    justify-content: space-between;
+    margin-right: 15px;
+}
+    
+#cadreInfoPoste{
+    display: flex;
+    align-items:center;
+}
+
+#PProfile{
+    margin: 10px 15px 0px 20px;
+    width: 40px;
+    height:40px;
+    border-radius: 20px;
+    border: 2px solid #555;
+}
+    
+#NomProfile{
+    font-family: arial;
+    font-size: 18px;  
+}
+    
+/*bas poste*/
+#basPoste{
+    display: flex;
+    align-items:center;
+    justify-content: space-between;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+    
+#like, #commentaire{
+    display: flex;
+    align-items:center;
+}
\ No newline at end of file