diff --git a/README.md b/README.md
index 486842e..d6cdce8 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,6 @@ Si vous souhaitez juste lancer le projet pour le voir, je vous invite à :
 <div align="left">
 <img src="https://raw.githubusercontent.com/Canestin/assets/main/img/breakfood-qr-code.png" alt="Logo BreakFood" width="200">
 </div>
-<br>
 
 ## Outils utilisés
 
@@ -53,7 +52,7 @@ Avant de commencer, assurez-vous d'avoir les éléments suivants installés sur
 3. Exécutez la commande `npm install` pour installer les dépendances du projet.
 4. Configurez Supabase & Twilio : https://supabase.com/docs/guides/auth/phone-login/twilio
 5. Créez un fichier `.env` à la racine du projet et configurez les variables d'environnement nécessaires (par exemple, les informations d'accès à Supabase et Twilio).
-6. Exécutez la commande `expo start` pour lancer l'application en mode de développement.
+6. Exécutez la commande `expo start` pour lancer l'application en mode développement.
 
 ### variables d'environnement nécessaires
 
@@ -64,7 +63,7 @@ Avant de commencer, assurez-vous d'avoir les éléments suivants installés sur
 
 ## Configuration
 
-Avant de lancer l'application en mode de production, assurez-vous de configurer les paramètres appropriés pour l'environnement de production, tels que les clés d'API, les URL de serveur, etc. Vous pouvez généralement les définir dans le fichier `.env` ou dans les fichiers de configuration spécifiques.
+Avant de lancer l'application en mode production, assurez-vous de configurer les paramètres appropriés pour l'environnement de production, tels que les clés d'API, les URL de serveur, etc. Vous pouvez généralement les définir dans le fichier `.env` ou dans les fichiers de configuration spécifiques.
 
 ## Déploiement
 
@@ -81,6 +80,4 @@ Ce projet est sous licence MIT. Veuillez consulter le fichier [LICENSE](LICENSE)
 
 ---
 
-Merci d'avoir choisi notre application de partage de recettes équilibrées ! Nous espérons que vous l'apprécierez et qu'elle vous aidera à maintenir une alimentation saine et délicieuse. Si vous avez des questions ou des commentaires, n'hésitez pas à nous contacter.
-
 Bon appétit !
diff --git a/data/FakePostData.js b/data/FakePostData.js
index ff24913..6a20c27 100644
--- a/data/FakePostData.js
+++ b/data/FakePostData.js
@@ -8,6 +8,7 @@ const fakePostData = [
     likes: 1207,
     comments: 103,
     liked: true,
+    saved: false,
     user: {
       id: "N1",
       username: "antonio",
@@ -24,6 +25,7 @@ const fakePostData = [
     likes: 2154,
     comments: 210,
     liked: false,
+    saved: true,
     user: {
       id: "N2",
       username: "santana",
@@ -40,6 +42,7 @@ const fakePostData = [
     likes: 1511,
     comments: 152,
     liked: true,
+    saved: false,
     user: {
       id: "N4",
       username: "jada",
@@ -56,6 +59,7 @@ const fakePostData = [
     likes: 6047,
     comments: 1303,
     liked: false,
+    saved: false,
     user: {
       id: "N3",
       username: "john",
diff --git a/screens/CommentsScreen.js b/screens/CommentsScreen.js
new file mode 100644
index 0000000..b1ce1c6
--- /dev/null
+++ b/screens/CommentsScreen.js
@@ -0,0 +1,99 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  Image,
+  Vibration,
+  Pressable,
+} from "react-native";
+import React, { useState } from "react";
+import { useEffect } from "react";
+import Colors from "../constants/Colors";
+import supabase from "../lib/supabase";
+import user1 from "../assets/images/userphoto.jpeg";
+import { FontAwesome } from "@expo/vector-icons";
+import { ScrollView } from "react-native-gesture-handler";
+
+const CommentsScreen = ({ navigation }) => {
+  const [comments, setComments] = useState([]);
+
+  return (
+    <ScrollView style={styles.container}>
+      <Comment />
+      <Comment />
+      <Comment />
+      <Comment />
+      <Comment />
+      <TextInput />
+    </ScrollView>
+  );
+};
+
+export default CommentsScreen;
+
+const Comment = ({ post }) => {
+  const [liked, setLiked] = useState(false);
+  const [seeMore, setSeeMore] = useState(1);
+  const [numberOflikes, setNumberOflikes] = useState(12);
+
+  const content =
+    "In quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet In quis justo. Maecenas rhoncus aliqua lacus. In quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet In quis justo. Maecenas rhoncus aliqua lacus.";
+
+  useEffect(() => {
+    setSeeMore(content.length);
+  }, [post?.id]);
+  const handleLiked = () => {
+    Vibration.vibrate();
+    setLiked(!liked);
+    setNumberOflikes((nl) => (liked ? nl - 1 : nl + 1));
+  };
+
+  return (
+    <View
+      style={{
+        padding: 10,
+        flexDirection: "row",
+        gap: 10,
+        borderBottomWidth: 0.5,
+        borderBottomColor: "lightgray",
+      }}
+    >
+      <Image
+        style={{ height: 38, width: 38, borderRadius: 19 }}
+        source={user1}
+      />
+      <View style={{ flex: 1, gap: 5 }}>
+        <View style={{ gap: 5 }}>
+          <Text style={{ fontSize: 16, fontWeight: "600" }}>
+            Canestin Ndong
+          </Text>
+          <Pressable onPress={() => setSeeMore((s) => !s)} style={{ flex: 1 }}>
+            <Text style={{ fontSize: 16 }}>
+              {seeMore ? content.slice(0, 170) + " " : content}
+              {seeMore && (
+                <Text style={{ fontSize: 16, color: Colors.primary }}>
+                  voir plus
+                </Text>
+              )}
+            </Text>
+          </Pressable>
+        </View>
+        <View style={{ flexDirection: "row", gap: 5, alignItems: "center" }}>
+          <FontAwesome
+            name={liked ? "heart" : "heart-o"}
+            color={liked ? "red" : "black"}
+            size={20}
+            onPress={handleLiked}
+          />
+          <Text style={{ fontSize: 16 }}>{numberOflikes}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    // backgroundColor: "pink",
+  },
+});