diff --git a/src/components/ModifyReview.jsx b/src/components/ModifyReview.jsx
new file mode 100644
index 0000000..8f70e33
--- /dev/null
+++ b/src/components/ModifyReview.jsx
@@ -0,0 +1,162 @@
+// ModifyReview.js
+import React, { useState } from 'react';
+import { Button, Modal, Form } from 'react-bootstrap';
+import { useAuth } from "./AuthContext";
+import {
+  StarFill,
+  Star
+} from "react-bootstrap-icons";
+
+const ModifyReview = ({ show, reviewId, recipeId, onHide, reloadReviews, funct, reviewInfo }) => {
+  const [newComment, setNewComment] = useState(reviewInfo.comment);
+  const [newRating, setNewRating] = useState(reviewInfo.rating);
+  const [newImage, setNewImage] = useState(reviewInfo.file); 
+  const [characterCount, setCharacterCount] = useState(0);
+  const { token } = useAuth();
+
+  const handleUpdateReview = async () => {
+    const bodyData = {
+      comment: newComment,
+      rating: newRating,
+    };
+    if (newImage) {
+      bodyData.file = newImage;
+    }
+    console.log(">>>>NewImage: ", newImage)
+    
+    try {
+      const response = await fetch(
+        `${process.env.REACT_APP_API_URL}/review/${recipeId}/${reviewId}`,
+        {
+          method: 'PUT',
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ comment: newComment, rating: newRating }),  
+          file: newImage      
+        }
+      );
+
+      const data = await response.json();
+      if (response.ok) {
+        console.log('Review actualizada:', data);
+        reloadReviews();
+      } else {
+        console.error('Error al actualizar la revisión:', data);
+      }
+    } catch (error) {
+      console.error('Error en la solicitud de actualización de la revisión:', error);
+    }
+
+    onHide();
+  };
+
+  const handleDeleteReview = async () => {
+    try {
+      const response = await fetch(
+        `${process.env.REACT_APP_API_URL}/review/${recipeId}/${reviewId}`,
+        {
+          method: 'DELETE',
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      const data = await response.json();
+      if (response.ok) {
+        console.log('Review eliminada:', data);
+        reloadReviews();
+      } else {
+        console.error('Error al eliminar la revisión:', data);
+      }
+    } catch (error) {
+      console.error('Error en la solicitud de eliminación de la revisión:', error);
+    }
+
+    onHide();
+  };
+
+  const renderStars = (amount) => {
+    let stars = [];
+    for (let i = 1; i <= 5; i++) {
+      stars.push(
+        <span
+          key={i}
+          className={"difficulty-star "
+            .concat(i <= amount ? "active" : "inactive")
+            .concat(" ms-2 fs-4")}
+          role="button"
+          onClick={() => setNewRating(i)}
+        >
+          {i <= amount ? <StarFill /> : <Star />}
+        </span>
+      );
+    }
+    return stars;
+  };
+
+  const handleReviewChange = (e) => {
+    const inputReview = e.target.value;
+    setNewComment(inputReview)
+    setCharacterCount(inputReview.length);
+  };
+
+  const handleConfirmDelete = () => {
+    handleDeleteReview();
+  };
+
+  return (
+    <Modal show={show} onHide={onHide}>
+      <Modal.Header closeButton className="fw-bold bg-normal">
+        <Modal.Title>{funct === 'Edit' ? 'Modify' : 'Delete'} review</Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="bg-lightest">
+        {funct === 'Edit' ? (
+          <Form>
+            <Form.Group className="mb-3 fw-bold">
+              <Form.Label>New Review</Form.Label>
+              <Form.Control
+                as="textarea"
+                rows={3}
+                placeholder="Write your new review here"
+                value={newComment}
+                onChange={handleReviewChange}
+                style={{ borderColor: characterCount > 80 ? 'red' : null }}
+              />
+              {characterCount > 80 && (
+              <div className="text-danger">You exceeded 80 characters.</div>
+            )}
+            <div className="mt-2 text-muted">Num characters: {characterCount}</div>
+            </Form.Group>
+            <Form.Group className="mb-3 fw-bold">
+              <Form.Label>New Rating</Form.Label>
+              <div>{renderStars(newRating)}</div>
+            </Form.Group>
+          </Form>
+        ) : (
+          <p className='fw-bold fs-4'>Are you sure delete review?</p>
+        )}
+      </Modal.Body>
+      <Modal.Footer style={{ backgroundColor: "#ffe7dfe0"}}>
+        {funct === 'Edit' ? (
+          <Button className='bg-danger fw-bold border-secondary text-white' variant="primary" onClick={handleUpdateReview} disabled={characterCount > 80}>
+            Update
+          </Button>
+        ) : (
+          <>
+            <Button variant="danger" onClick={handleConfirmDelete}>
+              Accept
+            </Button>
+            <Button variant="secondary" onClick={onHide}>
+              Cancel
+            </Button>
+          </>
+        )}
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default ModifyReview;
diff --git a/src/components/PostReview.jsx b/src/components/PostReview.jsx
index bd7d92a..7dff074 100644
--- a/src/components/PostReview.jsx
+++ b/src/components/PostReview.jsx
@@ -17,6 +17,8 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => {
   const { token } = useAuth();
   const [error, setError] = useState(null);
   const [showErrorModal, setShowErrorModal] = useState(false);
+  const [characterCount, setCharacterCount] = useState(0);
+
 
 
   useEffect(() => {
@@ -39,6 +41,12 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => {
     setImage(selectedImage);
   };
 
+  const handleReviewChange = (e) => {
+    const inputReview = e.target.value;
+    setReview(inputReview);
+    setCharacterCount(inputReview.length);
+  };
+
   const handlePostReview = async () => {
     const reviewData = {
       username: username,
@@ -103,38 +111,47 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => {
 
   return (<>
     <Modal show={show} onHide={onHide}>
-      <Modal.Header closeButton>
+      <Modal.Header closeButton className="fw-bold bg-normal"> 
         <Modal.Title>Post a review</Modal.Title>
       </Modal.Header>
-      <Modal.Body>
+      <Modal.Body className="bg-lightest">
         <Form>
-          <Form.Group className="mb-3">
+          <Form.Group className="mb-3 fw-bold">
             <Form.Label>Review</Form.Label>
             <Form.Control
               as="textarea"
               rows={3}
               placeholder="Write your review here"
               value={review}
-              onChange={(e) => setReview(e.target.value)}
+              onChange={handleReviewChange}
+              style={{ borderColor: characterCount > 80 ? 'red' : null }}
             />
+            {characterCount > 80 && (
+              <div className="text-danger">You exceeded 80 characters.</div>
+            )}
+            <div className="mt-2 text-muted">Num characters: {characterCount}</div>
           </Form.Group>
-
-          <Form.Group className="mb-3">
+          <Form.Group className="mb-3 fw-bold">
             <Form.Label>Rating</Form.Label>
             <div>{renderStars(difficulty)}</div>
           </Form.Group>
 
-          <Form.Group className="mb-3">
+          <Form.Group className="mb-3 fw-bold">
             <Form.Label>Select Image</Form.Label>
             <Form.Control type="file" onChange={handleFileChange} />
           </Form.Group>
         </Form>
       </Modal.Body>
-      <Modal.Footer>
+      <Modal.Footer style={{ backgroundColor: "#ffe7dfe0"}}>
         <Button variant="secondary" onClick={onHide}>
           Close
         </Button>
-        <Button variant="primary" onClick={handlePostReview}>
+        <Button
+        className='bg-danger fw-bold border-secondary text-white'
+          variant="primary"
+          onClick={handlePostReview}
+          disabled={characterCount > 80}
+        >
           Post Review
         </Button>
       </Modal.Footer>
@@ -149,7 +166,7 @@ const PostReview = ({ id, show, onHide, reloadReviews }) => {
        </Alert>
      </Modal.Body>
      <Modal.Footer>
-       <Button variant="primary" onClick={() => setShowErrorModal(false)}>
+       <Button variant="secondary" onClick={() => setShowErrorModal(false)}>
          Close
        </Button>
      </Modal.Footer>
diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx
index b19f4a1..55b3151 100644
--- a/src/components/RecipeDetail.jsx
+++ b/src/components/RecipeDetail.jsx
@@ -2,8 +2,9 @@ import React, { useState, useEffect } from "react";
 import { useAuth } from "./AuthContext";
 import "../css/common.css";
 import "../css/Transitions.css";
+import RecipeCard from "./RecipeCard";
 import chefIcon from "../assets/icons/chef.png"
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, Link } from "react-router-dom";
 import defaultProfile from "../assets/defaultProfile.png";
 import { CSSTransition } from "react-transition-group";
 import gyozas from '../assets/gyozas.jpg';
@@ -40,8 +41,7 @@ function RecipeDetail() {
   const [userId, setUserId] = useState('');
   const [userName, setUserName] = useState('');
   const [userImage, setUserImage] = useState('');
-  const [showModal, setShowModal] = useState(false);
-  const [user, setUser] = useState({});
+  const [similarRecipes, setSimilarRecipes] = useState('');
   const { id } = useParams();
   const [recipe, setRecipe] = useState({ images: [] });
   const [showReviews, setShowReviews] = useState(false);
@@ -73,6 +73,7 @@ function RecipeDetail() {
 
   useEffect(() => {
     getRecipe();
+    getSimilarRecipes();
     if (isLogged()) {
       getIsLiked(username);
     }
@@ -89,6 +90,17 @@ function RecipeDetail() {
       .catch((error) => console.error("Error al obtener receta:", error));   
   };
 
+  const getSimilarRecipes = () => {
+    fetch(process.env.REACT_APP_API_URL + `/recipe/similar/${id}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setSimilarRecipes(data)
+        console.log(">><data: ", data)
+      })
+      .catch((error) => console.error("Error al obtener recetas similares:", error));   
+  };
+
+
   const fetchUserData = async (userId) => {
     try {
       const response = await fetch(process.env.REACT_APP_API_URL + '/user/' + userId, {
@@ -307,8 +319,8 @@ function RecipeDetail() {
                             {recipe.energy ?? "No info of"} kcal
                           </span>
                         </div>
-                        <Button className="mt-3" onClick={handleToggleReviews}>
-                          Toggle Reviews
+                        <Button className="mt-3 bg-danger fw-bold border-secondary text-white" onClick={handleToggleReviews}>
+                          Reviews
                         </Button>
                       </div>
                     </Col>
@@ -418,10 +430,31 @@ function RecipeDetail() {
                 </Row>
               </Container>
             </CSSTransition>
+            <CSSTransition in={true} timeout={500} classNames="slideUp" appear>
+              <Container className="mt-5 pb-3 text-center box-rounded shadow bg-lightest">
+                <Row>
+                  <Col sm={12}>
+                    <h1 className="py-4 mt-1">Similar Recipes</h1>
+                  </Col>
+                  {similarRecipes.length > 0 ? similarRecipes?.map((recipe) => (
+                    <Col key={recipe._id} sm={4} className="mb-4">
+                      <Link
+                        to={`/RecipeDetail/${recipe._id}`}
+                        className="text-decoration-none"
+                      >
+                        <RecipeCard recipe={recipe} />
+                      </Link>
+                    </Col>
+                  )): null}
+                </Row>
+              </Container>
+            </CSSTransition>   
           </Col>
         </Row>
       </Container>
-      {/* Offcanvas para mostrar los comentarios */}
+
+ 
+
       <Offcanvas
         show={showReviews}
         onHide={() => setShowReviews(false)}
@@ -431,7 +464,7 @@ function RecipeDetail() {
           <Offcanvas.Title className="fs-2 mt-3">Reviews</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body style={{ backgroundColor: "#ffb79fe0" }}>
-          <Reviews id={id} reloadReviews={reloadReviewsFunction} />
+          <Reviews id={id} reloadReviews={reloadReviewsFunction} owner={recipe.username}/>
         </Offcanvas.Body>
       </Offcanvas>
       <Modal
diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx
index d8b6fc5..7bdd160 100644
--- a/src/components/Reviews.jsx
+++ b/src/components/Reviews.jsx
@@ -1,20 +1,23 @@
 import React, { useState, useEffect } from "react";
 import { Container, Row, Col, Button, Image } from "react-bootstrap";
 import PostReview from "./PostReview";
-import chefIcon from "../assets/icons/chef.png";
-import { StarFill, PatchCheck } from "react-bootstrap-icons";
+import { StarFill, PatchCheck, PencilSquare, Trash } from 'react-bootstrap-icons';
 import LikesReview from "./LikesReview";
 import ImageModal from "./ImageModal";
+import ModifyReview from "./ModifyReview";
 
 
 function Reviews(props) {
-  const { id, reloadReviews } = props;
+  const { id, reloadReviews, owner } = props;
   const [reviews, setReviews] = useState(null);
   const [showModal, setShowModal] = useState(false);
   const [showModalImage, setShowModalImage] = useState(false);
+  const [showModalReview, setShowModalReview] = useState(false);
   const [selectedImage, setSelectedImage] = useState(null); 
+  const [selectedReview, setSelectedReview] = useState(null);
+  const [selectedFunct, setSelectedFunct] = useState(null);
   const isLogged = window.localStorage.getItem("logged");
-  const currentUserUsername = localStorage.getItem('currentUser');
+  const currentUser = localStorage.getItem('currentUser');
 
 
   useEffect(() => {
@@ -36,7 +39,7 @@ function Reviews(props) {
     setShowModalImage(false);
   };
 
-  const handleOpenModal = (image) => {
+  const handleOpenModal = () => {
     setShowModal(true);
   };
 
@@ -44,11 +47,25 @@ function Reviews(props) {
     setShowModal(false);
   };
 
+  const handleOpenModalReview = (review, funct) => {
+    setSelectedReview(review);
+    setShowModalReview(true);
+    setSelectedFunct(funct);
+
+  };
+
+  const handleCloseModalReview = () => {
+    setSelectedReview(null);
+    setShowModalReview(false);
+    setSelectedFunct(null);
+  };
+
   return (
     <Container className="flex-column justify-content-between align-items-center">
       {isLogged === 'true' ? 
         <Row className="mt-2">
-          <Button className="fs-6 mx-auto" onClick={handleOpenModal}>
+          {reviews && reviews.length > 0 && owner !== currentUser ? (<>
+          <Button className="mx-auto fs-6 bg-danger fw-bold border-secondary text-white" onClick={handleOpenModal}>
             Post review
           </Button>
           <PostReview
@@ -57,19 +74,21 @@ function Reviews(props) {
             onHide={handleCloseModal}
             reloadReviews={reloadReviews}
           /> 
+          </>) : null}
         </Row>
       : null}
       <Col sm={12} className="mt-4 mx-auto">
         <Container>
           <ul className="list-unstyled">
-            {reviews ? (
+            {reviews && reviews.length > 0 ? (
               reviews.map((review, index) => (
                 <li key={index} className="mb-3 p-2 fs-6 bg-light box-shadow">
+                  {review.image ? 
                   <Row>
-                    <Col sm={2} className="fw-bold">
+                    <Col sm={12} className="fw-bold">
                       {review.username}:{" "}
                     </Col>
-                    <Col sm={10}>{review.comment}</Col>
+                    <Col sm={12}>{review.comment}</Col>
                     <Col sm={5} className="mt-2">
                       <Image
                         src={review.image}
@@ -115,16 +134,103 @@ function Reviews(props) {
                             initialLikes={review.likes || 0}
                             likedBy={review.liked_by}
                             reloadReviews={reloadReviews}
-                            /> 
+                            />
+                            {currentUser === review.username && (
+                              <>
+                                <PencilSquare
+                                  className="ms-2 mt-1"
+                                  style={{ color: 'blue', cursor: 'pointer' }}
+                                  onClick={() => handleOpenModalReview(review, 'Edit')}
+                                />
+                                <Trash
+                                  className="ms-2 mt-1"
+                                  style={{ color: 'red', cursor: 'pointer' }}
+                                  onClick={() => handleOpenModalReview(review, 'Trash')}
+                                />
+                              </>
+                            )} 
+                          </div>
+                        </Col>
+                      </Row>
+                    </Col>
+                  </Row> 
+                  : 
+                  <Row>
+                    <Col sm={12} className="fw-bold">
+                      {review.username}:{" "}
+                    </Col>
+                    <Col sm={5} className="mt-1" style={{ wordWrap: "break-word" }}>{review.comment}</Col>
+                    <Col sm={7}>
+                      <Row>
+                        <Col sm={12}>
+                          <div className="d-flex align-items-center mt-1">
+                            <h5>
+                              <PatchCheck
+                                style={{ color: "red", marginLeft: '1px' }}
+                              ></PatchCheck>{" "}
+                              {Array(review.rating || 0)
+                                .fill()
+                                .map((_, index) => (
+                                  <span
+                                    key={index}
+                                    className="fs-5 ms-1 text-center"
+                                  >
+                                    <StarFill
+                                      style={{ color: "gold" }}
+                                    ></StarFill>
+                                  </span>
+                                ))}
+                            </h5>
+                          </div>
+                        </Col>
+                        <Col sm={12}>
+                          <div className="d-flex align-items-cente mt-2 ms-1">
+                            <LikesReview
+                            reviewUsername={review.username}
+                            recipeId={id}
+                            reviewId={review._id}
+                            initialLikes={review.likes || 0}
+                            likedBy={review.liked_by}
+                            reloadReviews={reloadReviews}
+                            />
+                            {currentUser === review.username && (
+                              <>
+                                <PencilSquare
+                                  className="mt-1 ms-1"
+                                  style={{ color: 'blue', cursor: 'pointer' }}
+                                  onClick={() => handleOpenModalReview(review, 'Edit')}
+                                />
+                                <Trash
+                                  className="ms-2 mt-1"
+                                  style={{ color: 'red', cursor: 'pointer' }}
+                                  onClick={() => handleOpenModalReview(review, 'Trash')}
+                                />
+                              </>
+                            )} 
                           </div>
                         </Col>
                       </Row>
                     </Col>
-                  </Row>
+                  </Row>}
                 </li>
               ))
-            ) : (
-              <span>Reviews not available</span>
+            ) : ( owner !== currentUser ? 
+              (<div className="text-center mt-5">
+                <h4 className="mb-3">There are currently no reviews</h4>
+                <p>Be the first one to post a review and share your thoughts!</p>
+                <Button className="mx-auto fs-6 bg-danger fw-bold border-secondary text-white" onClick={handleOpenModal}>
+                  Post review
+                </Button>
+                <PostReview
+                  id={id}
+                  show={showModal}
+                  onHide={handleCloseModal}
+                  reloadReviews={reloadReviews}
+                /> 
+              </div>) : <div className="text-center mt-5">
+               <h4 className="mb-3">There are currently no reviews</h4>
+                <p className="mb-3">You are the owner of the recipe you can't do reviews </p>
+                </div>
             )}
           </ul>
         </Container>
@@ -133,8 +239,19 @@ function Reviews(props) {
         show={showModalImage}
         onHide={handleCloseModalImage}
         recipeImage={selectedImage}
-        recipeName={selectedImage ? "Image" : null} // Puedes cambiar esto según tus necesidades
+        recipeName={selectedImage ? "Image" : null} 
       />
+      {selectedReview && (
+        <ModifyReview
+          show={showModalReview}
+          reviewId={selectedReview._id}
+          recipeId={id}
+          onHide={handleCloseModalReview}
+          reloadReviews={reloadReviews}
+          funct={selectedFunct}
+          reviewInfo={selectedReview}
+        />
+      )}
     </Container>
   );
 }